<a :href="url">
<button v-bind:disabled="someDynamicCondition">Button
<button :disabled="someDynamicCondition">Button
<div v-if="Math.random() > 0.5">
Sorry
Paragraph 1
Paragraph 2
v-show<ul id="example-2">
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
数组变动检测 Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：push(),pop(),shift(),unshift(),splice(),sort(),reverse()
对象 v-for
值域 v-for
var vm = new Vue({
el: '#example',data: {
name: 'Vue.js'
},// 在 methods 对象中定义方法
methods: {
greet: function (event) {
// 方法内 this 指向 vm
alert('Hello ' + this.name + '!')
// event 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以在 JavaScript 代码中调用方法
vm.greet(); // -> 'Hello Vue.js!'
内联语句处理器
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法
## 事件修饰符
## 按键修饰符
全部的按键别名：enter，tab，delete，esc，space，up，down，left，right
## 其他实例
/ 必需 /
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
/ .expand-enter 定义进入的开始状态 /
/ .expand-leave 定义离开的结束状态 /
.expand-enter,.expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
你可以在同一元素上通过动态绑定实现不同的过渡：
另外，可以提供 JavaScript 钩子:
// 注册
Vue.component('my-component',MyComponent);
// 创建根实例
new Vue({
el: '#example'
});
<div id="example">
或者直接写成：
Vue.component('my-component',{
template: '
// 创建根实例
new Vue({
el: '#example'
});
<div id="example">
实例二：
3.动态props
使用 v-bind 的缩写语法通常更简单：
比较语法：
<child :msg.sync="parentMsg">
<child :msg.once="parentMsg">
其他实例：
<modal :show.sync="showModal">
<h3 slot="header">custom header
其他实例：
// 注册
Vue.component('my-component',MyComponent);
// 创建根实例
new Vue({
el: '#example'
});
<div id="example">
或者直接写成：
// 创建根实例
new Vue({
el: '#example'
});
<div id="example">
使用 v-bind 的缩写语法通常更简单：
比较语法：
<child :msg.sync="parentMsg">
<child :msg.once="parentMsg">
其他实例：
例如，假定我们有一个 multi-insertion 组件，它的模板为：
父组件模板：
Default A
渲染结果为：
Default A
