Vue – 使用 v-model 雙向綁定，也示範模版中綁定
|
1 2 3 4 5 6 7 |
<div class="app"> <input v-model="message"> <!-- 透過 v-model 雙向綁定參數 message --> <div>{{ message }}</div> <!-- 會同步異動 message 喔 --> <my-template v-bind:item="message"></my-template> <!-- 一樣會同步異動，但是這是使用模板 --> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 這是模版喔 Vue.component('myTemplate', { props: ['item'], // 這像是一個窗口，我們自訂一個窗口的名稱為 item // item 就是從外部的值 (那個 message 參數) 經由窗口 (props) 的傳遞，指派為上方的 item // 所以外部的 message，在內部其實就是 item 喔 template: '<div> {{ item }} </div>' }) new Vue({ el: '.app', // 餵入我們的資料 data: { message: 'Hello World !' } }) |
用影片來示範