1.先了解一下,在 vue 中,有很多内置的指令.
比如:
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
2.Vue自定义指令场景小DEMO
// 和自定义过滤器一样,我们这里定义的是全局指令
Vue.directive('focus',{
inserted(el) {
el.focus()
}
})
<div id='app'>
<input type="text">
<input type="text" v-focus placeholder="我有v-focus,所以,我获取了焦点">
</div>
这里放了两个 input ,但是后面的 input 才使用了我们的自定义 v-focus 指令,所以看到了是后面那个文本框获取了焦点,而不是前面一个.
先总结几个点:
使用 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
