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>commenth1>
  <p>{{msg}}p>
div>

<my-component v-once :comment="msg">my-component>

<ul>
  <li v-for="i in list" v-once>{{i}}li>
ul>

v-for

用法：我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

如：

"example-1">
  
for="item in items">
    {{ item.message }}
  


var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})