<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写 --> <button :disabled="someDynamicCondition">Button</button>
二、v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
三、过滤器
{{ message | capitalize }}
四、条件渲染
v-if <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div> template-v-if <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> v-show <h1 v-show="ok">Hello!</h1>
五、列表渲染 for
v-for <ul> <li v-for="item in items"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }); <ul> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li> </ul> var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } });
数组变动检测
Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：push(), pop(), shift(), unshift(), splice(), sort(), reverse()
example1.items.push({ message: 'Baz' }); example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/); }); template-v-for <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li></li> </template> </ul>
对象 v-for
<ul> <li v-for="value in object"> {{ $key }} : {{ value }} </li> </ul> new Vue({ el: '#repeat-object', data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30 } } });
值域 v-for
<div> <span v-for="n in 10">{{ n }} </span> </div>
六、方法与事件处理器
方法处理器
<div> <button v-on:click="greet">Greet</button> </div> 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!'
内联语句处理器
<div> <button v-on:click="say('hi')">Say Hi</button> <button v-on:click="say('what')">Say What</button> </div> new Vue({ el: '#example-2', methods: { say: function (msg) { alert(msg) } } });
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法
<button v-on:click="say('hello!', $event)">Submit</button> methods: { say: function (msg, event) { // 现在我们可以访问原生事件对象 event.preventDefault() } };
## 事件修饰符
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"> <!-- 只有修饰符 --> <form v-on:submit.prevent></form>
## 按键修饰符
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit"> <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">
全部的按键别名：enter，tab，delete，esc，space，up，down，left，right
## 其他实例
new Vue({ el: '#demo', data: { newLabel: '', stats: stats }, methods: { add: function (e) { e.preventDefault() if (!this.newLabel) { return; } this.stats.push({ label: this.newLabel, value: 100 }); this.newLabel = ''; }, remove: function (stat) { if (this.stats.length > 3) { this.stats.$remove(stat); // 注意这里的$remove } else { alert('Can\'t delete more!') } } } });
七、过渡
CSS 过渡
<div v-if="show" transition="expand">hello</div> 然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 规则: /* 必需 */ .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; }
你可以在同一元素上通过动态绑定实现不同的过渡：
<div v-if="show" :transition="transitionName">hello</div> new Vue({ el: '...', data: { show: false, transitionName: 'fade' } }
另外，可以提供 JavaScript 钩子: