继续前篇。
1.v-for列表循环
数组（对象数组）：
<ul id="app"> <li v-for="item in items"> {{ item.message }} </li> </ul>
var app = new Vue({ el: '#app', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
或者添加索引值：
<ul id="app"> <li v-for="(item, index) in items"> {{ index }} - {{ item.message }} </li> </ul>
浅显易懂，不多解释。
对象（Object）：
<div v-for="(value, key, index) in object"> {{ key }}: {{ value }}: {{ index }} </div> new Vue({ el: '#v-for-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } })
这里通过对象的键、值来访问对应的值。
更多v-for列表循环知识点请点击：Vue.js的v-for列表循环详细教程。
2.v-on事件处理
先来个例子体会一下
<div id="app"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>
var app = new Vue({ el: '#app', data: { counter: 0 } })
不难看出，上面的v-on指令给button按钮绑定了一个单击事件，单击之后执行了js语句，由于数据是响应式的
单击之后，counter值改变了，并且立即在p标签的内容中展现了出来。
当然了，实际应用中事件处理逻辑会更为复杂，所以一般不会直接把JavaScript代码写在标签内，而是通过方法名调用，像下面这样：
<div id="app"> <button v-on:click="greet">Greet</button> </div>
var app = new Vue({ el: 'app', data: { name: 'Vue.js' }, methods: { greet: function (event) { alert('Hello ' + this.name + '!') if (event) { alert(event.target.tagName) } } } })
可能有的人原生js写得少，所以对event多少有些陌生，我记得很久之前写过一个原生拖拽模块就用到过event
博客地址在这：原生js拖拽模块。
那么在这里稍微说明一下这个event到底是个什么吧，event顾名思义就是事件的意思，就是当前执行的事件，那么就拿上
面的例子来说吧，当前执行了单击事件，那么是单击了什么东西呢，单击了button按钮啊，所以这个event.target就是指这
个button按钮，那么event.target.tagName就是指这个button标签的标签名，你肯定要说了，这特么不是废话嘛，button标
签的标签名当然是button咯嗯，很不错，你很聪明！！！
事件修饰符：
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>
按键修饰符：
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> <input v-on:keyup.13="submit"> <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit"> .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
系统修饰键：
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
3.表单输入绑定（双向数据绑定v-model）
双向数据绑定算得上是前端MVC、MVVM框架的一个亮点了。在这里对其的一些常见用法作一些总结：
（注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。）
input框和textarea框输入的值会及时在p标签显示出来：
<input v-model="message" > <p>Message is: {{ message }}</p>
<p >Multiline message is:{{ message }}</p> <textarea v-model="message" ></textarea>
选中时，checked值为true，反之为false：
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label>
多个复选框，绑定到同一个数组变量，全选时变量值：[ "Jack", "John", "Mike" ]：
<div id='app'> <input type="checkbox" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div>
new Vue({ el: '#app', data: { checkedNames: [] } })
单选按钮，依旧是为变量绑定控件的value值，选第一个按钮时变量picked的值：One：
<div id="app"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> new Vue({ el: '#app', data: { picked: '' } })
select单选，为变量赋值当前选择项的值，当选择A选项时，变量selected值：A：
<div id="app"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div>
new Vue({ el: '#app', data: { selected: '' } })
true-value和false-value属性，选中时绑定的变量toggle值为yes，未选中时变量toggle值为no：
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" >
对上面几种值绑定的比较：
<!-- 当选中时，`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 当选中第一个选项时，`selected` 为字符串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
Tips：vaule值其实也可以是一个对象；
<select v-model="selected"> <option v-bind:value="{ number: 123 }">123</option> </select> // 当选中时 typeof vm.selected // => 'object' vm.selected.number // => 123
修饰符：感受一下带修饰符的区别
.lazy修饰符
//输入的内容实时地更新显示在p标签中 <input v-model="message" placeholder="edit me"> //输入的内容，只有在输入结束回车的时候，才会完整显示在p标签中 <input v-model.lazy="message" placeholder="edit me"> <p>v-model实现双向数据绑定: {{ message }}</p>
.number修饰符
//官方文档说自动将用户的输入值转为数值类型 //实际上只是屏蔽用户输入的中文以及字母 <input v-model.number="age" type="number"> <p>v-model实现双向数据绑定: {{ age }}</p>
.trim修饰符
//过滤用户输入的首尾空白字符 //其实显示的时候和不加该修饰符没两样，亲测！ <input v-model.trim="message" placeholder="edit me"> <p>v-model实现双向数据绑定: {{ message }}</p>