iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 5
1
Modern Web

Vue.js 30天系列 第 5

Vue.js 05 - 資料綁定(data binding) 與 樣板(template) 語法

為什麼要做 資料綁定 ?

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

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>

綁定使用者輸入與事件


上一篇
Vue.js 04 - Vue Instance
下一篇
Vue.js 06 - 樣板(template) 常用功能
系列文
Vue.js 30天30

尚未有邦友留言

立即登入留言