v-cloak 遮盖
<div id="app" v-cloak>{{text}}</div> //还需要加一句css [v-cloak]{ display: none; } //简单的项目适用，但在具有工程化的项目里，比如webpack和vue-router时不适用
v-once
也是一个不需要表达式的指令，只渲染一次。一般不用，当需要进一步优化性能时，可能会用到。
条件渲染指令v-if, v-else-if, v-else
<div id="app"> <p v-if="status===1">text1</p> <p v-else-if="status===2">text2</p> <p v-else>text3</p> </div>
<div id="app"> <template v-if="status===1"> <p>text1</p> <p>text2</p> </template> </div>
元素的复用
比如两个条件当中都有input，切换时输入input的内容会被保留，说明vue在渲染元素时，出于效率的考虑，复用了已有元素。如果不希望这样，可以在input中添加key=“”属性
v-show
<p v-show="status===1">text</p>
只是改变元素的css属性display，不能在template使用
列表渲染v-for
item in items或item of items
支持索引
<li v-for="(item,index) in items">{{index}}-{{{tem.name}}</li>
v-for也可以用在内置标签<template>，对多个元素进行渲染
<ul> <template v-for="book in books"> <li>书名：{{book.name}}</li> <li>作者：{{book.author}}</li> </template> </ul> <script> data: { books: [ { name: "aaa", author: "bbb" }, { name:"ccc", author:"ddd" } ] } </script>
除了数组以外，对象也可以遍历。
<span v-for="value in user">{{value}}</span> data:{ user:{ name:"aaa", age:26, gender:"男" } }
遍历对象属性时，有两个可选的参数key,index
<li v-for="(value, key, index) in user">{{index}}-{{key}}-{{value}}</li>
还可以迭代整数，渲染的结果是1 2 3 4 5 6 7 8 9 10
<span v-for="n in 10">{{n}}</span>
数组更新
数组更新会触发视图的更新。改变原数组的：push,pop,shift,unshift,splice,sort,reverse，返回新数组的：filter,concat,slice
app.books.push({ name:'aaa', author:'bbb' }); app.books.filter(function(item){ return item.name.match(/text/); });
注意1：通过索引直接设置项app.books[3]={...}，vue不能检测到，也不会触发视图更新。
两种方法解决
//Vue内置的set方法 Vue.set(app.books,3,{...}); //注意：如果webpack中使用组件化的方式，默认是没有导入Vue的，可以试用$set this.$set(app.books,3,{...}); app.books.splice(3,1,{...});
注意2：修改数组长度app.books.length=1，也是同样的问题
app.books.splice(1);
过滤和排序
不想改变元数组，想通过数组副本来做过滤和排序的显示时，可以使用计算属性返回过滤或排序后的数组。
<ul> <template v-for="book in filterBooks"> <li>... </ul> computed:{ fileterBooks: function() { return this.books.filter(function(book){ return book.name.match(/text/); }
computed: {
sortedBooks: function() {
return this.books.sort(function(a,b){
return a.name.length<b.name.length
}
方法与事件
<div id="app"> clicknum: {{counter}} <button @click="counter++">+1</button> </div> data: { counter: 0}
扩充一下：
<button @click="handleAdd()">+1</button> <button @click="handleAdd(10)">+10</button> data: {counter: 0}, methods: { handleAdd: function(count) { count= count || 1; this.counter+= count; }
vue提供了一个特殊变量$event，用于访问原生DOM事件
< a href="http://www.baidu.com/" @click="handleClick('禁止打开',$event)">打开链接</a> methods: { handleClick: function(message,event){ event.preventDefault(); window.alert(message); }
修饰符
.stop, .prevent, .capture, .self, .once
<!--阻止事件冒泡--> <a @click.stop="handle"></a> <!--提交事件不再重载页面--> <form @submit.prevent="handle"></form> <a @click.stop.prevent="handle"></a> <form @submit.prevent></form> <input @keyup.13="submit">
keyCode别名：.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right, .ctrl, .alt, .shift, .meta