Vue中常用的内置指令及自定义指令

内置指令

v-bind
【单向数据绑定】
【格式：v-bind:属性名=“data中定义的属性”】
【简写：:属性名=“data中定义的属性”】

<div id="root"><a href="http://www.baidu.com">跳转百度</a> // 普通字符串赋值<a v-bind:href="url">跳转到百度页面1</a> // 标准写法<a :href="url">跳转到百度页面2</a>  // 简写
</div>

new Vue({el: '#root',data: function () {return {url: 'http://www.baidu.com'}}
});

v-model
【双向数据绑定，一般用于表单元素上】
【格式：v-model:value=“data中定义的属性”】
【简写：v-model=“data中定义的属性”】

<div id="root"><input type="text" value="字符串"/>  普通字符串赋值（文本框中的默认值）<input type="text" v-model:value="username"/> // 标准写法<input type="text" v-model="username"/> // 简写
</div>

new Vue({el: '#root',data: function () {return {username: 'wuwu'}}
});

v-on
【绑定事件处理函数】
【格式：v-on:事件类型=“事件处理函数”】
【简写：@事件类型=“事件处理函数”】

<div id="root"><button onclick="show()">点击</button>   // 原生js绑定事件方式<button v-on:click="show">点击</button> // 标准写法，无参数可以不写()<button @click="show">点击</button> // 简写
</div>

new Vue({el: '#root',data: function () {return {count: 1}},methods: {show() {console.log(this.count);}}
});

v-if、v-else-if、v-else
【创建和删除一个元素】
【与js中的if、else if、else逻辑相同，三者搭配使用时，需要紧挨在一起，中间不能被其他元素分割】
【格式：v-if=“属性或表达式”、v-else-if=“属性或表达式”、v-else】
```
<div id="root"><p v-if="5 < 1">这是一段文字1</p>  // 不成立<p v-else-if="5 < 6">这是一段文字2</p> // 成立<p v-else>上方都不成立时，显示此节点</p> // 上方代码成立，此行不会被执行
</div>
```

v-show
【显示和隐藏一个元素】
【底层是通过display属性实现的，节点存在于页面中，只是被隐藏了】
【格式：v-show=“属性或表达式”】

<div id="root"><p v-show="true">这是一段文字</p> // 显示<p v-show="5 < 1">这是一段文字</p> // 隐藏<p v-show="isShow">这是一段文字</p> // 显示
</div>

new Vue({el: '#root',data: function () {return {isShow: true}}
});

v-for
【遍历数组、对象、字符串（比较少用）、次数（比较少用）】
【格式：v-for="(item, index) in arr; :key=“唯一值”】

<div id="root"><!-- 遍历数组 --><ul><li v-for="item in arrList" :key="item.id">{{item.id}}---{{item.name}}---{{item.age}}</li></ul><!-- 遍历对象 --><ol><li v-for="(value, key) in objs" :key="key">{{key}}---{{value}}</li></ol><!-- 遍历字符串 --><p><span v-for="(item, index) in str" :key="index">{{index}}---{{item}}</span></p><!-- 遍历次数 --><p><span v-for="(item, index) in 5" :key="index">{{index}}---{{item}}</span></p>
</div>

new Vue({el: "#root",data: function () {return {arrList: [{id: 1,name: 'wuwu',age: 18}, {id: 2,name: 'tt',age: 19}],objs: {name: 'wuwu',age: 18,study: 'vue'},str: 'hello World'}}
});

v-text
【在标签间渲染纯文本，替换掉标签中的所有内容，不解析标签】
v-html
【在标签间渲染html文本，替换掉标签中的所有内容，能够解析标签】
v-cloak
【vue实例加载完毕的一瞬间，会自动删掉v-cloak属性，可搭配CSS来使用】
【下例中，vue实例加载中，带有v-cloak属性的标签会先隐藏，防止将插值表达式当做字符串直接渲染到页面中，vue实例加载完毕，系统自动将v-cloak属性去掉，显示标签，交互效果更好一些】
```
[v-cloak] {display: none;
}
```
```
<div id="#root"><p v-cloak>{{name}}</p>
</div>
```

v-once
【只在初始时动态渲染，之后就视为静态内容了】

<div id="root"><p v-once>{{count}}</p> <!-- 只在页面初始化时，获取count的值渲染在页面上，之后count的值再变化时，该标签渲染的内容不被影响 --><p>{{count}}</p> <!-- 随着按钮被点击，count不断+1 --><button @click="count++"></button>
</div>

v-pre
【加上此指令，vue不解析标签中的内容，直接渲染标签，可以提高性能】

<div id="root"><p v-pre>该标签上的内容直接渲染到页面上，{{count}}</p><p>vue先将属性解析之后再渲染到页面上，{{count}}</p>
</div>

自定义指令

局部自定义指令
说明：下例中，模拟文本框绑定默认值，并获取焦点的功能，只能通过对象写法实现，因为如果使用函数写法，是在bind环节就设置element.focus();，此时文本框还没被渲染到页面上，导致初始时获取焦点效果不生效。使用对象写法，可以把element.focus()写在inserted钩子中，只有当节点被渲染到页面上时，才会执行获取焦点代码，这时才会有效果。

<div id="root"><!-- 模拟文本框绑定默认值，并获取焦点 --><input type="text" v-focus-bind="msg"><!-- 给指定文本添加#前缀 --><p v-prefix="msg"></p>
</div>

new Vue({el: '#root',data: function() {return {msg: 'hello world!!!'}},directives: {// 对象写法，具有三个钩子，能处理一些细节的问题'focus-bind': {bind(element, binding) { // 指令与节点绑定成功时element.value = binding.value;},inserted(element, binding) { // 绑定指令的这个节点被渲染到页面上时element.focus();},update(element, binding) {  // 指令所在的模板被重新解析时element.value = binding.value;}},// 函数写法，实际上是bind和update的结合体// 触发时机：1、指令与节点绑定成功时（bind）  2、指令所在的模板被重新解析时（update）'prefix'(element, binding) {element.innerText = '#' + binding.value;}}
});

效果

注意事项
① 指令中的this指向window，不指向vm
② 指令名字如果是多个单词，不能使用驼峰式命名法（vue不认），可以用中划线分割，且需要用单引号包裹起来（比如上例中的focus-bind）；单个单词不包裹也行（比如上例中的prefix）
③ 声明指令时，不用加v-前缀；使用指令时，需要加上v-前缀

全局自定义指令

// 将上例的focus-bind指令改为全局指令
Vue.directive('focus-bind', {bind(element, binding) { // 指令与节点绑定成功时element.value = binding.value;},inserted(element, binding) { // 绑定指令的这个节点被渲染到页面上时element.focus();},update(element, binding) {  // 指令所在的模板被重新解析时element.value = binding.value;}
});
// 将上例的prefix指令改为全局指令
Vue.directive('prefix', function(element, binding) {element.innerText = '#' + binding.value;
});
new Vue({el: '#root'
});