随笔 - 13  文章 - 1 评论 - 0 trackbacks - 0

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

 

 

posted on 2020-07-13 20:19  水晶草  阅读(16)  评论(0编辑  收藏