VUE基本操作==>全局API

全文从五个方面介绍 vue 的全局 api

1. Vue.directive 自定义指令
2. Vue.extend 扩展实例构造器

3. Vue.set赋值

4. Vue 的生命周期

5. vue template模板

6. vue component 组件

 

1.Vue.directive 自定义指令

vue自定义指令，就像 <p v-zzq="" ></p>这样，在任意一个标签上添加自己的属性，然后进行一些操作。

示例：我需要在 点击按钮的时候 进行数字的自增，并且改变数字的颜色。这里我将 颜色放入自定义属性 v-zzq里面

代码如下：

    <h1>Vue.directive 自定义指令</h1>
    <hr>
    <div id="app" >
        <p v-zzq="color" v-text="num" ></p>
        <button @click="add" >ADD</button>
    </div>

    <script>

        // 自定义 指令
        Vue.directive('zzq',{
            // el: 指令所绑定的元素，可以用来直接操作DOM。
            // binding: 一个对象，包含指令的很多信息。
            // vnode: Vue编译生成的虚拟节点。
            bind:function(el,binding,vnode){//被绑定
                //el.style = "color:" + binding.value;
                console.log('1 - bind');
            },
            inserted:function(){//绑定到节点
                console.log('2 - inserted');
            },
            update:function(el,binding,vnode){//组件更新
                el.style = "color:" + binding.value;
                console.log('3 - update');
            },
            componentUpdated:function(){//组件更新完成
                console.log('4 - componentUpdated');
            },
            unbind:function(){//解绑
                console.log('1 - bind');
            }
        })

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

2.Vue.extend 扩展实例构造器

Vue.extend 扩展实例构造器，类似自定义标签

使用步骤：

实例化对象，挂载对象

代码如下：

    <h1>Vue.extend 扩展实例构造器</h1>
    <hr>
    <div id="app" >
        <h1>Vue.extend 扩展实例构造器</h1>
        <div id="author" ></div>
        <author></author>
    </div>

    <script>
        // 实例化对象
        var author = Vue.extend({
            template:"<p><a :href='url' target='_blank' >authorName</a></p>",
            data:function(){
                return {
                    url:"http://chenparty.com",
                    authorName:"zhangzq"
                }
            }
        });

        // 挂载扩展实例构造器
        new author().$mount('author');
        new author().$mount('#author');

    </script>

3.Vue.set赋值

Vue.set 和 app.data 赋值的区别，