Vue指令

我们学过的指令:

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

        v-model ：双向数据绑定

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

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

        v- if   ：条件渲染(动态控制节点是否存存在)

        v-else  ：条件渲染(动态控制节点是否存存在)

        v- show ：条件渲染(动态控制节点是否展示)

v-text指令:

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

        2.与插值语法的区别: v-text会替换掉节点中的内容，{{xx}}则不会。

v-html指令:

        1.作用:向指定节点中渲染包含html结构的内容。

        2.与插值语法的区别:

            (1) .v-html会替换掉节点中所有的内容，{{xx}}则不会。

            (2).v-html可以识别html结构

        3.严重注意: v-html有安全性问题! ! ! !

            (1).在网站上动态渲染任意HTML是非常危险的。容易导致XSS攻击。

            (2).定要在可信的内容上使用v-html,永不要用在用户提交的内容上!

v-cloak指令(没有值) :

        1.本质是一个特殊属性， Vue实例创建完毕并接管容器居会删掉v- cloak属性。

        2.使用css配合v-cloak可以解决网速慢时页面展示出{{xx}}的问题。

v-once指令:(与v-cloak一样 没有值)

        1.v-once所在节点在初次动态渲染后。

        就视为静态内容了

        2.以后数据的改变不会引起V- once所在结构的更新，可以用于优化性能。

v-pre指令:

        1.跳过其所在翼点的编嘴让程。

        2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令

自定义指令总结:

        一、定义语法:

        (1) .局部指令:

            new Vue({                                                   new Vue({

                directives:{指令名:配置对象}        或           directives{指令名：回调函数}

            })                                                                 })

        (2).全局指令:

            Vue.directive(指令名,配置对象)  或  Vue.directive(指令名，回调两数)

        二、配置对象中常用的3个回调:

            (1).bind:指令与元索成功绑定时调用。

            (2).inserted:指令所在元素被插入页面时调用。

            (3).update:指令所在模板结构被重新解析时调用。

        三、备注:

            1.指令定义时不加V-，但使用时要加v-:

            2.指令名如果是多个单词，要使用kebab-case（例如user-name）命名方式，不要用camelCase（驼峰）命名。

<div id="root">
        <h2>当前的n值是:<span v-text="n"></span></h2>
        <h2>放大十倍后的n值是:<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>

        <hr>

        <input type="text" v-fbind:value="n">
    </div>

    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;
        Vue.directive('fbind',{
            // 指令与元素成功绑定时(一上来)
            bind(element,binding){
                element.value = binding.value
            },
            // 指令所在元素被插入页面时
            inserted(element,binding){
                element.focus();
            },
            // 指令所在模板被重新解析时
            update(element,binding){
                element.value = binding.value
            }
        })

        var vm = new Vue({
            el:"#root",
            data:{
                n:1,
            },
            // 这些都是局部指令
            directives:{
                //big函数何时会被调用？
                /* 
                1.指令与元素成功绑定时(一上来)
                2.指令所在模板被重新解析时
                 */
                //第一个形参：指令所在元素
                //第二个形参：本次绑定的信息
                big:function(element,binding){
                    console.log('big',this);//注意此处的this是window
                    element.innerText = binding.value * 10;
                },
                /* fbind:{
                    // 指令与元素成功绑定时(一上来)
                    bind(element,binding){
                        element.value = binding.value
                    },
                    // 指令所在元素被插入页面时
                    inserted(element,binding){
                        element.focus();
                    },
                    // 指令所在模板被重新解析时
                    update(element,binding){
                        element.value = binding.value
                    }

                } */
            }
        })
    </script>