vue學習筆記——篇3

 

1.綁定計算後數據，三種方式：

 

》1.紅色框，經過method

》2.黃色框，經過computed

》3.藍色框，經過watch

推薦computed，vue對computed作了緩存，只有用到的數據有改變時，纔會調用；

method中，只要有數據改變（好比number），就會調用，在數據和業務邏輯複雜時，嚴重下降了性能；

watch方法，代碼量多一倍，通常用於檢測數據變化。

 

 

2.watch監聽對象內部屬性，兩種方法：

》1.綠色框

　　經過deep屬性，vue會遍歷對象的每一個屬性，併爲每一個屬性綁定上監聽函數，不推薦

》2.藍色框

　　經過字符串形式，直接監聽屬性值，推薦

 

 

3.v-for，每個循環出來的標籤要綁定一個key，用於緩存。

　　通常和服務器中列表的id是對應的，

　　不要用index，列表的順序和列表的內容沒有什麼關係，可能會致使緩存錯誤的內容。

 

 

4.checkbox複選框綁定值

》1.利用v-model綁定數據

　　data: {

　　　　active: true

　　},

　　template:`

　　　　<input type="checkbox" v-model="active" />

　　`,

　　選中狀態和數據中的active是動態綁定的。

 》2.利用v-model和v-bind:value，使用數組控制一組checkbox

　　data:{

　　　　arr: [1,2,3]

　　},

　　template: `

　　　　<p>

　　　　　　<input　　 type="checkbox" 　　v-model="arr"　　:value="1" />
　　　　　　<input　　 type="checkbox" 　　v-model="arr"　　:value="2" />
　　　　　　<input　　 type="checkbox" 　　v-model="arr"　　:value="3" />
　　　　　　<input　　 type="checkbox" 　　v-model="arr"　　:value="4" />

　　　　</p>

　　`,

　　前三個是選中狀態，最後一個沒有選中。由arr中的值肯定是否選中。

5.v-once指令，用於標籤內是一些靜態內容，避免vue再對其進行檢測，節省部分性能開銷。

 

 

6.vue實例建立方式，兩種：

》》1.普通

　　new Vue({

　　　　el: "#root",

　　　　data: {},

　　　　...

　　});

》》2.繼承自定義組件

　　*********************

　　組件擴展的兩種方式

》》1.如上面截圖

》》2.extends關鍵字

　　new Vue({

　　　　extends: vueComp,

　　　　el: "#root",

　　　　...

　　});

　　組件中的覆蓋、依次執行狀況、props屬性的定義方式和上圖同樣，

　　通常用於大型項目中對公共組件的擴展。

 

7.父子組件之間的雙向數據綁定

 

父子組建雙向數據綁定，綁定的是父組件的數據和子組件的屬性，須要指定。

 

 

按照通常思路，父組件中的模版這樣定義：

<my-comp　　:value="value"　　@input="value=arguments[0]"></my-comp>

這裏簡寫成：

<my-comp　　v-model="value"></my-comp>

 

 

v-model 處理了兩個操做，

　　綁定value屬性爲父組件中的數據；（默認爲value）

　　監聽input事件並將數據傳遞給父組件數據。（text類型input默認爲input事件，若是是checkbox爲change）

 

 

子組件中定義model選項：

　　model: {

　　　　prop: a,

　　　　event: click

　　}

改變v-model指令默認的屬性名和事件名，例：

 

 

 

 8.跨級父子組件之間須要通訊，採用provide / inject聲明，例子：

有幾個特殊狀況：

》》1.

會報錯，this是undefined，報錯緣由：provide建立時vue實例尚未建立完，

把provide寫成函數返回對象的形式能夠避免：

》》2.

value動態綁定，但經過input改變值時，經過provide/inject傳遞到下面的值並不會動態改變。

緣由：provide/inject的數據沒有reactive效果

 

 

 解決辦法：

經過Object.defineProperty，聽說vue的雙向數據綁定原理就是根據這個函數實現的，可是測試會報錯，堆棧溢出？？？

 

 

