Vue – 使用 v-model 雙向綁定，也示範模版中綁定

2017-06-11 / JSN / 0 Comments / 327 次瀏覽

<div class="app">
    <input v-model="message"> <!-- 透過 v-model 雙向綁定參數 message -->
    <div>{{ message }}</div> <!-- 會同步異動 message 喔 -->
    <my-template v-bind:item="message"></my-template> <!-- 一樣會同步異動，但是這是使用模板 -->
</div>

// 這是模版喔
Vue.component('myTemplate', {
	props: ['item'], // 這像是一個窗口，我們自訂一個窗口的名稱為 item

	// item 就是從外部的值 (那個 message 參數) 經由窗口 (props) 的傳遞，指派為上方的 item
	// 所以外部的 message，在內部其實就是 item 喔
	template: '<div> {{ item }} </div>' 
})


new Vue({
	el: '.app',

	// 餵入我們的資料
	data: {
		message: 'Hello World !'
	}
})

用影片來示範