一、Vue.js之定义指令介绍

前面我们学习了一些Vue.js给我们提供的指令，那么我们知道指令就是帮助我们去简化DOM操作的，相当于对基础 DOM操作的一种封装。那么我们仅仅使用这些Vue.js提供给我们的指令还是不够的，当我们希望使用一些内置指令不具备的 DOM 功能时，可以进行自定义指令设置。

自定义指令分为：自定义全局指令和自定义局部指令。

二、自定义全局指令

• 指的是可以被任意 Vue 实例或组件使用的指令。

<body><div id="app"><input type="text" v-focus.a.b="100 + 1"></div><script src="../01.vue.js入门/js/vue-2.6.14.js"></script><script>Vue.directive('focus',{inserted(el,binding) {console.log(binding);el.focus();}})new Vue({el: '#app',data: {}})</script>
</body>

三、自定义局部指令

• 指的是可以在当前 Vue 实例或组件内使用的指令。

<body><div id="app"><input type="text" v-focus></div><div id="app2"><input type="text" v-focus></div><script src="../01.vue.js入门/js/vue-2.6.14.js"></script><script>new Vue({el: '#app',data:{},directives: {focus: {inserted(el) {el.focus();}}}})new Vue({el: '#app2'})</script>
</body>

（13）Vue.js 自定义指令相关推荐

Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
Vue.js 自定义指令
简介除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 D ...
VUE通过自定义指令，只允许输入大写英文以及数字
在写之前需要知道几个功能对象的作用: 首先输入框输入的情况有键盘输入和粘贴输入的情况用到的组件有: input.onblur-onblur: 事件会在对象失去焦点时发生.Onblur 经常用于Jav ...
VUE：自定义指令（directives ）选项的用法
自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...
vue 项目自定义指令实现防抖
自定义v-debounce指令实现click事件防抖该指令绑定的方法暂不支持传递参数,如需要传参数可以参考另一篇博客,防抖组件的实现工具uitls文件夹创建debounce.js文件代码如下 i ...
VUE使用自定义指令对普通 DOM 元素进行底层操作
使用vue的自定义指令来整合某个重复使用的底层操作举个聚焦输入框的例子,如下: 当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作).事实上,只要你在打开这 ...
【前端技巧】JS自定义指令 —— 无限滚动(改写el-table-infinite-scroll)
@Author:Outman @Date:2023-03-08 JS自定义指令 -- 无限滚动(改写el-table-infinite-scroll) 自定义指令实现 // directives/in ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...

（13）Vue.js 自定义指令

一、Vue.js之定义指令介绍

二、自定义全局指令

三、自定义局部指令

（13）Vue.js 自定义指令相关推荐

最新文章

热门文章