Vue中的指令

v-xxx指令汇总

之前学过的指定：

v-bind ：单向绑定解析表达式，可简写为:xxx

v-model ：双向数据绑定

v-for ：遍历数组、对象、字符串等

v-on ：绑定事件监听，可简写为@

v-if ：条件渲染（动态控制结点是否存在）

v-else ：条件渲染（动态控制结点是否存在）

v-show ：条件渲染（动态控制结点是否展示）

v-text 指令：向其所在的结点中渲染文本内容，与插值值的区别是，v-text会替换掉结点中的内容

v-html指令 :向其所在的结点中渲染文本内容，可以识别html语法，注：v-html存在安全性问题，在网站上动态渲染任意html是有危险的，容易导致xss攻击，尽量不要在用户的输入框使用v-html。

v-cloak指令（没有值）：本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性，配合cssv-cloak可以解决网速慢时页面展示出{{xxx}}的问题

v-once指令：v-once所在的结点在初次动态渲染后，就视为静态内容了。以后数据的改变不会引起v-once所在的结构更新。

v-pre指令：跳过器所在结店的编译，可利用他跳过没有使用指令语法、没有使用差值语法的街第三，vue不会解析他，直接使用到页面，加快编译

v-text

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue-->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

</head>

<div id="root">
插值语法:<div>{{name}}</div>
v-text指令:<div v-text="name"></div>
v-text指令:<div v-text="name">abc</div>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name:'hello'
        }
    });
    console.log(vm)

</script>

v-html

<div id="root">
v-text:<p v-text="name"></p>
v-text:<p v-text="htmlName"></p>
v-html:<p v-html="htmlName">你好</p>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name:'世界杯',
            htmlName:'<h2>世界杯2</h2>'
        }

    });
</script>

v-cloak

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue-->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

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

<div id="root">
<div v-cloak>{{name}}</div>
</div>

v-once


<div id="root">
<div v-once>初始的n值为：{{n}}</div>
<div>之后的n值为：{{n}}</div>
    <button @click="n++">n++</button>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            n:10,
        },
        methods: {}

    });
    console.log(vm)

</script>

v-pre


<div id="root">
<div>{{cool}}</div>
<div v-pre>{{cool}}</div>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            cool:'天气只有十来度'
        },

    });

</script>

自定义指令

函数式

定义一个v-big指令，和v-text功能类似，但会吧绑定的数值放大10倍

</head>

<div id="root">
    <div v-text="n" ></div>
    <div v-big="n"></div>
    <button @click="n++">n++</button>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            n:1,
        },
        directives:{
            big(element,binding) {
                element.innerText=binding.value*100
            }
        }
    });
    console.log(vm)

</script>

对象式

需求：定义个v-fousbind指令，和v-bind功能类式，但可以让其所绑定的inout元素默认获取焦点


<div id="root">
    <div>n的值为:{{n}}</div>
<input type="text" v-fousbind="n" value="n"></input>
<button @click="n++">n++按钮</button>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            n:1
        },
        directives:{
            fousbind:{
                //指令与元素成功绑定时(一上来)
                bind(element,binding){
                    element.value=binding.value
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus()
                },
                //指令所在的模版被重新解析时
                update(element,binding){
                    element.value=binding.value
                    element.focus()
                }
            }
        }

    });
    console.log(vm)

</script>