一、v-text 指令
?1. 作用： 向其所在的节点中渲染文本内容
?2. 与插值语法的区别： v-text 会替换掉节点中的内容，{{xx}} 则不会，意思就是用了 v-text 之后，再在标签中间写内容就没有意义了，? 因为会被替换掉 ，而且如果 v-text 中的内容里面写了标签，它也当字符，不支持结构的解析，所以这种方法少用，不灵活
<body>
<div id="root">
<div v-text="name">你好</div>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
name: '<span>123</span>'
}
})
</script>
</body>?上面即使我们在标签里写了 '你好'，但是页面显示的内容还是 <span>123</span>，不信的小伙伴可以复制代码去试试噢
二、v-html 指令?
?1. 作用：向指定节点中渲染包含 html 结构的内容
?2. 与插值语法的区别：
- ? ? ? ?v-html 会替换掉节点中所有的内容， {{x}} 则不会
- ? ? ? ?v-html 可以识别 html 结构
?3. 严重注意： v-html 有安全性问题！
- ? ? ? 在网站上动态渲染任意 HTML 是非常危险的，容易导致 XSS 攻击
- ? ? ? 一定要在可信的内容上使用 v-html，永远不要用在用户提交的内容上！
?把上面中的 v-text 改成 v-html 其他不变，最终的页面效果是 123 ，v-html 识别了 html 结构，解 析了 span 标签，这样很直观就能看出它俩的区别
三、v-cloak 指令（没有值）?
?1. 本质是一个特殊属性， Vue 实例创建完毕并接管容器后，会删掉 v-cloak属性
?2. 使用 css 配合 v-cloak 可以解决网速慢时页面展示出 {{xxx}}的问题
<style>
[v-cloak] { //属性选择器
display: none;
}
</style>
<body>
<h2 v-cloak>{{name}}</h2>
</body>?这段代码的意思就是在 Vue 实例创建完毕并接管容器之前，display：none 都是生效的，即页面不会出现 '{{name}}' 这种还未被 Vue 渲染的页面，当 Vue 接管后，自动删掉 v-cloak 属性，显示最终效果
四、v-once 指令(没有值)?
?1. v-once 所在节点在初次动态渲染后，就视为静态内容了
?2. 以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能
<body>
<div id="root">
<h2 v-once> 初始化的 n 的值是:{{n}} <h2>
<button @click="n++">点击一次 n+1</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
n: 1
}
})
</script>
</body>?如果该段代码中不加 v-once ，那么每点击一次按钮 n 都加 1，但是加了 v-once 后，不管你怎么点按钮，n 的值都不会再变了，因为它已经变成静态内容了
五、v-pre 指令(没有值)?
1. 作用：跳过其所在节点的编译过程
2. 可利用它跳过： 没有使用指令语法、没有使用插值语法的节点，会加快编译
<h2 v-pre>Vue 其实很简单 </h2>六、自定义指令_函数式?
语法：new Vue({? directives:{指令名:回调函数}? })?
其中自定义 big 函数何时会被调用？
1. 指令与元素成功绑定时（一上来）
2. 指令所在的模板被重新解析时
<body>
<div id="root">
<h2>{{name}}</h2>
<h2>当前的n值是: <span v-text="n"></span></h2>
<h2>放大10倍后的n值是: <span v-big="n"></span></h2>
<button @click="n++">点我n+1</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
name: '张三',
n: 1
},
directives:{
big(element,binding){
element.innerText = binding.value * 10
}
}
})
</script>
</body>像代码中，即使没有改变 n , 只是改变了 name 值， v-big 也会被调用一次，因为它所在的模板被重新解析了
自定义函数用 directives 创建，其中函数(element,binding){} ? 第一个为指令所在的标签元素，第二个为绑定的信息，其中有很多属性，比如 binding.value 就是存放值的
既然标签拿到了，就可以操作Dom元素，把值直接放到标签里就行
?
七、自定义指令_对象式?
语法：new Vue({? directives:{指令名:配置对象}? })?
那什么时候会用到对象式自定义指令呢？
例如，你想要在一开始就获取表单的焦点，那只写 fbind(element,binding){element.focus() } 是没有效果的，因为这个指令与元素成功绑定时，会执行一次，此时 input 表单还没在页面上显示，就已经调用了 input.focus 是没用的. 类似于当你动态的创建一个元素时，你还没把元素放到页面上就开始访问它的父元素了，这时候是访问不到的
所以，解决这个的办法就是用对象式创建自定义指令，对象会把每个阶段分的比较细，大致分为三类，如下：
directives:{
fbind:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}
}一般 bind()中的内容和 update()中的内容一致，它俩的合并就是函数式自定指令
注意：其中 bind()、inserted()、update() 名字是固定的不能自定义?
八、自定义指令总结?
如果自定义指令名字很长，不能用驼峰命名，要用 ‘-’ 连接，例如： v-big-number
那么在 Vue 中定义就要 'big-number'(element,binding){}?加引号书写?
注意：自定义属性中的 this 指向的都是 window
全局自定义指令对象式：Vue.directive(‘指令名’,{})
全局自定义指令函数式：Vue.directive('指令名',function(){})
全局定义的自定义指令 directive 后面没有 s 哟，不要写错啦！?
?结束~
