Vue2指令

常用指令

v-bind: 单向绑定解析表达式，可简写为 :xxxx
v-model: 双向数据绑定
v-for: 遍历数组/对象/字符串
v-on: 绑定事件监听，可简写为@
v-if: 条件渲染（动态控制节点是否存在）
v-else: 条件渲染（动态控制节点是否存在）
v-show: 条件渲染（动态控制节点是否展示）
v-text: 向其所在的节点中渲染文本内容，与插值语法的区别：v-text会替换节点中的内容，{{xxx}}则不会。
v-clock防止加载慢的时候，页面显示{{}}
v-html:
(1)作用：向指定节点渲染包含html结构的内容。
(2)与插值语法的区别：
a.v-html会替代掉节点中所有的内容，{{xxx}}则不会。
b.v-html可以识别html结构
(3)严重注意：v-html有安全性问题！！！
a.在网站上主动渲染任意HTML是危险的，容易导致XSS攻击。
b.一定要在可以的内容上使用v-html,永不要在用户提交的内容上！

cookie原理示意图

v-clock

<style>
      [v-clock]{
        display: none;
      }
</style>

   <div id="root">
      <div v-clock>{{str}}</div>
   </div>

<script src="vue.js"></script>
<script>
	const vm = new Vue({
		 el: "#root",
		 data: {
		   	str:123
		 },
	});
</script>

v-once

所在节点在初次动态渲染后，就视为静态内容了。 以后数据的变化不会引起v-once所在结构的更新，可以用户优化性能。

<div id="root">
    <h3 v-once>{{num}}</h3>
    <h3>{{num}}</h3>
    <button @click="num++">点击</button>
 </div>
 <script>
   const vm = new Vue({
     el: "#root",
     data: {
       num:0
     },
   });
 </script>

v-pre

(1)跳过其所在节点的编译过程。
(2)可利用它跳过：没有使用指令语法、没有使用插值语法的节点、会加快编译。

<div id="root">
   <h3 v-pre>{{num}}</h3>
</div>
<script>
  const vm = new Vue({
    el: "#root",
    data: {
      num:0
    },
  });
</script>

效果：

自定义指令

(1)什么时候进行调用：指令与元素成功绑定时（一上来）。
(2)指令所在的模板被重新解析时。

<div id="root">
     <h3>{{name}}</h3>
     <h3>{{num}}</h3>
     <h3 v-big="num">{{num}}</h3> 
 </div> 
<script>   
 const vm = new Vue({
  	el: "#root",
    data: {
      num: 1,
      name:"test"
    },
    directives: {
      big(el, binding) {
        console.log("执行了");
        el.innerHTML = binding.value * 10;
      },
    },   
 }); 
</script> 

(3)自定义指令存在不同钩子函数，指令相关中的this指向window。

<div id="root">  
	<h3>{{name}}</h3>   
	<h3>{{num}}</h3>  
	<h3 v-big="num">{{num}}</h3> 
</div>
 <script>   
 const vm = new Vue({
    el: "#root",
    data: {
      num: 1,
      name: "test",
    },
    directives: {
      big: {
        bind() {
          console.log("bind");
        },//指令与元素成功绑定时（一上来）
        inserted() {
          console.log("inserted");
        },//指令所在元素被插入页面时
        update() {
          console.log("update");
        },//指令所在模板重新解析时
      },
    },  
   }); 
    </script>

（4）局部指令：new Vue({directives:{指令名：配置对象}}) 或 new Vue({directives{指令名：回调函数}})
（5）全局指令：Vue.directive(指令名称，配置对象)或 new Vue({directives{指令名：回调函数}})
（6）配置对象中常用的3个回调：
 （a）bind:指令与元素成功绑定时调用。
 （b）inserted:指令所在元素被插入页面时调用。
 （c）update:指令所在模板结构被重新解析时调用。
备注：指令定义时不加v-,但使用时要加v-
指令名如果多个单词，要使用kebab-case命名方式，不要用camelCase命名。