9.template會被編譯成render函數，方式以下：

》》子組件：

》》父組件

注意：slot標籤直接編譯爲字符串，再也不調用createElement.

》》》》》》》》》能夠去掉組件中的on，直接在父組件中聲明nativeOn，nativeOn會把事件綁定到子組件的根元素上，實例：

注意，若是寫成：

nativeOn: {

　　click(){

　　　　this.clicked();

　　}

}

 會報錯this是undefined

 

 

10.路由參數的獲取

　　this.$route.params.id

　　任意組件，只要在當前路徑下，都有$route屬性，均可以調用；

　　可是：若是子組件代碼中使用了this.$route，只能作爲route配置下的組件，不能作爲其餘地方也能用的組件，至關於組件與vue發生了耦合。

因此，推薦下面能夠解耦的方式：

　　routes: [

　　　　{

　　　　　　path: "/app:id",

　　　　　　component: App,

　　　　　　props: true

　　　　}

　　]

　　// App組件中這樣調用：

　　export default {

　　　　props:["id"],

　　　　mounted(){

　　　　　　this.id;

　　　　}

　　}

　　其中，routes中的props屬性能夠是布爾值，也能夠是對象函數：

　　1.對象：手動強制指定id，只會更改傳到組件的props中id的值

　　  props: {

　　　　id: "23333"

　　　}

　　2.函數：能夠指定傳遞的計算後id

　　  props: (route)=>({ id: route.query.name});

　　　　　localhost:8080/#/app/2333?name=jhon&age=18

　　　　　返回的是jhon,

　　　　　當前路由信息對象會作爲參數傳給函數

 

11.命名視圖

》》》》正常狀況下：

　　.vue文件：

　　　　<router-view></router-view>

　　.routes文件：

　　　　{

　　　　　　path: "/app",

　　　　　　component: App

　　　　}

》》》》命名視圖：

　　.vue文件：

　　　　<router-view></router-view>

　　　　<router-view name="abc"></router-view>

　　.routes文件：

　　　　{

　　　　　　path: "/app",

　　　　　　components: {

　　　　　　　　default: App, //沒有名字的router-view對應default

　　　　　　　　abc: Login

　　　　　　}

　　　　}

命名視圖經常使用於上面導航，左邊菜單的狀況（也能夠用其餘方式實現）

 

12.導航守衛（路由鉤子函數）

》》》vueRouter實例的鉤子函數：

　　（1） router.beforeEach = function(to, from, next) {};

　　（2） router.beforeResolve = function( to, from, next ){};

　　（3） router.afterEach = function( to, from, next ){};

》》》routes.js路由配置中的鉤子函數：

　　{

　　　　path: "/app",

　　　　component: App,

　　　　beforeEnter (to, from ,next) {}

　　}

》》》組件中的鉤子函數：

　　beforeRouterEnter: function( to, from, next){},

　　beforeRouterUpdate: function( to, from, next ){},

　　beforeRouterLeave: function( to, from, next ){}

 

導航守衛經常使用於 檢測到沒有登陸時跳轉到登陸界面，next("/login")

 

 

組件中的beforeUpdate，當由頁面 "localhost:8080/#/app/123" 跳轉到頁面"localhost:8080/#/app/456"時，只有id不一樣，

App組件只會觸發beforeUpdate進行更新，不會觸發beforeEnter，也不會觸發mounted，

經常使用於在頁面中監聽傳過來的id，若是不正確及時彈出錯誤信息。

　　beforeRouterEnter觸發時，組件實例尚未建立出來，this是undefined，須要在next中指定參數爲函數，並將當前實例對象作爲參數調用：

　　beforeRouterEnter: function( to, from, next){

　　　　next( function( vm ){

　　　　　　vm.id;

　　　　});

　　}

beforeRouterUpdate中能夠調用this.

 

 

beforeRouteLeave當離開當前組件，進入下一個組件以前調用（beforeRouteUpdate不會調用）,

經常使用於用戶改變了表單，離開前提醒用戶是否保存。