vue2.0 入門總結

1.生成vue的實例

var vm=new vue({

//這裏是選項  他能夠包含數據、模板、掛載元素、方法、生命週期鉤子等函數

})

2.實例生命週期(在生命週期裏this指向調用它的vue實例)

created在實例被建立後調用

created(){

    this.hello();

}

vue2.0生命週期:

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

3.模板語法（不使用模板可使用render函數使用JSX語法）

底層實現上Vue將模板編譯成虛擬DOM渲染函數，在應用狀態改變時，vue計算出從新渲染組件的最小代價並應用到DOM上。

先看怎麼用

插值:雙大括號!!!!!!必須的  數據改變 大括號內的值也跟着改變 

<span>{{msg}}</span>

v-once

若是你想插入一次接下來大括號內的數據不改變 則添加v-once屬性:

<span v-once>不改變{{msg}}</span>

v-html

<span>{{msg}}</span>效果和<span v-html="msg"></span>相同 ,可是後者是將數據轉變爲純文本 不是HTML 爲了輸出HTML 因此使用v-html

v-bind

大括號不能在HTML屬性中使用 要使用v-bind

<span v-bind:id="msg"></span>

若是msg爲false  移除屬性

<span></span>

使用JS表達式

{{msg+1}}

{{msg==true?0:1}}

4.指令

帶有v-前綴

<div v-if="msg">若是msg爲true則插入div標籤</div>

<div v-bind:id="msg">若是msg爲false則移除屬性，不然顯示</div>

<div v-on:click="toDo">點擊觸發函數</div>

<input v-model="msg"/>//雙向數據綁定

.....等等  vue還支持自定義指令。後面說。

指令縮寫

v-bind:href  或者 v-bind:id 能夠縮寫爲 :href  和:id 就是省略前面的 v-bind

v-on:click  縮寫爲@click=""

5.計算屬性

computed 計算屬性會根據data 的值改變

<div>{{getNewMsg}}</div>

new Vue({

      el:'#App',

      data:{

            msg:'hello'

      },

      computed:{

            getNewMsg:function(){

                        return this.msg.split('').reverse().join('');

            } 

      }

})

上邊代碼計算屬性只用到了get，沒有set。因此咱們能夠給本身一個set

下面舉一個小例子

<template>  

1. <div>  
2.     <select v-model="site">  
3.         <option value="Google http://www.google.com">Google http://www.google.com</option>  
4.         <option value="baidu http://www.baidu.co">baidu http://www.baidu.com</option>  
5.         <option value="網易 http://www.163.com">網易 http://www.163.com</option>  
6.     </select>  
7.     <p>name：{{name}}</p>  
8.     <p>url：{{url}}</p>  
9.   </div>  
10. </template>  
11.   
12. <script>  
13. export default {  
14.   data () {  
15.     return {  
16.       name: 'Google',  
17.       url: 'http://www.google.com'  
18.     }  
19.   },  
20.   computed: {  
21.     site: {  
22.       // getter  
23.       get: function () {  
24.         return this.name + ' ' + this.url  
25.       },  
26.       // setter  
27.       set: function (newValue) {  
28.         let names = newValue.split(' ')  
29.         this.name = names[0]  
30.         this.url = names[names.length - 1]  
31.       }  
32.     }  
33.   }  
34. }  
35. </script>  

6.函數(methods)

methods也能夠實現剛纔computed的效果。

<div>{{getNewMsg}}</div>

new Vue({

      el:'#App',

      data:{

            msg:'hello'

      },

       methods:{

             getNewMsg:function(){

                   return this.msg.split('').reverse().join('');

            }

      }

})

computed和methods比較

寫法上的區別是computed計算屬性的方式在用屬性時不用加(),而methods方式在使用時要像方法同樣去用，必須加()。

兩種方式在緩存上也大有不一樣，利用computed計算屬性是將 content與message綁定，只有當message發生變化時纔會觸發content，而methods方式是每次進入頁面都要執行該方法，可是在利用實時信息時，好比顯示當前進入頁面的時間，必須用methods方式

 

7.wach方法

用於觀察VUE實例上的數據變更

<div>{{msg}}</div>

new Vue({

      el:'#App',

      data:{

            msg:'hello',

            text:'word',

            all:''

      },

      watch:{

            msg:function(){

                  this.all=this.msg+this.text;

            }

      }

})

8.class與style綁定

<div class="boxStyle"  v-bind:class="{active:isActive}"></div>

若是isActive爲false 則不顯示 active 這個class，不然相反。

