vue 常用指令总结

v-on

缩写为：@
用法：绑定事件监听器
如：

<button v-on:click="doThis"></button>
等级于
<button @click="doThis"></button>

v-blind

缩写为：：
用法：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
如：

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
等价于
<!-- 缩写 -->
<img :src="imageSrc">

v-model

用法：在表单控件或者组件上创建双向绑定

你可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

如：

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-once

用法：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

如：

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

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' }
    ]
  }
})