全局API介紹

全局API并不在構(gòu)造器里，而是先聲明全局變量或者直接在Vue上定義一些新功能，Vue內(nèi)置了一些全局API,說的簡單些就是，在構(gòu)造器外部用Vue提供給我們的API函數(shù)來定義新的功能。

Vue.directive 自定義指令

<div id="app">
        <div v-guosh="color">{{message}}</div>
        <p><button @click="add">ADD</button></p>
        <p><button onclick="unbind()">解綁</button></p>
    </div>
    <script type="text/javascript">
        function unbind(){
            app.$destroy(); //解除綁定
        }
        Vue.directive("guosh",{
            //el指令所綁定的元素，可以用來直接操作 DOM
            //binding 一個(gè)對象 
            bind:function(el,binding){//被綁定
                console.log(binding);
                console.log('1 - bind');
                el.style="color:"+binding.value;
            },
            inserted:function(){//綁定到節(jié)點(diǎn)
                console.log('2 - inserted');
            },
            update:function(){//組件更新
                console.log('3 - update');
            },
            componentUpdated:function(){//組件更新完成
                console.log('4 - componentUpdated');
            },
            unbind:function(){//解綁
                console.log('5 - bind');
            }

        });
        
        var app =  new Vue({
            el:'#app',
            data:{
                message:1,
                color:'green'
            },
            methods: {
                add:function(){
                    this.message++;
                }
            }
        })
    
    </script>

鉤子函數(shù)

• bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。
• inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。
• update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
• unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

鉤子函數(shù)參數(shù)

• el：指令所綁定的元素，可以用來直接操作 DOM 。
• binding：一個(gè)對象，包含以下屬性：
  • name：指令名，不包括 v- 前綴 例如：guosh。
  • value：指令的綁定值，例如：v-guosh="color" 中，綁定值為 green。
  • oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
  • expression：字符串形式的指令表達(dá)式。例如 v-guosh="color" 中，表達(dá)式為 "color"。
  • arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
  • modifiers：一個(gè)包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
• vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。移步 VNode API 來了解更多詳情。
• oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

Vue.extend構(gòu)造器的延伸

Vue.extend 返回的是一個(gè)“擴(kuò)展實(shí)例構(gòu)造器”,也就是預(yù)設(shè)了部分選項(xiàng)的Vue實(shí)例構(gòu)造器。經(jīng)常服務(wù)于Vue.component用來生成組件，可以簡單理解為當(dāng)在模板中遇到該組件名稱作為標(biāo)簽的自定義元素時(shí)，會自動調(diào)用“擴(kuò)展實(shí)例構(gòu)造器”來生產(chǎn)組件實(shí)例，并掛載到自定義元素上。

 <div id="author"></div>
    <script type="text/javascript">
        var authorURL = Vue.extend({
            template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
            data:function(){
                return{
                    authorName:'guosh',
                    authorUrl:'http://guoshaohua.cn'
                }
            }
        });
        //創(chuàng)建 authorUR 實(shí)例，并掛載到一個(gè)元素上
        new authorURL().$mount("#author");
    </script>

Vue.set全局操作

Vue.set 的作用就是在構(gòu)造器外部操作構(gòu)造器內(nèi)部的數(shù)據(jù)、屬性或者方法。比如在vue構(gòu)造器內(nèi)部定義了一個(gè)count為1的數(shù)據(jù)，我們在構(gòu)造器外部定義了一個(gè)方法，要每次點(diǎn)擊按鈕給值加1.就需要用到Vue.set。

    <div id="app">
        {{count}}
        <ul>
            <li v-for="item in arr">
                {{item}}
            </li>
        </ul>
    </div>
    <button onclick="add();">add</button>
    <script type="text/javascript">
        function add(){
            Vue.set(app,'count',2);
            //把a(bǔ)rr下標(biāo)1的值改成dddd
            Vue.set(app.arr,1,'dddd');
        }
        var outData={
            count:1,
            arr:['aaa','bbb','ccc']
        }
        
        var app = new Vue({
            el:'#app',
            //引用外部數(shù)據(jù)
            data:outData
        })
    </script>

