Vue.js前端開發筆記--Vue.js基礎特性(1)

MVVM模式

Vue.js的使用是通過構造函數來建立Vue的執行個體，一個Vue執行個體相當于一個MVVM模式中的ViewModel。

var vm = new Vue({})

可以在執行個體化的時候傳入一個選項對象，包括資料、模闆、挂載元素、生命周期鈎子、方法等。

模闆

el

：類型為字元串、DOM元素或函數。

template

：類型為字元串，預設會将template值替換挂載元素(el值對應的元素)，并合并挂載元素和模闆根節點的屬性（如果屬性具有唯一性，類似id，則以模闆根節點為準）

将HTML從js中分離出來

var vm = new Vue({
     el: '#app',
      template: '#tpl'
 })

注意：Vue.js 2.0強制要求每一個Vue.js執行個體需要有一個根元素

資料

Vue執行個體通過

data

屬性定義資料，這些資料可以在執行個體對應的模闆中進行綁定并使用。

如果傳入的data是一個對象，Vue執行個體會代理起data對象裡的所有屬性，而不會對傳入的對象進行深層複制

1. 我們應該盡量在初始化的時候，把所有的變量都設定好，即使沒有值，也可以用undefined或者null占位。

2. Vue.$set(“message”, “Hello,Vuejs!”); 并不推薦這種方式，這樣會抛出一個異常

方法

我們可以通過

methods

來定義方法，并使用

v-on

指令來監聽DOM事件

<div id="app">
   <h1 v-on:click="alertMessage">{{message}}</h1>
</div>

var mData = {message: "Hello,Vue!"}
var vm = new Vue({
  el: '#app',
  data: mData,
  methods: {
    alertMessage: function(){
      alert(this.message);
    }
  }
});

生命周期

Vue.js前端開發筆記--Vue.js基礎特性(1)

beforeCreate

：執行個體開始初始化時同步調用

created

：在執行個體建立以後調用。此時已完成資料綁定、事件方法，但尚未開始DOM編譯

beforeMount

：Vue2.0新增的生命周期鈎子，在mounted之前運作

mounted：在編譯結束時調用，此時所有指令已生效，資料變化已能觸發DOM更新

beforeUpdate

：Vue2.0新增生命周期鈎子，在執行個體挂載之後，再次更新執行個體時會調用，此時尚未耿欣欣DOM結構

updated

：Vue2.0新增生命周期鈎子，在執行個體挂載之後，再次更新執行個體并更新完DOM結構後調用

beforeDestroy

：開始銷毀執行個體時調用，該執行個體仍然有效

destroyed

：在執行個體被銷毀後調用，此所有綁定和執行個體指令都已經解綁，子執行個體也被銷毀

activated

：Vue2.0新增生命周期鈎子，需要配合動态元件

keep-live

屬性使用，在動态初始化渲染的過程中調用

deactivated

：Vue2.0新增生命周期鈎子，需要配合動态元件

keep-live

屬性使用，在動态元件移出的過程中調用