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
扫描二维码关注公众号,回复:
6245913 查看本文章
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