class和v-bind:class能夠共同使用。

class支持三目運算符  <div v-bind:class="active?style01:style02"></div>

內聯樣式  <div v-bind:style="{color:red,fontSize:fontSize+'px'}"></div>

還能夠綁定到一個對象上

<div v-bind:style="obj"></div>

data(){

     return{

            obj:{

                     color:'red',

                      fontSize:'12px'

            }

     }

}

9.條件渲染

v-if 、 v-else、v-else-if

<div v-if="msg>0">大於0</div>

<div v-else-if="msg==0">等於0</div>

<div v-else>小於0</div>

還可使用template

<template v-if="msg>0">

          <div>1111</div>

</template>

<template v-else>

        <div>2222</div>

</template>

上邊的代碼修改msg切換不一樣的div內容，可是vue是不會從新渲染div標籤的。根據就地複用策略，只是替換div裏面的內容。若是想每次都從新渲染div標籤。須要使用key，key不一樣則每次從新渲染。

v-if 和 v-show

v-show只是控制display。

v-if有更高的切換消耗，v-show有更高的初始化消耗。

10.列表渲染

v-for

data(){

     return{

            parents:"我是",

            msg:[

                    {name:'foo'},

                    {name:'bar'},

             ]

      }

}

<div>

       <div v-for="{data,index} in msg">

              {{parents}}-{{index}}-{{data.name}}

       </div>

</div>

渲染結果: 我是-0-foo  我是-1-bar

 

11.事件處理器

使用template的好處

1。經過HTML模板就能夠輕鬆定位JS對應方法

2。不須要JS手動綁定事件，易於測試

3。當viewmodel銷燬 全部的事件處理器自動刪除，無需手動刪除

<div v-on:click="msg">點擊</div>

new Vue({

          el:'app',

          methods:{

          say:function(name,event){

                     alert(name+'我是vue')

                    if(event){event.preventDefault}

                    }

           }

})

若是要獲取原生DOM事件，須要傳入event

12.事件修飾符

.stop 組件單擊事件冒泡

.prevent   提交事件不在重載頁面

.capture   使用事件捕獲模式

.self          只當在本元素才發生

.once       新增

使用方式:

<div v-on:click.stop></div>

修飾符能夠串聯

<div v-on:click.stop.prevent="todo"></div>

13.表單控件

v-model 實現雙向數據綁定

<span>{{msg}}</span>

<input v-model="msg"/>

new Vue({

    el:'#app',

   data:{

          msg:'我是默認'

   }

})

不管是複選框  單選框  下拉列表   基本上獲取到用戶選中的值的方式，就是使用v-model到一個數組

<input type="checkbox" id="jack" value="jack" v-model="checkedName"/>

<label for="jack">jack</label>

<input type="checkbox" id="mini" value="mini" v-model="checkedName"/>

<label for="mini">mini</label>

若是用戶選中，則數組會把選中對象的value值存入數組中。

14.表單控件修飾符

.lazy   取消input事件轉爲change事件同步

.number   將用戶輸入的值轉爲number類型，若是返回NAN，則返回原值

.trim      取消先後空格

使用方式:

<input v-model.lazy="msg"/>

15.組件

註冊全局組件

Vue.component('my-component',{

    //選項

    data:function(){

              //在組件裏 data 必須是函數，而且不能使用箭頭函數

    }

})

註冊局部組件

經過使用組件實例選項註冊，可使組件在另外一個組件中使用

var child={

template:'<div>我是組件</div>'

}

new Vue({

          components:{

                    'my-components ':child

           }

})

16.組件通訊

思想：父組件通訊子組件，使用props。子組件通訊父組件使用自定義事件，經過$on（'事件名稱'）監聽事件 和 $emit('事件名稱') 觸發事件。

若是使用vuex，在根組件註冊，咱們在任意組件中均可以經過$store拿到store對象。若是子組件想要獲取到父組件的數據，或者說非父子組件想要拿到彼此的數據，最高效的方式是使用vuex。

可是，仍是要說下基本的props用法。

props

Vue.components('child',{

          props :['msg'],

          template:'<div>{{msg}}</div>'

})

<child msg="hello"></child>

注意：由於HTML不區分大小寫，因此在傳遞props時，駝峯寫法要經過短橫線隔開

<div my-props="hello"></div>

Vue.components('child',{

        props:['myProps'],

        template:'<div>{{myProps}}</div>'

})

動態props

傳遞props使用 v-bind,這樣父組件修改子組件也獲得修改

