vue的内置指令和directive自定义指令的使用
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