指令语法大全

v-bind — 单向绑定

​ 特点：数据只能从 data 流向页面

<div id="demo">
    //完整写法
    <a v-bind:href="school.url.toUpperCase()">{{school.name_first}}之旅</a>		
    //简写形式
    <a :href="school.url.toUpperCase()">{{school.name_hight}}之旅</a>		
</div>

<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '#demo，
        data:{
            school:{
                name_first: '安初',
                name_hight: '安高',
                url:"www.penrihor.com"
        	}
    	}
    })
</script>

v-bind一般用在标签属性中。这里的 v-bind: 使“ ”里的内容变为表达式

v-model — 双向绑定

​ 特点：数据不仅能从 data 流向页面，还能从页面流向 data

<div id="demo">
    <h2>数据绑定</h2>
    <span>单向绑定: </span><input type="text" :value="ipt"><br>
    <!-- 完整写法 -->
    <!-- <span>双向绑定: </span><input type="text" v-model:value="ipt"><br> -->
    <!-- 简写形式 -->
    <span>双向绑定: </span><input type="text" v-model="ipt"><br>    
</div>

<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '#demo',
        data: {
            ipt: 'penrihor'
        }
    });
</script>

双向绑定能双向同步data值和页面值，它只能用在表单元素上(如: input、select等)

v-text 指令

1. 作用：向其所在的节点中渲染纯文本内容。

2. 特点：v-text会替换节点中的所有内容，不解析标签。

3. 语法：<div v-text="str"> </div>

v-html 指令

1. 作用：向指定节点中渲染包含html结构的内容。
2. 特点：v-html会替换掉节点中所有的内容，v-html可以识别html结构。
3. 语法：div v-html="str" </div>
4. v-html的安全性问题

​ （1）在网站上动态渲染HTML是非常危险的，容易导致XSS攻击。

​ （2）只能在可信性的内容上使用v-html，不能用在用户提交的内容上。

v-cloak 指令

1. 原理：本质是一个特殊属性，Vue实例创建完毕并接管容器之前 隐藏插值语法{{xxx}}，Vue启动完毕会删掉 v-cloak 属性。
2. 作用：使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
3. 语法：

[v-cloak]{
    display: none;
}

<div v-cloak>{{Penrihor}}</div> <!-- v-cloak没有属性值 -->

v-once 指令

1. 原理：v-once所在节点在初次动态渲染后，便视为静态内容。
2. 作用：v-once节点渲染一次后，数据的改变就不会引起结构的更新，可用于优化性能。
3. 语法：<div v-once> v-once没有属性值 </div>

v-pre 指令

1. 原理：跳过v-pre所在节点的编译过程，即Vue不解析v-pre所在节点。
2. 作用：可利用v-pre跳过 没有指令语法、没有使用插值语法的节点，加快编译速度。
3. 语法：<div v-pre> Vue不编译此节点 </div>

自定义指令 directives

1. 定义语法：

​ （1）局部指令定义

<div v-directive-name="value"></div>

//简写写法	指令名后直接写函数
//参数element是节点对象，参数binding是自定义指令对象（包含了绑定的数值value）
new Vue({ 
    directives: { 
        'directive-name'(element, binding){ 
            函数内容 
     	}
    } 
})

//完整写法	指令名后写多个函数的配置对象
new Vue({
    directives: {
        'directive-name': {
            bind(element,binding)){ 函数内容 },
            inserted(element,binding)){ 函数内容 },
    		update(element,binding)){ 函数内容 }
        }
    }
})

​ （2）全局指令定义

​ Vue.directive('指令名', (element,binding)=>{ 函数内容 }) 或

​ Vue.directive('指令名',{ bind(e,b){ ... }, inserter(e,b){ ... }, update(e,b){ ... } })

2. 配置对象的调用机制

​ （1）bind：指令与元素绑定时调用（在Vue的编译过程）

​ （2）inserted：指令所在的元素被插入到页面时调用（一开始渲染页面时）

​ （3）update：指令所在的模板结构被重新解析时调用（注意是整个模板变动时）

3. 细节注意

​ （1）指令定义时不加 v- ，但使用时要加 v-

​ （2）包含多个单词的指令名，要使用 directive-name 的命名方式，而不要用驼峰命名法

​ （3）自定义指令里的 this 指向 window