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>
這樣會報錯：
