vue学习笔记--各种指令的语法

vue中有许多指令，在这里我们对这些指令做个粗滤的解释说明，便于更好的选择使用。

① v-bind : 动态绑定指令，使用v-bind:动态变化的值=”表达式”来修改html的属性值。
例子：v-bind:href=”hrefData”,可以使用 : 来代替v-bind。v-bind：class 等价于 ：class

② v-model ：在表单控件元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。对于要求 IME (如中文、 日语、 韩语等) (IME意为’输入法’)的语言，v-model不会在 IME 输入中得到更新。如果想实现更新，请使用 input事件。

在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步。

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值。

<input v-model.number="age" type="number">

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

<input v-model.trim="msg">

③ v-if v-show : 条件渲染，根据条件值的真假确定html是否渲染。

区别：带有 v-show 的元素始终会被渲染并保留在 DOM 中，v-show 是简单地切换元素的 CSS 属性 display 。

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

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

<ul id="example">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example',
  data: {
    items: [
      {message: 'first' },
      {message: 'second' }
    ]
  }
})

v-for 还支持一个可选的第二个参数为当前项的索引。

<ul id="example">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

⑤ v-on：监听 DOM 事件来触发一些 JavaScript 代码。vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">