vue常用指令以及自定义指令

{{}}双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

vue常用指令有：v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等。

v-once指令：只会执行一次渲染，当数据发生改变时，不会再变化
v-show：接受一个表达式或一个布尔值。相当于给元素添加一个display属性

v-if和v-show有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。一般来说，v-if 有更高的切换开销（因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建），而 v-show 有更高的初始渲染开销（v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染。相比之下，v-show 不管初始条件是什么，元素总是会被渲染）因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

说明一下：v-if可以单独使用，而v-else-if,v-else必须与v-if组合使用
v-if、v-else-if都是接受一个表达式或布尔值，v-else不需要参数

v-for可用来遍历数组、对象、字符串。

v-text是渲染字符串，会覆盖原先的字符串
v-html是渲染为html。{{}}双大括号和v-text都是输出为文本。那如果想输出为html，使用v-html。

v-bind绑定一个属性，可以将属性值解析成js代码（只能解析变量或三元表达式）

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->  //key对应data里的数据key
<a :[key]="url"> ... </a>

v-on用于事件绑定，我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click=“methodName” 或 @click=“handler”。

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

v-model：数据双向绑定指令，限制在 <input>、<select>、<textarea>元素中使用，v-model 本质上是语法糖。
语法： v-model=“变量名”

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能（复用方法、数据等）。一个混入对象可以包含任意组件选项（就是组件中的data、methods、created等钩子函数）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

自定义指令：
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子

全局自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素el
    el.focus() // 页面加载完成之后自动让元素获取到聚焦的小功能
  }
})

局部自定义指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus() 
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus，如下：

<input v-focus> //输入框有了自动聚焦的功能

详解下面的钩子函数

 inserted: function (el) {     //inserted是钩子函数
      el.focus() 
    }

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含指令名、指令的绑定值、指令绑定的前一个值、“ ”中的指令表达式（理解成指令绑定的属性值）、指令的参数（理解成指令绑定的属性）、包含修饰符的对象
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。