為什么要有Vue.set的存在?

由于Javascript的限制，Vue不能自動檢測以下變動的數(shù)組。

• 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，vue不會為我們自動更新。
• 當(dāng)你修改數(shù)組的長度時(shí)，vue不會為我們自動更新。
  例如：

<div id="app">
        <ul>
            <li v-for=" aa in arr">{{aa}}</li>
        </ul>
       
    </div>
    <button onclick="add()">外部添加</button>
 
    <script type="text/javascript">
     
        function add(){
            console.log("我已經(jīng)執(zhí)行了");
           app.arr[1]='ddd';
           //Vue.set(app.arr,1,'ddd');
        }
        var outData={
            arr:['aaa','bbb','ccc']
        };
        var app=new Vue({
            el:'#app',
            data:outData
        })
    </script>

這時(shí)我們的界面是不會自動跟新數(shù)組的，我們需要用Vue.set(app.arr,1,’ddd’)來設(shè)置改變，vue才會給我們自動更新，這就是Vue.set存在的意義。

Vue的生命周期(鉤子函數(shù))

Vue一共有10個(gè)生命周期函數(shù)，我們可以利用這些函數(shù)在vue的每個(gè)階段都進(jìn)行操作數(shù)據(jù)或者改變內(nèi)容

<div id="app">
        {{count}}
        <p><button @click="add">add</button></p> 
    </div>
    <button onclick="app.$destroy()">銷毀</button>
    <script type="text/javascript">
        var app =  new Vue({
            el:"#app",
            data:{
                count:1
            },
            methods: {
                add:function(){
                    this.count++;
                }
            },
            beforeCreate:function(){
                console.log('1-beforeCreate 初始化之前');
            },
            created:function(){
                console.log('2-created 創(chuàng)建完成');
            },
            beforeMount:function(){
                console.log('3-beforeMount 掛載之前');
            },
            mounted:function(){
                console.log('4-mounted 被創(chuàng)建');
            },
            beforeUpdate:function(){
                console.log('5-beforeUpdate 數(shù)據(jù)更新前');
            },
            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>

生命周期展示圖.png

Template 制作模版

直接寫在選項(xiàng)里的模板

    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                message:'hello world'
            },
            template:`
                <h1 style="color:red">我是選項(xiàng)模板</h1>
            `
        })
    </script>

直接在構(gòu)造器里的template選項(xiàng)后邊編寫。這種寫法比較直觀，但是如果模板html代碼太多，不建議這么寫。

寫在<template>標(biāo)簽里的模板

這種寫法更像是在寫HTML代碼，就算不會寫Vue的人，也可以制作頁面

    <div id="app">
        {{message}}
    </div>
    <template id="add2">
            <h1 style="color:red">我標(biāo)簽?zāi)０?lt;/h1>
    </template>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                message:'hello world'
            },
            template:"#add2"
        })
    </script>

寫在<script>標(biāo)簽里的模板

這種寫模板的方法，可以讓模板文件從外部引入。

<div id="app">
        {{message}}
    </div>
    <script  type="x-template" id="add3">
            <h1 style="color:red">我script模板</h1>
    </script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                message:'hello world'
            },
            template:"#add3"
        })
    </script>

Component 初識組件

什么是組件？

組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以表現(xiàn)為用 is 特性進(jìn)行了擴(kuò)展的原生 HTML 元素。
所有的 Vue 組件同時(shí)也都是 Vue 的實(shí)例，所以可接受相同的選項(xiàng)對象 (除了一些根級特有的選項(xiàng)) 并提供相同的生命周期鉤子。

全局注冊組件

    <div id="app">
        <guosh></guosh>
    </div>
    
    <script type="text/javascript">
        Vue.component("guosh",{
            template:`<div style="color:red">我是全局組件</div>`
        })

        var app = new Vue({
            el:"#app"
        })
    </script>

我們在javascript里注冊了一個(gè)組件，在HTML中調(diào)用了他。這就是最簡單的一個(gè)組件的編寫方法，并且它可以放到多個(gè)構(gòu)造器的作用域里。

