vue的内置指令和directive自定义指令的使用

比如:

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 绑定表单元素,实现双向绑定.
等等.....

所以,关于指令,我们可以总结下面几点:

指令是写在 HTML 属性地方的.<input v-model=‘name‘ type=‘text‘ />
指令都是以 v- 开头的.
指令表达式的右边一般也可以跟值 v-if = false

// 和自定义过滤器一样,我们这里定义的是全局指令
Vue.directive(‘focus‘,{
    inserted(el) {
      el.focus()
    }
})
<div id=‘app‘>
    <input type="text">
    <input type="text" v-focus placeholder="我有v-focus,所以,我获取了焦点">
  </div>
 

先总结几个点:

使用 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