Vue Instance

前言

Vue 音似 View，用意為表示 Vue.js 專注於 View。和其他實作 MVC 的 JavaScript 框架 ( Angular.js、Ember.js ) 相比，Vue.js 屬於 MVVM 設計模式的實作。

MVVM 由 Model–View–ViewModel 組成，使用者看到的是 View，Model 則是資料，View 會和 ViewModel 做資料綁定，然後由 ViewModel 去存取資料，也就是說 View 不會直接存取 Model (資料)，而是由 ViewModel 來做，它是一個同步 View 和 Model 的物件，Vue.js 主要就是在做 ViewModel 的工作。它讓 View 來和它綁定，然後當 Model 發生變化時，自動反應到 View 上。

原生的 JavaScript 或是 jQurey，必須先取得元素才能插入資料，Vue.js 則將 HTML 當成模板，藉由 el 屬性來確認它的執行範圍，然後將資料傳給模板，處理後呈現最後看到的 View。所有 View 的設計，全都在 HTML 中做好，並指定要放資料的區域，Vue.js 便會自動把資料放入其中。

創建實體

每個 Vue 的應用皆始於使用 Vue function 建構一個新的 Vue 實體。

1
2
3

var vm = new Vue({
    // options
})

由於受到 MVVM 影響，是以習慣使用變數 vm (ViewModel 的縮寫) 來表示 Vue 實體。

基礎型態

實體內 el 參數為 DOM id (指定 id 外不受此實體影響)，data 用於定義屬性：author、series、character，methods 定義函式，可通過 return 返回值，鬍子語法輸出屬性值或函式返回值。

<div id="">
  {{ 屬性名稱 }}
</div>

new Vue(
  // 傳入物件
  {
    el: 'DOM id', 
    // data 的值為物件格式或函式，通常會直接用物件，但在計算屬性只能使用函式
    data: { 
      // 屬性名稱自訂，用來和 HTML 模板中的 {{ 屬性名稱 }} 相對應。
      屬性名稱: '屬性值' 
    },
    method: {
      // 設定 function
    }
  }
)

實體範例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue Instance</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
  <div id="vue_instance">
	<h1>author : {{ author }}</h1>
	<h1>series : {{ series }}</h1>
	<h1>{{ details() }}</h1>
  </div>
  <script type="text/javascript">
	var vm = new Vue({
	  el: '#vue_instance',
	  data: {
		author: "Andrzej Sapkowski",
		series: "The Witcher",
		character: [
			'Geralt of Rivia',
			'Cirilla Fiona Elen Riannon, the Lion Cub of Cintra'
		]
	  },
	  methods: {
		details: function() {
		  return this.author + ' writes a series about ' + this.character[0] + ' and ' + this.character[1] + '.';
	    }
	  }
	})
  </script>
</body>

運行結果

1
2
3

author : Andrzej Sapkowski
series : The Witcher
Andrzej Sapkowski writes a series about Geralt of Rivia and Cirilla Fiona Elen Riannon, the Lion Cub of Cintra.

響應式狀態

當一個 Vue 實體被創建時，它將 data 對象中的所有的屬性加入到 Vue 的響應式系統中。若屬性的值發生改變，頁面將會更新為新的值。

var obj = { a: 1 }
var vm = new Vue({
  data: obj
})
// 指針相同
vm.a === obj.a // true
// 修改設置屬性會影響原始數據
vm.a = 2
obj.a // 2
// 無論更動哪方原始數據都會被修改
obj.a = 3
vm.a // 3

僅有實體被創建時就已經存在於 data 中的屬性才是響應式的。若是之後才新增的屬性，比如：

1	vm.b = 'I am new！'

則對 b 的改動不會觸發頁面更新。所以一個 Vue 實體在未來所會使用到的所有屬性在最開始時就須全部設定完畢(初始設定為空或不存在：””、0、false、[]、null)。

※ 使用 Object.freeze() 能阻止修改現有屬性，並導致響應系統無法再追蹤變化。

Vue 所提供的屬性及方法

Vue 實體提供了一些能夠被存取的屬性與方法，並以前綴 $ 與用戶自定義的屬性區分。

範例

<div id="vm">
  {{a}}
</div>

<script>
var vm = new Vue({
  el: '#vm',
  data: {
    a: 'Hello World！'
  }
})

// 取得的 el 屬性和用 JavaScript 方法取得的元素相同
vm.$el === document.querySelector('#vm') // true

// 取得資料物件的屬性
console.log(vm.a) // Hello World！

// 呼叫 watch 方法，當 a 的值改變時觸發
vm.$watch('a', function(newVal, oldVal){
  console.log('a 現在是 ' + newVal + ', 之前是' + oldVal)
  // a 現在是 change！, 之前是 Hello World！
})
// 模擬 2 秒後改變 a 的值，並觸發 vm.$watch() 方法
setTimeout(function(){
  vm.a = 'change！'
}, 2000)
</script>

# Vue, w3HexSchool