項目總結（vue2.0）

一、基礎知識

1.生命周期（項目到用到的）

Created：組件實例化創建完成，屬性綁定DOM未完成。($el 屬性還不存在)。

Mounted：組件掛在完成，虛擬DOM渲染到html上，mounted知執行一次（從mounted就可以獲取到$refs，進行操作）。

一般在created或是mounted進行一些ajax操作。

updated：組件更新之後，可以獲取到DOM節點。

2.數據渲染

v-if：是否創建DOM。一般用在不是頻繁創建DOM元素的情況下，否則可用v-show代替。（一般配合v-else，v-else-if一起使用）。

v-else：可以用在不同於v-if的標簽，但必須緊跟在v-if或v-else-if的後面。

v-else-if：可以鏈式使用多次。

v-show：切換display屬性。

v-for：列表渲染。

對象叠代：v-for=“（value,key,index） in obj” ,key:鍵名，value：鍵值，index索引。

整數叠代：v-for=“i in 10”,。

數組叠代：v-for=“（item，index） in arr”（數組嵌套同理）。

key：為每一項提供一個唯一的表示，用key表示：key=“item.id”.

v-text:更新元素的text content。

v-html：插入dom元素。

3.屬性綁定

v-bind：簡寫例如：class。屬性值若是變量，要用v-bind（父組件向組件傳值）。

4.屬性與方法

el：vue實例化的元素。

data：在實例化時data的類型是object，在組件定義時，data的類型是function，內部的元素以return返回的形式（不要是用箭頭函數）。

methods：定義的方法，類型是object。內部形式為{key：function（）{}}（不要使用箭頭函數）。

computed：計算屬性（計算屬性值）。

5.自定義過濾器

基本形式：Vue.filter(“name”，function（value[，value1…]{Return A})

name:過濾器的名稱。

value:默認傳入的字符串。

之後得到的值要用return返回出來。

6．事件處理器

v-on簡寫例如@click=“getInfo（$event,index）”。$event為元素本身，相當於event，index為v-for時的下標。

例如：點擊彈窗空白的地方彈窗消失，判斷ev.target的值

事件修飾符（用過）：

stop：阻止冒泡（加在子元素的事件上）。

7．父子組件傳值（只是其中一種方法）

父組件向子組件傳值

父組件<child :msg=”childData”></child>

子組件props:[“msg”]

若想父組件動態向子組件傳值，則要用父組件調用子組件的方法每次向方法裏傳參就可以。例如：父組件this.$refs.child.showName(msg) .必須給子組件添加ref屬性並獲取到。

子組件向父組件傳值

通過父組件訂閱子組件的方法，在子組件在發布方法時，獲取到子組件傳過來的值。

子組件：

<template>

<div @click="iclick"></div>

</template>

 methods:{

         iclick(){

            let data = { a:‘data‘ };

            this.$emit(‘ievent‘,data,‘lalala‘);

         } 
}

父組件：

<i-template @ievent = "ievent"></i-template>

        methods:{

            ievent(...data){

            console.log(‘allData:‘,data);  //  data為包含傳過來所有數據的數組，第一個元素是對象，第二個元素是字符串

        } 
}

總結：當用到路由的時候，頭部底部放在父組件中，個別頁面沒有底部可以由子組件傳值控制父組件的內容。

項目總結1（微信+vue2.0）