Vue——内置指令
1.基本指令
（1）v-cloak
v-cloak不需要表达式，他会在Vue实例结束编译时从绑定的HTML元素上移除。
经常和CSS的display:none搭配使用。
如果网速很慢，vue.js文件还没有加载完成，那么页面上就会显示{{message}}的变量名，这样不利于用户体验。
这是加上一个css的display：none就解决问题了。
在变量没有加载完成时页面会一直闪动，这是解决页面初始化的一个不错的解决方案。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app" v-cloak> {{ message }} </div> <script> var app = new Vue({ el: "#app", data: { message: '测试文本' } }) </script> </body> </html>
（2）v-once
v-once也是一个不需要表达式的指令，作用是定义它的元素或者组件只渲染一次，包括元素或者组件上的所有节点。
首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div v-once>{{ message }}</div> </div> <script> var app = new Vue({ el: "#app", data: { message: '测试文本001' } }) </script> </body> </html>
2.条件渲染指令
（1）v-if/v-else
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <p v-if="statu === 1">当statu为1时显示</p> <p v-else-if="statu === 2">当statu为2时显示</p> <p v-else>否则什么都不显示</p> </div> <script> var app = new Vue({ el: "#app", data: { statu: 1 } }) </script> </body> </html>
（2）v-show
v-show和v-if在功能上有些类似，
v-if会根据表达式适当的销毁或者重建元素，而v-show只是简单的CSS属性切换，无论是否显示都会被编译。
v-if适合条件不经常改变的场景，因为开销较大，而v-show适合频繁切换的场景。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <p v-show="status === 1">为1的时候显示该行</p> <!--<p style="display: none;">为1的时候显示该行</p>--> </div> <script> var app = new Vue({ el: '#app', data: { status: 2 } }) </script> </body> </html>
3.列表渲染
（1）基本用法
实例一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>体验vue</title> </head> <body> <div id="app"> <ul> <li v-for="book in books">{{book.name}}</li> </ul> </div> <script src="vue.min.js"></script> <script> new Vue ({ el: '#app', data: { books: [ { name: '《碧血剑》'}, { name: '《天龙八部》'}, { name: '《圆月弯刀》'}, { name: '《武动乾坤》'} ] } }) </script> </body> </html>
效果：
实例二：
v-for支持一个可选参数作为当前项的索引，类似于枚举的效果.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>体验vue</title> </head> <body> <div id="app"> <ul> <!--v-for支持一个可选参数作为当前项的索引，类似于枚举的效果--> <li v-for="(book,index) in books">{{ index }}-{{ book.name }}</li> <!--列表渲染还可以使用of来代替in作为分隔符--> <li v-for="(book,index) of books">{{ index }}-{{ book.name }}</li> </ul> </div> <script src="vue.min.js"></script> <script> new Vue ({ el: '#app', data: { books: [ { name: '《碧血剑》'}, { name: '《天龙八部》'}, { name: '《圆月弯刀》'}, { name: '《武动乾坤》'} ] } }) </script> </body> </html>
效果：
实例三：
v-for可以在内置标签template上将多个元素进行渲染.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <ul> <template v-for="book in books"> <li>书名： {{ book.name }}</li> <li>作者： {{ book.author }}</li> </template> </ul> </div> <script> var app = new Vue({ el: "#app", data: { books: [ { name: '《天龙八部》', author: '金庸' }, { name: '《圆月弯刀》', author: '古龙' }, { name: '《云海玉弓缘》', author: '梁羽生' } ] } }) </script> </body> </html>
效果：
实例四：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <span v-for="value in user">{{ value }}</span> </div> <!--对象的属性也是可以遍历的--> <script> var app = new Vue({ el: '#app', data: { user: { name: 'kebi', sex: 'boy', age: 26 } } }) </script> </body> </html>
效果：
实例五：
遍历对象属性时有两个可选参数，分别是键名和索引.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(value,key,index) in user">{{ index + 1 }}.{{ key }}:{{ value }}</li> </ul> </div> <!--遍历对象的时候还有可选参数key，index--> <script> var app = new Vue({ el: '#app', data: { user: { name: 'kebi', sex: 'boy', age: 26 } } }) </script> </body> </html>
效果：
（2）过滤与更新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <ul> <template v-for="book in books"> <li>书名： {{ book.name }}</li> <li>作者： {{ book.author }}</li> </template> </ul> </div> <!--v-for可以在内置标签template上将多个元素进行渲染--> <script> var app = new Vue({ el: "#app", data: { books: [ { name: '《天龙八部》', author: '金庸' }, { name: '《圆月弯刀》', author: '古龙' }, { name: '《云海玉弓缘》', author: '梁羽生' } ] } }); //添加过滤 // app.books = app.books.filter(function (item) { // return item.name.match(/龙/); // }) //Vue在检测到数据变化的时候，并不是重新渲染整个列表，而是最大化的复用DOM元素 //替换的数组中含有相同元素的项不会被重新渲染，因此可以打断用新的数据来替换旧的数据，不用太过于担心性能的问题 //如果你要添加一个新的项，下面有两种方法 //vue内置的set方法 Vue.set(app.books, 3, { name: '雪山飞狐', author: '金庸' }); app.books.splice(4,1,{ name: '七剑下天山', author: '梁羽生' }) </script> </body> </html>
（3）过滤与排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <ul> <template v-for="book in sortBooks"> <li>书名： {{ book.name }}</li> <li>作者： {{ book.author }}</li> </template> </ul> </div> <!--v-for可以在内置标签template上将多个元素进行渲染--> <script> var app = new Vue({ el: "#app", data: { books: [ { name: '《天龙八部》', author: '金庸' }, { name: '《圆月弯刀》', author: '古龙' }, { name: '《云海玉弓缘》', author: '梁羽生' } ] }, //如果你不想改变原数组，想通过过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的结果 computed:{ //过滤 // filterBooks:function () { // return this.books.filter(function (book) { // return book.name.match(/龙/) // }) // } // 按照书名长度排序 sortBooks: function () { return this.books.sort(function (a,b) { return a.name.length < b.name.length; }) } } }) </script> </body> </html>
4.方法与事件
（1）基本用法
可以在vue实例对象的methods选项中定义方法，然后就可以进行调用。
用方法只是为了让达到复用的效果。不使用方法其实也是可以达到相同的效果的。
下面就没有定义方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> 点击次数: {{ counts }} <button @click="counts++">点击加一</button> </div> <script> var app = new Vue({ el: "#app", data: { counts: 0 } }) </script> </body> </html>
如果定义方法我们可以这样写：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> 点击次数: {{ counts }} <button @click="handleAdd()">点击加一</button> <button @click="handleAdd(10)">点击加十</button> <!--如果handleAdd不添加()那么会出现[object MouseEvent]--> </div> <script> var app = new Vue({ el: "#app", data: { counts: 0 }, methods: { handleAdd: function (count) { count = count || 1; this.counts += count } } }) </script> </body> </html>
需要注意的是:
@click后面的方法名可以不跟括号。前提是不需要传入参数.
如果该方法有参数，默认会将原生事件对象event传入。
Vue提供了一个特殊变量$event，用于访问原生DOM事件.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <a href="http://www.baidu.com" @click="handleClick('禁止打开', $event)">打开链接</a> </div> <script> var app = new Vue({ el: "#app", methods: { handleClick: function (message,event) { event.preventDefault(); //取消事件的默认行为 window.alert(message); } } }) </script> </body> </html>
效果：
（2）修饰符
<!--上例中使用的event.preventDefault()也可以用Vue事件的修饰符来实现，在@绑定的事件后面加小圆点’.‘，再跟一个后缀来使用修饰符--> <!--阻止单机事件冒泡--> <a @click.stop="handle"></a> <!--提交事件不再重载页面--> <form @submit.prevent="handle"></form> <!--修饰符可以串联--> <a @click.stop.prevent="handle"></a> <!--只有修饰符--> <form @submit.prevent></form> <!--添加事件侦听器时使用事件捕获模式--> <div @click.capture="handle">...</div> <!--只当事件在该元素本身（而不是子元素）触发时触发回调--> <div @click.self="handle">...</div> <!--只触发一次，组件同样使用--> <div @click.once="handle">...</div> <!--在表单元素上监听键盘事件时，还可以使用案件修饰符--> <!--只有当keyCode等于13时才会调用vm.submit--> <input @keyCode.13 = 'submit'> <!--也可以自己配置具体键--> Vue.config.keyCode.f1 = 112 <!--Vue支持一下修饰符--> .stop .prevent .capture .self .once <!--Vue支持的快捷键--> .enter .tab .delete .esc .space .up .down .left .right
