vue學習筆記——基礎

1、如何使用vue

一、引包

二、建立實例化對象：new Vue(options);

三、options:

{

　　el: '#app',  // 綁定的根元素

　　template:'',  // 若是有template就直接渲染，沒有才會渲染el

　　data(){

　　　　return{

　　　　　　key:value

　　　　}

　　}

}

2、插值語法

{{}}  ----  設計得初衷是內部作簡單的運算

 

3、指令系統

一、v-text   -----  innerText

二、v-html -----  innerHtml

三、v-if和v-show

　　v-if爲true則至關於作appendChild
　　 v-if爲false則至關於作removeChild

　　 v-show爲true則至關於作display:'block'
　　 v-show爲false則至關於作display:'none'

四、數組 對象

　　v-for = "(item,index) in arrs"    v-for 優先級高於v-if, v-show, {{}}, v-html

五、綁定事件（data ====> View單向數據綁定）

　　  v-on:原生js事件名稱 = 「邏輯」；v-on:原生js事件名稱 = 「邏輯」；

　　v-on:原生js事件名稱 = 「方法名」 ------ 該方法名必須在methods中進行聲明；

　　v-bind:標籤中的原生屬性；

　　v-on:自定義屬性；

 

六、v-model   只能用於表單控件中 value  UI控件

　　雙向數據綁定過程：

　　 

4、組件

一、局部組件：聲明、掛載、使用（入口組件、子組件）

二、父組件通訊到子組件：

（1）、在父組件中,先綁定 :自定義的屬性名 = 數據名
（2）、子組件要聲明 props:['自定義的屬性名'] 來接收父組件傳輸過來的數據
（3）、收到數據就是本身的了，本身能夠隨便使用

三、子組件經過事件向父組件傳值：

（1）、在父組件中聲明並綁定，@自定義事件名 = 事件方法名（事件方法在methods中聲明）；
（2）、在子組件中經過$emit('父組件中自定義事件名','傳入的參數')方法觸發父組件中的自定義事件；
（3）、能夠在父組件中隨便使用。

四、全局組件：Vue.component("組件名",options);

　slot標籤做爲承載分發內容標籤；

5、過濾器

一、局部過濾器

　　 直接在組件中使用過濾器：

　　filters:{

　　　　過濾器的名字：function(要過濾的內容){

　　　　　　// 內部必定要 return

　　　　}

　　}

　　調用過濾器：數據屬性|過濾器名字

二、全局過濾器

 

　　參數一、過濾器名稱；參數二、回調函數； 函數中的參數1.要過濾的內容；參數2.傳入的參數

　　Vue.filter('myReverse',function(value,str){

　　　　return str +' '+ value.split(' ').reverse().join(' ');

　　});

6、監聽器

一、watch監聽單個屬性，其中基本數據類型 簡單監視，複雜數據類型 深度監視

watch:{

　　// 基本數據類型的監聽

　　msg: function(newV,oldV){

　　　　console.log(str1,str2);

　　　　if(newV == '111'){

　　　　　　console.log('111出現了');

　　　　}

　　},

　　// 複雜數據類型的監聽（object、array）

　　students:{

　　　　deep: true,

　　　　handler: function(newV,oldV){

　　　　　　console.log(newV[0].name);

　　　　}

　　}

}

二、computed 能夠監聽多個屬性

computed:{

　　getMusicSrc: function(){

　　　　return this.musicList[this.defaultIndex].musicSrc;

　　}

}

7、組件的生命週期

一、beforeCreate

　　 組件建立以前------能夠執行加載中函數

二、created

　　  * 組件建立以後

　　* 使用該組件就會調用created方法，在這個方法中能夠操做後端數據，數據響應視圖

　　* 應用：發起ajax請求

三、beforeMount

　　掛載數據到DOM以前會調用

四、mounted

　  掛載數據到DOM以後會調用 vue 能夠操做之後的DOM

五、beforeUpdate

　　更新DOM以前調用，能夠獲取原始的DOM

 

六、updated
　  更新DOM以後調用，能夠獲取最新的DOM

七、activated

　　內置組件，能在組件的切換過程當中將狀態保存在內存中，防止重複渲染DOM

　　組件激活過程 ---- 與keep-alive組件配合使用(拿到內存中的組件)

八、deactivated

　　組件停用過程 ---- 與keep-alive組件配合使用(隱藏內存中的組件)

九、beforeDestroy

　　組件銷燬前

十、destroyed

　　組件銷燬後

十一、errorCaptured