Vue.js 教程
Vue.js 響應(yīng)接口
Vue 可以添加數(shù)據(jù)動態(tài)響應(yīng)接口。
例如以下實(shí)例，我們通過使用 $watch 屬性來實(shí)現(xiàn)數(shù)據(jù)的監(jiān)聽，$watch 必須添加在 Vue 實(shí)例之外才能實(shí)現(xiàn)正確的響應(yīng)。
實(shí)例中通過點(diǎn)擊按鈕計數(shù)器會加 1。setTimeout 設(shè)置 10 秒后計算器的值加上 20 。
實(shí)例
運(yùn)行代碼 ?
Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動態(tài)添加新的根級響應(yīng)式屬性。
Vue 不能檢測到對象屬性的添加或刪除，最好的方式就是在初始化實(shí)例前聲明根級響應(yīng)式屬性，哪怕只是一個空值。
如果我們需要在運(yùn)行過程中實(shí)現(xiàn)屬性的添加或刪除，則可以使用全局 Vue，Vue.set 和 Vue.delete 方法。
Vue.set
Vue.set 方法用于設(shè)置對象的屬性，它可以解決 Vue 無法檢測添加屬性的限制，語法格式如下：
Vue.set( target, key, value )
參數(shù)說明：
- target: 可以是對象或數(shù)組
- key : 可以是字符串或數(shù)字
- value: 可以是任何類型
實(shí)例
運(yùn)行代碼 ?
在以上實(shí)例中，使用以下代碼在開始時創(chuàng)建了一個變量 myproduct：
var myproduct = {"id":1, name:"book", "price":"20.00"};該變量在賦值給了 Vue 實(shí)例的 data 對象：
var vm = new Vue({ el: '#app', data: { products: myproduct } });如果我們想給 myproduct 數(shù)組添加一個或多個屬性，我們可以在 Vue 實(shí)例創(chuàng)建后使用以下代碼：
vm.products.qty = "1";
查看控制臺輸出：
如上圖看到的，在產(chǎn)品中添加了數(shù)量屬性 qty，但是 get/set 方法只可用于 id，name 和 price 屬性，卻不能在 qty 屬性中使用。
我們不能通過添加 Vue 對象來實(shí)現(xiàn)響應(yīng)。 Vue 主要在開始時創(chuàng)建所有屬性。 如果我們要實(shí)現(xiàn)這個功能，可以通過 Vue.set 來實(shí)現(xiàn)：
實(shí)例
運(yùn)行代碼 ?
從控制臺輸出的結(jié)果可以看出 get/set 方法可用于qty 屬性。
Vue.delete
Vue.delete 用于刪除動態(tài)添加的屬性 語法格式：
Vue.delete( target, key )
參數(shù)說明：
- target: 可以是對象或數(shù)組
- key : 可以是字符串或數(shù)字
實(shí)例
運(yùn)行代碼 ?
以上實(shí)例中我們使用 Vue.delete 來刪除 price 屬性。以下是控制臺輸出結(jié)果：
從上圖輸出結(jié)果中，我們可以看到 price 屬性已刪除，只剩下了 id 和 name 屬性，price 屬性的 get/set 方法也已刪除。