VUE基本操作==>全局API

最新推荐文章于 2021-09-01 10:57:45 发布

临窗，听雨声

最新推荐文章于 2021-09-01 10:57:45 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/yali_aini/article/details/88577325

vue 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Vue的全局API，包括Vue.directive用于自定义指令，Vue.extend用于扩展实例构造器，Vue.set进行安全的数据赋值，Vue的生命周期函数，以及vue template模板和组件的使用，包括全局注册、局部注册、属性绑定、父子组件交互和动态组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

Vue.directive 自定义指令
Vue.extend 扩展实例构造器
Vue.set赋值
Vue 的生命周期
vue template模板
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 赋值的区别，操作数组的时候，app.data 不会双向绑定修改，而 vue.set会，所以说 app.data 这样修改会有bug

语法：Vue.set([对象],[属性或者索引],修改之后的值);

例子如下:

        function add4(){
            console.log("执行了哦！");
            app.arr[1] = "修改了";
        }


        var app = new Vue({
            el:'#app',
            data:{
                count: 10,
                arr:[
                    "zhangzq",
                    "licm",
                    "zhangjy",
                    "zhangjq"
                ]
            }
        })

4.Vue 的生命周期

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。

例子，直接看代码，多看注释

    <h1>Vue 的生命周期</h1>
    <hr>
    <div id="app" >
        <h1>Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。</h1>
        <p>{{count}}</p>
        <button @click="add">click me</button>
    </div>
    <button onclick="app.$destroy()">销毁</button>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                count:10
            },
            methods:{
                add:function(){
                    this.count++;
                }
            },
            beforeCreate:function(){
                console.log('1-beforeCreate 初始化之后');
            },
            created:function(){
                console.log('2-created 创建完成');
            },
            beforeMount:function(){
                console.log('3-beforeMount 挂载之前');
            },
            mounted:function(){
                console.log('4-mounted 被创建');
            },
            beforeUpdate:function(){
                console.log('5-beforeUpdate 数据更新前');
            },
            updated:function(){
                console.log('6-updated 被更新后');
            },
            activated:function(){
                console.log('7-activated');
            },
            deactivated:function(){
                console.log('8-deactivated');
            },
            beforeDestroy:function(){
                console.log('9-beforeDestroy 销毁之前');
            },
            destroyed:function(){
                console.log('10-destroyed 销毁之后')
            }
        })
    </script>

5.vue template模板

vue template有四种写法，此处介绍三种

直接写在选项里的模板
写在template标签里的模板
写在script标签里的模板
xxx.vue

其实前面三个，我觉得都差不多，大同小异。

        <h3>一、直接写在选项里的模板</h3>
        <p>{{message}}</p>
        <div id="muban" ></div>

        <hr>
        <h3>二、写在template标签里的模板</h3>
        <template id="temp2" >
            <h1 style="color:red;" >temp2==>{{message}}</h1>
            <h1 style="color:red;" >temp2==>{{message}}</h1>
        </template>
        
        <hr>
        <h3>三、写在script标签里的模板</h3>
        <script type="x-template" id="temp3" >
            
                <ul class="buttons">
          
                        <li>
                            <a class="" href="/" title="博客首页">
                                <i class="iconfont icon-home"></i>
                                <span>{{message}}</span>
                            </a>
                        </li>
                        
                        <li>
                            <a class="" href="/archives/" title="文章归档">
                                <i class="iconfont icon-archive"></i>
                                <span>{{color}}</span>
                            </a>
                        </li>
                        
                    </ul>
        </script>

    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'你好'
            }
        })

        // 一、直接写在选项里的模板
        var muban = new Vue({
            el:'#muban',
            template:`
                <h1 style="color:red;" >VUE TEMPLATE模板代码演示</h1>
            `
        })

        // 二、写在template标签里的模板
        var temp2 = new Vue({
            el:'#temp2',
            data:{
                message:'你好'
            },
            template:'#temp2'
        })

        // 三、写在script标签里的模板
        var temp3 = new Vue({
            el:'#temp3',
            data:{
                message:'你好',
                color:"#0f0"
            },
            template:'#temp3'
        })

    </script>

6.vue component 组件

