- A+
回首
在 零基础入门Vue之梦开始的地方——插值语法 我记录了v-bind、v-on、v-model的学习
在 零基础入门Vue之To be or not to be——条件渲染 我记录了v-if、v-else-if、v-else、v-show的学习
在 零基础入门Vue之影分身之术——列表渲染&渲染原理浅析 我记录了v-for的学习
为了推进我的Vue的学习，本篇将一次性介绍其他常用指令，并且记录如何 自定义指令
其他常用指令
在Vue中，除了已学过的八个指令之外，还有另外五个比较常用的指令
v-text 文本绑定指令
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
假设有如下数据：
new Vue({ el:"#root", data(){ return { msg:"Hello world" } } }) 那么html除了使用插值语法来显示msg内容之外，还可以这样子写：
<div id="root"> <span v-text="msg"></span> </div>
v-html 富文本绑定指令
更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代
如果是v-text，仅仅只会当作文本解析，但如果我掏出了v-html，那么我所写的内容将会作为html来解析
new Vue({ el:"#root", data(){ return { msg:"<h1>Hello worldM</h1>" } } }) 此时，使用v-html会自动解析<h1>这个标签
<div id="root"> <span v-html="msg"></span> </div> 警告：为了预防xss的攻击，千万不要在输入类元素或者具有提交类元素上使用v-html，请在可信任的元素上使用v-html
v-pre 阻止渲染指令
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
假设dom节点中，有些元素不需要渲染的，即可给这个节点打上v-pre指令，用法如下：
<div id="root"> <span v-pre>这样子写：{{data里面的属性}} 标识Vue的插值语法</span> </div> span标签里面的内容不会被Vue进行解析，这个指令可以提高渲染效率
v-cloak 渲染前标识指令
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
当给标签打上v-cloak时，未被解析的标签，会存在这个属性，当标签被解析时，这个属性消失，因此可以配合css这么用：
[v-cloak] { display: none; } <div id="root"> <span v-html="msg" v-cloak></span> </div> 当页面未被解析时，span标签没被显示，只有当页面被解析完成时，span标签才会出现
此指令可以语法网络卡顿时，未被解析的内容率先显示到页面上
v-once 指令
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
这个指令，使得节点只被解析一次，后续的数据修改，此指令都不会有任何变化
<div id="root"> <span v-text="msg" v-once></span> </div>
Vue 自定义指令
在创建Vue配置项中，directives配置项，允许使用的人注册自定义指令
其中自定义指令可分为：
- 全局指令
- 局部指令
局部指令
new Vue({ el:"#root", directives:{ orderName:{ bind(el,binding,vnode,oldVnode){}, //指令第一次绑定到元素时调用 inserted(el,binding,vnode,oldVnode){}, //绑定元素插入父节点调用 update(el,binding,vnode,oldVnode){}, //当前模板更新前调用（可能不是当前节点的更新） componentUpdated(el,binding,vnode,oldVnode){}, //当前模板更新后调用（可能不是当前节点的更新） unbind(el,binding,vnode,oldVnode){} //指令解绑时调用 }, } }); <div id="root"> <!-- 注意虽然js里采用了驼峰命名，但标签使用时请用-连接每个单词 --> <span v-order-name="1+1">hello</span> </div> 参数详解 如下（详情请查看官网）：
- el：当前绑定节点
- binding：当前指令的绑定信息
- vnode：当前虚拟节点
- oldVnode：上一个虚拟节点
举个例子：假设我想创建一个v-big，指令使得绑定标签的文本放大到45px
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./vue.js"></script> <title>Document</title> </head> <body> <div id="root"> <!-- 注意虽然js里采用了驼峰命名，但标签使用时请用-连接每个单词 --> <span v-order-name>hello</span> </div> </body> <script> new Vue({ el:"#root", directives:{ orderName:{ bind(el,binding,vnode,oldVnode){ el.style.fontSize = '45px'; } }, } }); </script> </html>
改进：如果我希望，这个大小由我自己定义，而不是写死
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./vue.js"></script> <title>Document</title> </head> <body> <div id="root"> <!-- 注意虽然js里采用了驼峰命名，但标签使用时请用-连接每个单词 --> <span v-order-name="'45px'">hello</span> </div> </body> <script> new Vue({ el:"#root", directives:{ orderName:{ bind(el,binding,vnode,oldVnode){ el.style.fontSize = binding.value; } }, } }); </script> </html> 更多的请参考官方例子：简介
全局指令
在Vue上一小节时，directives配置项配置出来的节点只允许当前Vue实例使用，当涉及到一个自定义指令给多个Vue实例/组件去使用，就该引入全局指令了
在Vue对象上有一个静态方法：directive
允许用户设置全局指令，并且能在多个实例中通用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./vue.js"></script> <title>Document</title> </head> <body> <div id="root1"> <!-- 注意虽然js里采用了驼峰命名，但标签使用时请用-连接每个单词 --> <span v-order-name="'45px'">hello</span> </div> <div id="root2"> <!-- 注意虽然js里采用了驼峰命名，但标签使用时请用-连接每个单词 --> <span v-order-name="'78px'">hello</span> </div> </body> <script> Vue.directive("orderName",{ bind(el,binding,vnode,oldVnode){ el.style.fontSize = binding.value; } }); new Vue({ el:"#root1", }); new Vue({ el:"#root2", }); </script> </html> 其配置项与局部指令雷同，再次不过多赘述
指令简写形式
如果你不关注自定义的指令执行时机的话，你可以直接写成如下形式：
new Vue({ el:"#root", directives:{ orderName(){}, } }); 此时，执行实际，与binding一样
The End
本篇完~~~
