元件的data選項是乙個函式。vue 會在建立新元件例項的過程中呼叫此函式。它應該返回乙個物件，然後 vue 會通過響應性系統將其包裹起來，並以$data的形式儲存在元件例項中。為方便起見，該物件的任何頂級 property 也會直接通過元件例項暴露出來：
data()
}})console.log(vm.$data.count)
//=> 4
console.log(vm.count) //
=> 4
//修改 vm.count 的值也會更新 $data.count
vm.count = 5console.log(vm.$data.count)
//=> 5
//反之亦然
vm.$data.count = 6console.log(vm.count)
//=> 6
這些例項property 僅在例項首次建立時被新增，所以你需要確保它們都在data函式返回的物件中。必要時，要對尚未提供所需值的 property 使用null、undefined或其他佔位的值。
直接將不包含在data中的新 property 新增到元件例項是可行的。但由於該 property 不在背後的響應式$data物件內，所以 vue 的響應性系統不會自動跟蹤它。
vue 使用$字首通過元件例項暴露自己的內建 api。它還為內部 property 保留_字首。你應該避免使用這兩個字元開頭的的頂級dataproperty 名稱。
我們用methods選項向元件例項新增方法，它應該是乙個包含所需方法的物件：
data()
},methods:
}})console.log(vm.count)
//=> 4
vm.increment()
console.log(vm.count)
//=> 5
vue 自動為methods繫結this，以便於它始終指向元件例項。這將確保方法在用作事件監聽或**時保持正確的this指向。在定義methods時應避免使用箭頭函式，因為這會阻止 vue 繫結恰當的this指向。
這些methods和元件例項的其它所有 property 一樣可以在元件的模板中被訪問。在模板中，它們通常被當做事件監聽使用：
up vote
在上面的例子中，點選時，會呼叫increment方法。
也可以直接從模板中呼叫方法。就像下一章節即將看到的，通常換做計算屬性會更好。但是，在計算屬性不可行的情況下，使用方法可能會很有用。你可以在模板支援 j**ascript 表示式的任何地方呼叫方法：
}
如果totitledate或formatdate訪問了任何響應式資料，則將其作為渲染依賴項進行跟蹤，就像直接在模板中使用過一樣。
從模板呼叫的方法不應該有任何***，比如更改資料或觸發非同步程序。如果你想這麼做，應該使用生命週期鉤子來替換。
vue 沒有內建支援防抖和節流，但可以使用 lodash 等庫來實現。
如果某個元件僅使用一次，可以在methods中直接應用防抖：
methods: , 500)}
vue 沒有內建支援防抖和節流，但可以使用 lodash 等庫來實現。
如果某個元件僅使用一次，可以在methods中直接應用防抖：
methods: , 500)}
但是，這種方法對於可復用元件有潛在的問題，因為它們都共享相同的防抖函式。為了使元件例項彼此獨立，可以在生命週期鉤子的created裡新增該防抖函式:
created() ,
unmounted() ,
methods:
},template: `
s**e
`})
vue學習 vue資料
data 定義乙個名為 button counter 的新元件 vue.component button counter template you clicked me times.自定義元件時，需要的資料也會被定義，但是data是乙個函式。返回的物件變數資料，在元件中自己使用，data部分還可以像...
vue學習 vue例項（instance）
這一章主要是列舉vue例項一些實用的方法和屬性，大概講解一下用到的地方，有些涉及元件部分的屬性，暫時跳過，待到學完元件章節，再回過頭來補充。主要講解 vue instance宣告方式 vue instance上的屬性 vue instance上的方法 vue instance宣告方式 const v...
vue學習筆記 vue元件
元件 是頁面的一部分，將介面切分成部分，每部分稱為 元件 定義乙個全域性的元件，元件支援 駝峰命名 規則 vue.component todoitem 迴圈遍歷 list 每一次遍歷都把值給 item item 再通過 v bind 把值傳遞給 content compoent 通過 props 獲...