假如 html上有 zhangzq,licm 两个标签

A.component实现方式之全局注册

        Vue.component("zhangzq",{
            template:`
                <h1>{{message}}<==>Vue component 的第一种实现方式，Vue.component 全局注册</h1>
            `,
            data:function(){
                return {
                    message:"你好鸭"
                }
            }
        })

B.component实现方式之局部注册

        var app = new Vue({
            el:'#app',
            data:{
                message:'你好'
            },
            components:{
                "licm":{
                    template:`
                        <h1 style="color:red;" >{{message}}<==>Vue component 的第二种实现方式，components 局部注册</h1>
                    `,
                    data:function(){
                        return {
                            message:"VUE??"
                        }
                    }
                }
            }
        })

C.组件绑定属性

        var app = new Vue({
            el:'#app',
            data:{
                message:'你好',
                love:"张某"
            },
            components:{
                "licm":{
                    template:`
                        <h1 style="color:red;" >{{love}}<==>{{message}}<==>Vue component 的第二种实现方式，components 局部注册</h1>
                    `,
                    // 绑定属性
                    props:['love'],
                    data:function(){
                        return {
                            message:"VUE??"
                        }
                    }
                }
            }
        })

属性绑定也可以使用 v-bind 的方式绑定 data 里面的值

D.vue component-3 父子组件

先实例化父组件，然后再在子组件里面使用父组件，子引用父

    <h1>vue component-3 父子组件</h1>
    
    <hr>
    <div id="app" >
        <zhangzq></zhangzq>
        <licm love="张子强" ></licm>
        <licm :love="love"></licm>
        <padan></padan>
    </div>

    <script>
        
        // 先子后父
        var city = {
            template:`
                <p>panda from siChuang</p>
            `
        }

        Vue.component("zhangzq",{
            template:`
                <h1>{{message}}<==>Vue component 的第一种实现方式，Vue.component 全局注册</h1>
            `,
            data:function(){
                return {
                    message:"你好鸭"
                }
            }
        })

        var app = new Vue({
            el:'#app',
            data:{
                message:'你好',
                love:"张某"
            },
            components:{
                "licm":{
                    // 这里是因为 zhangzq 这个标签是全局注册的，所以不需要 写 components 属性
                    template:`
                        <div style="color:red;" >
                            <p>{{love}}<==>{{message}}<==>Vue component 的第二种实现方式，components 局部注册</p>
                            <zhangzq></zhangzq>
                        </div>
                    `,
                    // 绑定属性
                    props:['love'],
                    data:function(){
                        return {
                            message:"VUE??"
                        }
                    }
                },
                "padan":{
                    template:`
                        <div>
                            <h1>padan from china</h1>
                            <city></city>
                            </div>
                    `,
                    // 注册 子组件，然后在父组件里面才能够使用
                    components:{
                        "city":city
                    }
                }
            }
        })
    </script>

E.vue component-4 component标签

语法：<component is="componentA" ></component>

is 的值就是使用哪个组件。

例如代码：

    <h1>vue component-4 component标签</h1>
    
    <hr>
    <div id="app" >
        <component is="componentA" ></component>
        <component is="componentB" ></component>
        <component is="componentC" ></component>
        <component :is="who"></component>
        <button @click="changeCom" >changeCom</button>
    </div>

    <script>
        var componentAIS = {
            template:`
                <div style="color:red;" >ComponentA</div>
            `
        }
        var componentBIS = {
            template:`
                <div style="color:blue;" >ComponentB</div>
            `
        }
        var componentCIS = {
            template:`
                <div style="color:yellow;" >ComponentC</div>
            `
        }
        
        var app = new Vue({
            el:'#app',
            data:{
                who:"componentA",
                count:0
            },
            methods:{
                changeCom:function(){
                    this.count++
                    var flag = this.count%3;
                    if( flag==0 ){
                        this.who = "componentA"
                    }else if(flag==1){
                        this.who = "componentB"
                    }else{
                        this.who = "componentC"
                    }
                }
            },
            components:{
                "componentA":componentAIS,
                "componentB":componentBIS,
                "componentC":componentCIS
            }
        })
    </script>

例子地址：https://github.com/winterme/vue/tree/master/vue