Vue的内部指令

基础指令

v-shou指令是根据表达式的值来显示或隐藏HTML元素。当v-show赋值为false时，元素将被隐藏。查看DOM时，会发现元素上多了一个内联样式style="display:none"。
注：v-show不支持<template>语法。

v-if和v-show区别

v-if是惰性的——如果初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show简单得多——元素始终被编译并保留，只是简单地基于CSS切换。
一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。

  v-else指令顾名思义，v-else就是JavaScript中else的意思，它必须跟着v-if或v-show，充当else功能。

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。尽管有点神奇，但是v-model不过是语法糖，在用户输入事件中更新数据，以及特别处理一些极端例子。

v-model指令后面还可以添加多个参数（number、lazy、debounce）。

1.number
如果想将用户的输入自动转换为Number类型（如果原值的转换结果为NaN,则返回原值）,则可以添加一个number特性。
2.lazy
在默认情况下，v-model在input事件中同步输入框的值与数据，我们可以添加一个lazy特性，从而将数据改到change事件中发生。
3.debounce
设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如，在input中输入内容时要随时发送AJAX请求），那么它较为有用。

v-repeof

v-for指令基于源数据重复渲染元素。我们也可以使用$index来呈现对应数组索引。
使用v-for将得到一个特殊的作用域，类似于AngularJs的隔离作用域，我们需要明确指定props属性传递数据，否则在组件内将获取不到数据。对于组件内的<p>标签，我们可以使用<slot>
当数组数据出现变动时如何检测呢？Vue.js包装了被观察数租的变异方法，它们能触发视图更新。被包装的方法有：
  1.push()
  2.pop()
  3.shift()
  4.unshift()
  5.splice()
  6.sort()
  7.reverse()

v-text指令可以更新元素的textContent。在内部，{{Mustache}}插值也被编译为textNode的一个v-text指令。

 v-html指令可以更新元素的innerHTML。内容按普通HTML插入——数据绑定被忽略。如果想复用模板片段，则应当使用partials。

v-on指令用于绑定事件监听器。事件类型由参数指定；表达式可以是一个方法的名字或一个内联语句；如果没有修饰符，也可以省略。使用在普通元素上时，只能监听原生DOM事件；使用在自定义元素组件上时，也可以监听子组件触发的自定义事件。在监听原生DOM事件时，如果只定义一个参数，DOM event为事件的唯一参数；如果在内联语句处理器中访问原生DOM事件，则可以用特殊变量$event把它传入方法。
v-on后面不仅可以跟参数，还可以增加修饰符:
        .stop —— 调用event.stopPropagation()。
        .prevent —— 调用event.preventDefault()。
        .capture —— 添加事件侦听器时使用capture模式。
        .self —— 只当事件是从侦听器绑定的元素本身触发时才触发回调。
        .{keyCode | keyAlias} —— 只在指定按键触发回调。Vue.js提供的键值有:[esc:27、tab:9、enter:13、space:32、'delete':[8,46]、up:38、left:37、right:39、down:40]。
v-bind指令用于响应更新HTML特性，将一个或多个attribute，或者一个组件prop动态绑定到表达式。在绑定prop时，prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。修饰符为：.sync ——双向绑定，只能用于prop绑定。
    .once ——单次绑定，只能用于prop绑定。
    .camel ——将绑定的特性名字转换回驼峰命名。只能用于普通HTML特性的绑定，通常用于绑定用驼峰命名的SVG特性，比如viewBox。

v-ref在父组件上注册一个子组件的索引，便于直接访问。不需要表达式，必须提供参数id。可以通过父组件的$refs对象访问子组件。
当v-ref和v-for一起使用时,注册的值将是一个数组，包含所有的子组件，对应于绑定数组；如果v-for使用在一个对象上，注册的值将是一个对象，包含所有的子组件，对应于绑定对象。

   v-el为DOM元素注册一个索引，方便通过所属实例的$els访问这个元素。可以用v-el:some-el设置this.$els.someEl。
    v-pre编译时跳过当前元素和他的子元素。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。

v-clook指令保持在元素上直到关联实例结束编译。AngularJS也提供了相同的功能。当和CSS规则如[v-cloak]{display:none}一起使用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕，否则在渲染页面时，有可能用户会先看到Mustache标签，然后看到编译后的数据。用法如下：
      [v-cloak] {
       diaplay: none;
      }
    <div v-cloak>{{ message }}</div>

v-if 指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应放入元素就会从DOM中移除；否则，对应元素的一个 克隆将被重新插入DOM中。
v-if是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，则可以把<template>元素当作包装元素，并在其上使用v-if，最终的渲染结果不会包含它。