v-for、v-on、v-model · JavaWeb教案2019

## 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">  <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> ~~~