内置的指令：

　　

  • v-for 用于遍历
  • v-if & v-show 用于隐藏和显示元素(区别在于后者是修改 display:block|none,前者是不创建把元素从dom中删除或者创建.
  • v-bind: 属性绑定,把数据绑定在HTML元素的属性上.
  • v-html & v-text 把数据绑定在HTML元素的属性上,作用同 innerHTML & innerText
  • v-on: 绑定HTML元素事件
  • v-if & v-else-if & v-else 条件渲染
  • v-model 绑定表单元素,实现双向绑定.
自定义指令：
  • 使用 Vue.directive() 来新建一个全局指令,(指令使用在HTML元素属性上的)
  • Vue.directive('focus') 第一个参数focus是指令名,指令名在声明的时候,不需要加 v-
  • 在使用指令的HTML元素上,<input type="text" v-focus placeholder="我有v-focus,所以,我获取了焦点"/> 我们需要加上 v-.
  • Vue.directive('focus',{}) 第二个参数是一个对象,对象内部有个 inserted() 的函数,函数有 el 这个参数.
    • el 这个参数表示了绑定这个指令的 DOM元素,在这里就是后面那个有 placeholder 的 input
    • el 就等价于 document.getElementById('el.id')....
    • 可以利用 $(el) 无缝连接 jQuery
生命周期：

  • bind(){} 当指令绑定到 HTML 元素上时触发.只调用一次.
  • inserted() 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 div#app).但不保证,父元素已经插入了 DOM 文档.
  • update() 所在组件的VNode更新时调用.
  • componentUpdated 指令所在的组件的VNode以及其子VNode 全部更新后调用.
  • unbind: 指令和元素解绑的时候调用,只调用一次

钩子函数参数：

　　

  • el: 绑定指令的那个dom元素.(doucument.getElementById('el.id')
  • binding: 一个对象
    • name : v-gqs ==> gqs 不包括前面的v-
    • valule : 指令后面的值 v-gqs='abc' value=abc
    • oldValue 前一个值,只能在 update & componentUpdate 中使用.
    • expression : v-gqs='1+1',如果是 value = 2 ,如果是 expression = 1 + 1
    • arg: 指令传递的参数 ,比如 v-gqs:hello arg = hello
    • modifiers : 比如 v-gqs.a.b modifiers = {a:true,b:true}
  • vnode:Vue编译生成的虚拟节点.
  • oldVnode:上一个虚拟节点,仅在 update & componentUpdated 中可用