為什麼要做 資料綁定 ？

Vue Instance 或 Component都有各自的資料，對前端來講，空有資料是沒意義的，必須讓使用者閱讀、操作，資料綁定串起這兩端的連結。

new Vue({
	el: '#app",
	data: {
		msg: 'Vue rock!',
		userInput: ''
	}
});

<div id="app">
	<!-- 將 message 呈現於UI -->
	<p>{{ msg }}</p>
	
	<hr>
	
	<!-- 取得使用者當前輸入，更新 userInput -->
	<!-- 當 userInput 更新，也會同步輸入框數值 -->
	<input	type="text" v-model="userInput" />
	
</div>

Component 寫法改成

Vue.component('demo', {
	data: function() {
		return {
			msg: 'Vue rock!',
			userInput: ''
		};
	}
});

<template>

	<p>{{ msg }}</p>
	
	<hr>
	
	<input	type="text" v-model="userInput" />
	
</template>

資料綁定語法

基本的文字綁定採 mastache 語法 (雙大括號)，支援 JavaScript 表達式，能做些運算。

	<!-- 你好，我是鬍子標記 -->
    {{ number + 1 }}
	{{ ok ? 'YES' : 'NO' }}
	{{ msg.split(' ').reverse().join(' ') }}

像這些常見的後端樣板常見的 JavaScript 陳述句 不行。

	{{ var a = 1 }}
	{{ if (ok) { return message } }}

進階資料綁定

	<!-- 文字單向綁定 -->
	<p>{{ msg }}</p>
	
	<!-- 單次綁定 (僅更新一次，之後數值更動也不會更新) -->
	<p v-once>{{ msg }}</p>
	
	<!-- 把內容當成 HTML 解析 -->
	<p v-html="raw_html"></p>
	
	<!-- 屬性綁定 -->	
	<a href="{{ pageLink }}"></a>
	<a v-bind:href="pageLink"></a>
	
	<div v-bind:id="dynamicId"></div>
	<button v-bind:disabled="isDisabled">Submit</button>
	
	<!-- 縮寫 -->
	<a :href="pageLink"></a>
	<div :id="dynamicId"></div>
	<button :disabled="isDisabled">Submit</button>
	
	<!-- Filters 過濾器 -->
	{{ data | json }}
	{{ username | capitalize }}

也附上 1.x 語法相異之處

	<!-- 單次綁定 (僅更新一次，之後數值更動也不會更新) -->
	<p>{{* msg }}</p>
	
	<!-- 把內容當成 HTML 解析 -->
	<p>{{{ raw_html }}}</p>

綁定使用者輸入與事件