1、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="app"> <span>{{count}}</span> <button @click="inc">+</button> </div> <script> var app = new Vue({ // 1. // data () { // return {count: 0} // }, // 2. // data: { // count: 0 // }, // 3. data: function() { return { count: 0 } }, methods: { inc () {this.count++} } }) app.$mount('#app') </script> </body> </html>
上述的data有三種寫法,都能夠運行,那有什么區別呢?
首先,1是3的語法糖,是新的ES6語法,和3一摸一樣。
1和2的區別:引用官網,簡而言之,在app = new Vue
對象時,沒什么區別,因為你app
對象不會被復用。但是在組件中,因為可能在多處調用同一組件,所以為了不讓多處的組件共享同一data
對象,只能返回函數。
使用組件時,大多數可以傳入到 Vue 構造器中的選項可以在注冊組件時使用,有一個例外: data
必須是函數。 實際上,如果你使用的不是函數,那么 Vue 會在控制台發出警告,告訴你在組件中 data
必須是一個函數。
下面的例子會讓所有的組件都同時發生變化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> <script> var data = { counter: 0 } Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', // data 是一個函數,因此 Vue 不會警告, // 但是我們為每一個組件返回了同一個對象引用 data: function () { return data } }) new Vue({ el: '#example-2' }) </script> </body> </html>
由於這三個組件共享了同一個 data
, 因此增加一個 counter 會影響所有組件!我們可以通過為每個組件返回新的 data 對象來解決這個問題:
data: function () { return { counter: 0 } }
https://cn.vuejs.org/v2/guide/components.html#data-必須是函數
https://segmentfault.com/q/1010000007910818?_ea=1490198
2、
漸進式框架、采用自底向上增量開發(可以查看前面的文章)
核心思想:響應的數據綁定和組合的視圖組件
在沒有接觸 DOM 的情況下更新了應用的狀態 - 所有的 DOM 操作都由 Vue 來處理,你寫的代碼只需要關注基本邏輯。v-on可以實現。
注意每個 Vue 實例都會代理其 data
對象里所有的屬性,只有這些被代理的屬性是響應的。如果在實例創建之后添加新的屬性到實例上,它不會觸發視圖更新。
3、
不僅可以綁定 DOM 文本到數據,也可以綁定 DOM 結構到數據(v-if)。
需要注意的是:v-if不能綁定在所掛載的元素上,比如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue組件</title> </head> <body> <div id="app" title="text" v-if="type"> {{message}} {{text}} </div> <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script> <script> var mes = { message:"hello"+ new Date(), text:"world" } var app = new Vue({ el:"#app", data:mes, type:true }) </script> </body> </html>
這樣會報錯: