VUE学习之路（二）---全局API 之 Vue.directive

一。全局API：

APIA全局并不在构造器里，而是先声明全局变量或者直接再VUE上定义一些新功能，VUE内置了一些全局APII，比如Vue.directive。简单讲，就是在构造器外部用Vue提供给我们的API函数来定义新的功能。

二。Vue.directive

1.我们用自定义指定做一个小例子，让初始化的时候数字为绿色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue.directive 自定义指令</title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js" ></script>
</head>
<body>
    <h1>vue.directive 自定义指令</h1>
    <hr>
    <div id="app">
        <div v-jspang='color'>{{ num }}</div>
        <p><button @click="add">ADD</button></p>
    </div>

    <p>
        <button onclick ="unbind()">解绑</button>
    </p>

    <script>
        //添加下面这个函数是为了在控制台观察自定义指令的生命周期第五个阶段
        function unbind(){
            app.$destroyed();
        }
        Vue.directive("jspang",{
            bind:function(el,binding){//被绑定
                // console.log(el);
                // console.log(binding);
                // console.log(binding.name);
                // console.log(binding.expression);
                console.log('1 - bind');
                el.style="color:"+binding.value;
            },
            inserted:function(){//绑定到节点
                console.log('2 - inserted');
            },
            update:function(){//组件更新
                console.log('3 - update');
            },
            componentUpdated:function(){//组件更新完成
                console.log('4 - componentUpdated');
            },
            unbind:function(){//解除绑定
                console.log('5 - unbind');
            }
        });


        var app = new Vue({
            el : '#app',
            data : { 
                num : 10,
                color : 'red'
            },
            methods:{
                add:function(){
                    this.num++;
                }
            }
        })
    </script>
</body>
</html>

2.自定义指令中传递的三个参数：

el : 指令所绑定的元素，可以用来直接操作DOM

binding :一个对象，包含指令的很多信息。

vnode :Vue编译生成的虚拟节点

3.自定义函数的生命周期：

            bind:function(){//被绑定
                console.log('1 - bind');
            },
            inserted:function(){//绑定到节点
                console.log('2 - inserted');
            },
            update:function(){//组件更新
                console.log('3 - update');
            },
            componentUpdated:function(){//组件更新完成
                console.log('4 - componentUpdated');
            },
            unbind:function(){//解除绑定
                console.log('5 - unbind');
            }




在具体例子中，写
Vue.directive("jspang",{
            bind:function(){//被绑定
                console.log('1 - bind');
            },
            inserted:function(){//绑定到节点
                console.log('2 - inserted');
            },
            update:function(){//组件更新
                console.log('3 - update');
            },
            componentUpdated:function(){//组件更新完成
                console.log('4 - componentUpdated');
            },
            unbind:function(){//解除绑定
                console.log('5 - unbind');
            }
        });
可以就是某个特定的阶段函数，增加语句来实现特定的效果。就比如文章上面的绿色数字。

VUE学习之路（二）---全局API 之 Vue.directive

猜你喜欢