<div>

        <input  v-model="msg"/>

        <child v-bind:msg="msg"></child>

</div>

Vue.components('child',{

              props:['msg'],

              template:'<div>{{msg}}</div>'

})

字面量語法和動態語法

字面量：<child msg="1"></child>        props爲   "1"

動態語法: <child v-bind:msg="1"></child>      props爲   1

單向數據流

props是單向綁定的，父組件修改影響子組件，可是不能反過來，這是爲了防止子組件修改父組件的狀態，讓數據流難以理解。

能夠經過Vuex管理state，這樣子就避免了繁瑣的props傳遞。後面會發布VUEX講解的文章，請關注~

props驗證

只用於new建立的實例中，建立實例時傳遞 props。主要做用是方便測試。

支持類型：string  number  boolean  function  object   array

props:{

     msg:Number，//只檢測類型

    //檢測類型+其餘驗證

    call:{

       type:Number,

        default:0,

        requiredLtrue,

        validator:function(val){

            return val>=0

        }

     }

}

自定義事件

使用 v-on 綁定事件

父組件在使用子組件的地方直接用v-on監聽子組件觸發的事件，  子組件觸發事件會觸發父組件事件

子組件中要使用this.$emit('事件',參數)

父組件就可使用 $on去監聽

 例如 在父組件中：

<child v-on:子組件$emit的事件名稱="父組件事件名稱"></child>

非父子組件通訊

使用一個空的vue實例做爲中央事件總棧

var bus=new Vue()

在A組件中觸發事件

bus.$emit('a',1);

在B組件建立的鉤子中監聽事件

bus.$on('a',function(id){

})

17.slot

在子組件中

<div>

           <h1>我是子組件標題</h1>

           <slot>只有在沒分發的內容才顯示</slot>

</div>

在父組件中

<div>

      <child>

             <p>這裏的內容會替換掉子組件中的slot</p>

     </child>

</div>

渲染結果爲

<div>

        <div>

                <h1>我是子組件標題</h1>

              <p>這裏的內容會替換掉子組件中的slot</p>

       </div>

</div>

具名slot

給slot添加name屬性

在子組件中

<div>

           <h1>我是子組件標題</h1>

            <slot name="body">我是具名slot</slot>

</div>

在父組件中

<div>

           <child>

                   <div slot="body">這裏替換掉 name爲body的slot</div>

           </child>

</div>

18.Render函數

不想使用template，也能夠用render寫JSX。例如根據判斷自動生成DOM結構，若是大量的判斷用template會有大量的代碼，這時候能夠用render，使用createElement去建立標籤。

這裏只寫個小用法。

new Vue({

      el:"#app",

     render:h=>h(App)

})

若是不使用render咱們能夠這樣

new Vue({

          el:'#app',

          components:{App},

          template:'<App/>'

})

19.自定義指令

有時候咱們須要對DOM元素進行底層操做，因此須要自定義事件。

全局註冊

例如咱們建立v-focus

Vue.directive('focus',{

     inserted:function(el){

          el.focus();

     }

})

局部註冊

組件接收一個選項

directives:{

         focus:{

                   //指定的定義

         }

 }

使用：<div v-focus></div>

20.自定義指令鉤子函數

剛纔咱們全局定義 用到了 inserted函數，這就是鉤子函數。

bind:function(){} //只調用一次，指令第一次綁定到元素時調用。

inserted:function(){} //被綁定元素插入到父節點 調用

update:function(){}  //更新時調用

componentUpdated:function(){}   //被綁定元素所在模板完成一次更新週期時調用

unbind:function(){}  //指令與元素解綁調用

鉤子函數參數

el：指令綁定的元素對象

binding:一個obj對象，他包括如下屬性：

               name:指令名稱

               value:綁定的值

               oldValue:前一個值 只能在update函數和componentUpdate函數中使用

               expression:綁定的值是字符串形式 例如  v-demo="1"  爲1

               arg: 傳給指令的值  v-demo:foo   arg值爲foo

               modifiers: 修飾符對象 只能在update函數和componentUpdate函數中使用

vnode:vue編譯生成的虛擬節點

oldVnode:上一個虛擬節點

21.混合mixin

var mixin={

            created:function(){

                   this.hello();

             },

            methods:{

                  hello:function(){

                   console.log("Hello");

                   }

           }

}

var Component=Vue.extend({

        mixins:[mixin]

})

若是相同的屬性，都會被調用，只是混合對象的鉤子將在組件自身鉤子以前調用

若是 例如 方法的名字相同，就取組件自身的方法