## v-for、v-on、v-model ### [用 `v-for` 把一個數組對應為一組元素](https://cn.vuejs.org/v2/guide/list.html#用-v-for-把一個數組對應為一組元素 "用 v-for 把一個數組對應為一組元素") 我們用 `v-for` 指令根據一組數組的選項列表進行渲染。`v-for` 指令需要使用 `item in items` 形式的特殊語法，`items` 是源數據數組并且 `item` 是數組元素迭代的別名。 ~~~ <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> ~~~ ~~~ var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) ~~~ 在 `v-for` 塊中，我們擁有對父作用域屬性的完全訪問權限。`v-for` 還支持一個可選的第二個參數為當前項的索引。 ~~~ <ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> ~~~ ~~~ var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) ~~~ ### [一個對象的 `v-for`](https://cn.vuejs.org/v2/guide/list.html#一個對象的-v-for "一個對象的 v-for") 你也可以用 `v-for` 通過一個對象的屬性來迭代。 ~~~ <ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> ~~~ ~~~ new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }) ~~~ 結果： 你也可以提供第二個的參數為 property 名稱 (也就是鍵名)： ~~~ <div v-for="(value, name) in object"> {{ name }}: {{ value }} </div> ~~~ 第三個參數為索引： ~~~ <div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div> ~~~ ### [監聽事件](https://cn.vuejs.org/v2/guide/events.html#監聽事件 "監聽事件") 可以用 `v-on` 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。 示例： ~~~ <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> ~~~ ~~~ var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) ~~~ ### [事件處理方法](https://cn.vuejs.org/v2/guide/events.html#事件處理方法 "事件處理方法") 然而許多事件處理邏輯會更為復雜，所以直接把 JavaScript 代碼寫在 `v-on` 指令中是不可行的。因此 `v-on` 還可以接收一個需要調用的方法名稱。 示例： ~~~ <div id="example-2"> <!-- `greet` 是在下面定義的方法名 --> <button v-on:click="greet">Greet</button> </div> ~~~ ~~~ var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 對象中定義方法 methods: { greet: function (event) { // `this` 在方法里指向當前 Vue 實例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接調用方法 example2.greet() // => 'Hello Vue.js!' ~~~ ### v-model [基礎用法](https://cn.vuejs.org/v2/guide/forms.html#基礎用法 "基礎用法") 你可以用 `v-model` 指令在表單 `<input>`、`<textarea>` 及 `<select>` 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 `v-model` 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理。 > `v-model` 會忽略所有表單元素的 `value`、`checked`、`selected` 特性的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 `data` 選項中聲明初始值。 `v-model` 在內部使用不同的屬性為不同的輸入元素并拋出不同的事件： * text 和 textarea 元素使用 `value` 屬性和 `input` 事件； * checkbox 和 radio 使用 `checked` 屬性和 `change` 事件； * select 字段將 `value` 作為 prop 并將 `change` 作為事件。 > 對于需要使用[輸入法](https://zh.wikipedia.org/wiki/%E8%BE%93%E5%85%A5%E6%B3%95) (如中文、日文、韓文等) 的語言，你會發現 `v-model` 不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程，請使用 `input` 事件。 ### [文本](https://cn.vuejs.org/v2/guide/forms.html#文本 "文本") ~~~ <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> ~~~