VUE使用自定义指令对普通 DOM 元素进行底层操作

使用vue的自定义指令来整合某个重复使用的底层操作

举个聚焦输入框的例子，如下：

当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

// 在main.js中注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus()}
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {focus: {// 指令的定义inserted: function (el) {el.focus()}}
}

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>

另外一个例子：
全局a标签需要href参数来实现鼠标跳转路由，如果有很多标签的href的路由一样，参数不同，则可以使用自定义指令：

// bindling 中存的是a标签传来的值，可以是对象
Vue.directive('to-where', function(el, binding) {const id = Base64.encode(binding.value.id)el.href = '/xxx/xxx/xxx?id=' + id
})

<a v-to-where="{id: yourId}" /> // to-where就是指令的名称

另外，如果想禁止dom的原生属性，例如a标签跳转路由后会刷新页面，使用vue的prevent属性，在click中增加

<a v-to-where="{id: yourId}" @click.prvent="yourFunction" />

VUE使用自定义指令对普通 DOM 元素进行底层操作相关推荐

Vue.js 自定义指令
简介除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 D ...
vue directives自定义指令的使用
有的情况下,需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. 自定义指令使用情景: 1.按钮级别权限的控制. 2.按钮的波纹动态效果. 3.一键copy的功能. 4.输入框自动聚焦. ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
VUE：自定义指令（directives ）选项的用法
自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...
VUE通过自定义指令，只允许输入大写英文以及数字
在写之前需要知道几个功能对象的作用: 首先输入框输入的情况有键盘输入和粘贴输入的情况用到的组件有: input.onblur-onblur: 事件会在对象失去焦点时发生.Onblur 经常用于Jav ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
vue 项目自定义指令实现防抖
自定义v-debounce指令实现click事件防抖该指令绑定的方法暂不支持传递参数,如需要传参数可以参考另一篇博客,防抖组件的实现工具uitls文件夹创建debounce.js文件代码如下 i ...
Selenium(2): DOM元素定位、操作
DOM 元素定位定位过程 WebDriver对象的findElement函数定义一个Web页面元素: findElements方法可以定位页面的多个元素: 使用WebElement对象来存储定位的元 ...

VUE使用自定义指令对普通 DOM 元素进行底层操作

举个聚焦输入框的例子，如下：

VUE使用自定义指令对普通 DOM 元素进行底层操作相关推荐

最新文章

热门文章