vue2.0第四季—實(shí)例和內(nèi)置組件

第1節(jié) 實(shí)例入門-實(shí)例屬性

(一vue和jqueryjs一起使用)一，Vue和JQuery.js一起使用

下載并引入jquery.js


<script < type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>

總結(jié)body：

<body>
    <h1>example01 Methods Demo</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            mounted:function() {
                //在Vue中使用jQuery
                //只有在mounted和updated中才可以使用引入JQuery
                $("#app").html('我是JQuery！');
            },
            methods: {
                add:function(){
                    console.log('調(diào)用了構(gòu)造器內(nèi)部的add方法');
                }
            },
        })
        //構(gòu)造器外部調(diào)用內(nèi)部方法
        app.add();
    </script>
</body>

第2節(jié) 實(shí)例方法

$mount方法

$mount方法是我們用來掛載我們的擴(kuò)展的，先定義var japang，然后用$ mount的方法把jspang掛載到DOM上

destroy()卸載方法

用于卸載整個(gè)掛載

forceUpdate()更新方法

nextTick()數(shù)據(jù)修改方法

當(dāng)Vue構(gòu)造起里的data值被修改完成后會(huì)調(diào)用這個(gè)方法，相當(dāng)于一個(gè)鉤子函數(shù)，和構(gòu)造器里的updated生命周期很像。

總結(jié)代碼如下：

<body>
    <h1>example Methods Demo</h1>
    <hr>
    <div id="app">

    </div>
    <p><button onclick="destroy()">卸載</button></p>
    <p><button onclick="reload()">刷新</button></p>
    <p><button onclick="tick()">更改數(shù)據(jù)</button></p>

    <script type="text/javascript">
        var jspang = Vue.extend({
            template:`<p>{{ message }}</p>`,
            data:function(){
                return{
                    message:'Hello,I am ZR'
                }
            },
            //加生命周期
            mounted:function(){
                console.log('mounted被創(chuàng)建');
            },
            destroyed:function(){
                console.log('destroy 銷毀');
            },
            updated:function(){
                console.log('updated 更新之后');
            }
        })
        //掛載到app上
        var vm = new jspang().$mount('#app');
        //銷毀
        function destroy(){
            vm.$destroy();
        }
        //更新
         function reload(){
            vm.$forceUpdate();
         }
         //更改數(shù)據(jù)
         function tick(){
             //更改擴(kuò)展里的message內(nèi)容
             vm.message='update message info';
             //里面放回調(diào)函數(shù)
             vm.$nextTick(function(){
                 console.log('message更新完之后被我調(diào)用了');
             })
         }

    </script>
</body>

第3節(jié) 實(shí)例事件

實(shí)例事件就是在構(gòu)造器外部寫一個(gè)構(gòu)造器內(nèi)部的方法。這樣寫的好處就是可以通過這種寫法在構(gòu)造器外部調(diào)用構(gòu)造器內(nèi)部的數(shù)據(jù)。

1.$on 在構(gòu)造器外部添加事件

app.$on('reduce',function(){
    console.log('執(zhí)行了reduce()');
    this.num--;
});

$on接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是調(diào)用時(shí)的事件名稱，第二個(gè)參數(shù)是一個(gè)匿名方法。

如果按鈕在作用域外部，可以利用$emit來執(zhí)行。

//外部調(diào)用內(nèi)部事件
function reduce(){
    app.$emit('reduce');
}

$once執(zhí)行一次的事件

app.$once('reduceOnce',function(){
    console.log('只執(zhí)行一次的方法');
    this.num--;

});

$off關(guān)閉事件

//關(guān)閉事件
function off(){
   app.$off('reduce');
}

總結(jié)代碼：

<body>
    <h1>example03</h1>
    <hr>
    <div id="app">
        {{ num }}
        <!-- @click = v-on:click -->
        <p><button @click="add">add</button></p>
    </div>
    <!-- 外部調(diào)用需要加括號(hào) -->
    <p><button onclick="reduce()">reduce</button></p>
    <p><button onclick="reduceOnce()">reduceOnce</button></p>
    <p><button onclick="off()">off</button></p>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                num:1
            },
            methods: {
                add:function(){
                    this.num++;
                }
            }
        });

        app.$on("reduce",function(){
            console.log("執(zhí)行了reduce方法");
            this.num--;
        });

        app.$once('reduceOnce',function(){
            console.log("reduce只調(diào)用一次");
            this.num--;
        })

        function reduce(){
            app.$emit('reduce');
        }
        function reduceOnce(){
            app.$emit('reduceOnce');
        }

        //關(guān)閉事件
        function off() { 
            app.$off('reduce');
         }
    </script>
</body>

第4節(jié) 內(nèi)置組件slot講解

slot是標(biāo)簽的內(nèi)容擴(kuò)展，也就是說你用slot就可以在自定義組件時(shí)傳遞給組件內(nèi)容，組件接受內(nèi)容并輸出。先定義一個(gè)jspang組件，用這個(gè)組件來展示博主的一些信息

slot的使用需要兩步：

1、在HTML的組件中用slot屬性傳遞值。

<jspang>
    <span slot="bolgUrl">{{jspangData.bolgUrl}}</span>    
    <span slot="netName">{{jspangData.netName}}</span>    
    <span slot="skill">{{jspangData.skill}}</span>    
</jspang>

2、在組件模板中用標(biāo)簽接收值。

<template id="tmp">
    <div>
        <p>博客地址：<slot name="bolgUrl"></slot></p>
        <p>網(wǎng)名：<slot name="netName"></slot></p>
        <p>技術(shù)類型：<slot name="skill"></slot></p>

    </div>
</template>