局部注冊組件

局部注冊組件和全局注冊組件是向?qū)?yīng)的，局部注冊的組件只能在組件注冊的作用域里進(jìn)行使用，其他作用域使用無效。

    <div id="app">
        <guo></guo>
    </div>
    
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            //定義局部組件
            components: {
                "guo":{
                    template:"<div style='color:red'>我是局部組件</div>"
                }
            }
        })
    </script>

從代碼中你可以看出局部注冊其實(shí)就是寫在構(gòu)造器里，但是你需要注意的是，構(gòu)造器里的components 是加s的，而全局注冊是不加s的。

Component-props屬性設(shè)置

定義屬性并獲取屬性值

代碼定義了guo的組件，并用props設(shè)置了here的屬性值，在here屬性值里傳遞了China給組件。

    <div id="app">
        <guo here="China"></guo>
    </div>
    
    <script type="text/javascript">

        var app = new Vue({
            el:"#app"
            //定義局部組件
            components: {
                "guo":{
                    template:"<div style='color:red'>屬性值{{here}}</div>",
                    props: ['here']
                }
            }
        })
    </script>

屬性種帶'-'的處理方式

我們在寫屬性時(shí)經(jīng)常會加入’-‘來進(jìn)行分詞，比如：<guo from-here=”China”></guo>，那這時(shí)我們在props里如果寫成props:[‘form-here’]是錯誤的，我們必須用小駝峰式寫法props:[‘formHere’]。

    <div id="app">
        <guo fom-here="fomChina" ></guo>
    </div>
    
    <script type="text/javascript">

        var app = new Vue({
            el:"#app",
            data:{
                message:'hello'
            },
            //定義局部組件
            components: {
                "guo":{
                    template:"<div style='color:red'>屬性值{{fomHere}} </div>",
                    props: ['fomHere']
                }
            }
        })
    </script>

在構(gòu)造器里向組件中傳值

把構(gòu)造器中data的值傳遞給組件，我們只要進(jìn)行綁定就可以了。就是我們第一季學(xué)的v-bind:xxx.

     <div id="app">
        <guo:heres="message"></guo>
    </div>
    
    <script type="text/javascript">

        var app = new Vue({
            el:"#app",
            data:{
                message:'hello'
            },
            //定義局部組件
            components: {
                "guo":{
                    template:"<div style='color:red'>屬性值 {{heres}}</div>",
                    props: ['heres']
                }
            }
        })
    </script>

Component 父子組件關(guān)系

 //必須把子組件放到上面按順序執(zhí)行否則會找到不子組件
        //子組件
        var city={
            template:`<div style='color:green'>我是子組件</div>`
        }
        //父組件
        var guoComponent={
            template:`<div style='color:red'>我是父組件<city></city></div>`,
            components: {
                "city":city
            }
        }
        var app = new Vue({
            el:"#app",
            //定義局部組件
            components: {
                "guo":guoComponent
            }
        })
    </script>

Component 標(biāo)簽

<component></component>標(biāo)簽是Vue框架自定義的標(biāo)簽，它的用途就是可以動態(tài)綁定我們的組件，根據(jù)數(shù)據(jù)的不同更換不同的組件。

 <div id="app">
        <!--可以動態(tài)的使用下面定義的組件-->
        <component :is="who"></component>
        <button @click="changeComponent">更換</button>
    </div>
    
    <script type="text/javascript">
        var componentA={
            template:`<div style='color:red'>I'm componentA</div>`
        }
        var componentB={
            template:`<div style='color:green'>I'm componentB</div>`
        }

        var componentC={
            template:`<div style='color:pink'>I'm componentC</div>`
        }
        

        var app = new Vue({
            el:"#app",
            data:{
               who:"componentA" 
            },
            methods:{
                "changeComponent":function(){
                    if(this.who=="componentA"){
                        this.who="componentB";
                    }
                    else if(this.who=="componentB"){
                        this.who="componentC";
                    }
                    else{
                        this.who="componentA"; 
                    }

                }
            },
            components: {
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC
            }
        })
    </script>