内置指令和自定义指令汇总

内置指令

     

            v-bind  : 单向绑定解析表达式,可简写为冒号(:) 对就是这个冒号

            v-model : 双向绑定数据

            v-on    : 绑定事件,  简写为@

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

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

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

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

        v-text指令

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

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

        v-html指令

            支持结构的解析,其他和v-text相似

        v-clock指令

            1.v-clock没有值,Vue实例创建完毕后会删掉v-clock属性

            2.配合css使用可以解决网速慢页面展示不出来时的{{xxx}}问题

        v-once指令

            1.v-once所在的节点在初次动态渲染后,就被视为静态内容

            2.以后数据变化都不会引起v-once所在结构的更新,可以用于优化新能

        v-pre指令

            1.跳过其所在节点的编译过程

            2.可以利用它跳过,没有使用指令语法,或者没有使用插值语法的节点,可以加快编译

            !!!网页优化使用

自定义指令

        作用：可以自定义一些功能指令，丰富指令操作

        怎么使用：

 例子： 需求1: 定义一个v-big指令,和v-text功能类似,但会把数据放大十倍

            需求2: 定义一个v-fbind指令   和v-bind功能类似,但可以让绑定的input默认获得焦点

        1.定义指令： directives：{xxx}    

                （1）第一种形式 ： xxx（element，binding）{}

                （2）第二种形式 ：xxx：{ }

<script>
new Vue({
        el: '.box',
        data: {
            n: 1,
        },
        // 指令属性  局部指令 指令中的this时window
        directives: {
            // 不写返回值return
           
            big(element, binding) {
                // element时真实的DOM span  binding绑定这个DOM
                console.log(element, binding);
                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;
                    // element.focus();
                }
            }
        }
    })
</script>

 还有全局配置的形式： Vue.directive('名字', { 操作 })

        2.使用

        和内置的指令用法一样，不过定义的时候没有加v-    ，用的时候要v-xxx

    <div class="box">
        <h3>当前n的值{{n}}</h3>
        <h3>放大十倍后 <span v-big="n"></span></h3>
        <input type="text" v-fbind="n">

        <button @click="n++">点我n+1</button>
        <br>
    </div>

自定义指令总结

            一: 定义语法

                (1)局部指令

                    new Vue({                                                                   new Vue({

                        directives:{指令名:配置对象}           或者                          directives(){}

                    })                                                                                  })

                (2)全局指令        

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

            二: 配置对象中常用的三个回调函数

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

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

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

            三:备注

                    1.指令定义是不加v-,使用时要加v-

                    2.指令如果是多个单词,要使用kebab-case命名方式,不要用小驼峰命名