Vue指令
指令（directives） 是Vue中最常用的功能，以带有v-前缀的特殊属性形式呈现，主要负责当表达式的值改变时，将其产生的连带影响响应式地作用于DOM
指令又分内置指令和自定义指令
1.内置指令
1.1 v-bind
v-bind：响应并更新DOM特性
主要用法：绑定属性，动态更新HTML元素上的属性
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> v-bind demo <a v-bind:href="url">点击</a> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ url:'https://juejin.cn/user/3985051634905256' } }); </script> </body> </html>
1.2 v-model
v-model：数据双向绑定，用于表单输入
主要用法：用在input、select、text、checkbox、radio等表单控件或者组件上创建双向绑定；它会根据控件的类型自动选取正确的方法来更新元素，主要负责监听用户的输入时间以更新数据，并处理一些极端的例子
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <input v-model="message" placeholder="edit"> <p>Message is :{{message}}</p> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ message:'v-model demo' } }); </script> </body> </html> 复制代码
网页中修改文本框中的内容，相应的消息也会改变
1.3 v-for
v-for：循环指令
主要用法：基于源数据多次渲染元素或者模块
例子
如果我们仅仅只用v-for写个例子就有点过于简单了，v-for的使用例如下面这样
<li v-for="{item,index} in todos"></li>
但是我想将前面的指令融合进来，我们可以选择展示哪个循环对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-for demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <ol> <li v-for='value in selected'> {{value}} </li> </ol> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ selected:'', options: [ { text: 'stu', value: ['a','b','c'] }, { text: 'num', value: [1,2,3] }, { text: 'json', value: {a:'aaa',b:'bbb',c:'ccc'} } ] } }) </script> </body> </html> 复制代码
1.4 v-on
v-on：用于监听DOM事件
主要用法：绑定事件监听器，事件类型由参数指定，表达式可以是一个方法的名称或一个内联语句，如果没有修饰符也可以省略。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <input type="button" value="点击1" onclick="alert('点击1')"> <input type="button" value="点击2" v-on:click="show()"> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{}, methods:{ show:function () { alert('点击2') } } }) </script> </body> </html> 复制代码
1.5 v-html
v-html：更新元素的innerHTML
因为安全问题，所以尽量避免使用v-html在网页动态渲染不安全的HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-html demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app" v-html="inner"> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ inner:'<h2>inner</h2>' } }) </script> </body> </html>
1.5 v-text
v-text：更新元素的textContent
主要用法：更新元素的textContent，v-text与{{}}两种写法可以互相替代，主要看需要的情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-text demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app" v-text="'现在是'+year+'年'+month+'月'"> <!-- 也可以去掉v-text写成:现在是{{year}}年{{month}}月--> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ year:new Date().getFullYear(), month:new Date().getMonth()+1 } }) </script> </body> </html>
1.6 v-cloak
v-cloak：不需要表达式，这个指令保持在元素上，直到关联实例结束编译
主要用法：当cloak和css规则一起用时，这个指令可以隐藏未编译的标签直到实例准备完毕
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-cloak demo</title> <style type="text/css"> [v-cloak]{ display:none; } </style> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <span>{{111}}</span> <span v-cloak>{{message}}</span> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ message:'hello' } }) </script> </body> </html>
1.7 v-pre
v-pre：不需要表达式，用于跳过元素及子元素的编译过程
主要用法：可以用来显示原始标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-pre demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <span v-pre>{{message}}</span> <span>{{message}}</span> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ message:'hello' } }) </script> </body> </html>
