vue.js（二）

继续前篇。

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>

Vue中的事件修饰符、按键修饰符、系统修饰符。

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>