一、創建一個Vue實例

每個Vue應用都是使用Vue函數創建一個Vue實例。所有的Vue組件都是一個Vue實例，並且接受相同的選項對象（一些根實例特有的選項除外）。

數據和方法

當一個實例被創建後，它向Vue的響應式系統加入了其data對象中能找到的所有屬性。當這些屬性的值改變的時候，視圖也會跟著響應。

註意：

1.值得註意的是，只有當Vue實例被創建的時候的data對象中的存在的屬性才是響應式的。
2.如果你知道你會在晚些時候需要一個屬性，但是一開始它為空或者不存在，那麽你僅需要設置一些初始值。
3.這裏唯一的例外是使用object.freeze()，這會阻止修改現有的屬性。
4.當然除了數據屬性，Vue實例還暴露出了一些實例屬性和方法，它們都有前綴$,這樣便於和用戶自定義的屬性區分開來。

二、實例生命周期鉤子

每個Vue實例在被創建時都要經過一系列的初始化過程，例如，需要設置數據監聽，編譯模板，將實例掛載到DOM並且在數據變化時更新DOM。同時在這個
過程中會運行一些叫生命周期鉤子的函數。生命周期鉤子的this上下文指向調用它的實例

• created：用於在一個實例被創建之後執行的代碼
• mounted:
• updated:
• destroyed:

三、計算屬性和偵聽器

1.計算屬性

var vm = new Vue({
    el: ‘#example‘,
    data:{
        message: ‘hello‘
    },
    computed:{
                //reverseMessage是計算屬性，因為其依賴了message數據屬性，當message變化的時候，reverseMessage也跟著改變
        reverseMessage: function(){
            return this.message.split("").reverse().join("");
        },   
                //now也是計算屬性，但是它並不是響應式依賴，計算屬性是基於它們的依賴來緩存
        now: function(){
            return Date.now();
        }
    }
    methods:{
        reverseMessage:function(){
            return this.message.split("").reverse().join("");
        }
    }
})
 

2.偵聽屬性

var vm = new Vue({
  el: ‘#demo‘,
  data: {
    firstName: ‘Foo‘,
    lastName: ‘Bar‘,
    fullName: ‘Foo Bar‘
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ‘ ‘ + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ‘ ‘ + val
    }
  }
})
 

看起來計算屬性要比偵聽屬性好用得多，偵聽屬性看起來濫用watch。

3.計算屬性的setter
計算屬性默認只有getter，不過在需要的時候，也提供一個setter。

computed:{
        reverseMessage: function(){
            return this.message.split("").reverse().join("");
        },
        now: function(){
            return Date.now();
        },
        fullName:{
            get: function(){
                return this.firstName + this.lastName;
            },
            set:function(newValue){
                var names = newValue.split(" ");
                this.firstName = names[0];
                this.lastName = names[names.length - 1] 
            }
        }
    }

4.偵聽器
雖然計算屬性在大多數情況下合適，但也需要一個自定義的偵聽器。Vue通過watch選項，提供一個更通用的方法，來響應數據的變化。
當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。

Vue.js入門學習