Vue元件需要注意的事項

var vm=new vue(
});

一、計算屬性：

computed:
}

（1）上述**中的計算屬性是add。

（2）計算屬性執行的function中涉及到的資料量被稱為計算屬性的依賴資料。

（3）計算屬性：當該屬性的依賴資料發生變化時，則該屬性會重新進行計算。

（4）計算屬性執行的function中renturn的返回值是計算屬性計算的最終結果。

例2：實現兩個數值的加減乘除運算（add、sub、mul、div）。

computed:,
set:function(引數)
}}

1、偵聽屬性依靠watch選項來實現對自身變數的檢測。

偵聽屬性只能檢測在data中設定好的資料。

當偵聽的屬性值發生變化時，執行偵聽屬性所對應的函式。

watch:
}例：watch:
}

2、偵聽屬性的第二種語法格式：可以為偵聽屬性新增新的屬性。

watch:
}}

例：watch:, immediate:true //當vue例項建立成功後自動執行kb的handler函式。

}}

3、偵聽屬性的新屬性：

immediate：邏輯值。若設定為true，則當vue例項建立時會自動執行一次偵聽屬性的

函式。deep：邏輯值。設定是否進行深層的監聽（針對自定義物件來進行設定的）。

（1）當偵聽屬性是乙個物件時，改變物件內屬性的取值時無法讓偵聽屬性執行函式的。

（2）除非改變偵聽屬性的完整物件，才可以執行偵聽屬性的函式。

（3）當設定了deep:true時，利用物件的屬性進行修改，物件屬性的原值無法得到保留。

例：data: }
（a）watch:
}

測試：vm.obj.a=100;       //不觸發偵聽屬性obj的function函式
vm.obj=; //觸發偵聽屬性obj的function函式
舊值：a=10,b=20
新值：a=100,b=400
（b）watch:,
deep:true}}
測試：vm.obj.a=『a』 //觸發偵聽屬性obj的handler函式
舊值：a=『a』,b=20
新值：a=『a』,b=20

4、可以通過$watch形成vue例項的方法：

vm.$watch(『kb』,function(newvalue,oldvalue))

元件（component）：元件是可以復用的vue例項。

var vm=new vue(,
components:
}})

vue.component(『my-button』,)

例：template:『\ \單擊\ 超級鏈結\

\』

es6：使用字串模板來實現dom結構的規劃。例：template:`

單擊超級鏈結

` 2、data選項：元件中的data選項必須是乙個function，==所有的資料必須使用return語句返回乙個物件== 來實現。

例：data:function()
}

3、methods選項：為template選項指定的dom結構繫結事件。 4、computed、watch選項：為元件例項設定計算屬性和偵聽屬性。 5、props選項：為元件註冊由使用者使用時提供的屬性。取值：（1）字串陣列（2）物件 a .字串陣列：props:[『linkurl』,『title』,『target』,『txt』] 註冊的屬性名稱若採用駝峰式命名，則使用時必須轉換為「短橫線間隔符」方式。 b .物件：允許對元件的屬性實現資料驗證。 props: },propd:}} 例：製作乙個的元件。（1）包括bookname、author、price、count四個屬性。（2）bookname是必須書寫的屬性。（3）author是乙個陣列，並帶有預設值（作者一、作者二）（4）price是乙個數值，預設值為0，取值必須大於20。

（5）count可以是數值，也可以是字串。

Vue元件需要注意的事項

水平翻轉需要注意的事項

swift 協議需要注意的事項

前端學習需要注意的事項

Vue元件需要注意的事項

水平翻轉需要注意的事項

swift 協議需要注意的事項

前端學習需要注意的事項

相關推薦