Life needs to stop sometimes
— —happiness
DREAM.2020
在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。
Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。
批量注册指令,新建 directives/index.js 文件
import copy from './copy'
import longpress from './longpress'
// 自定义指令
const directives = {
copy,
longpress,
}
export default {
install(Vue) {
Object.keys(directives).forEach((key) => {
Vue.directive(key, directives[key])
})
},
}
复制代码
在 main.js 引入并调用
import Vue from 'vue'
import Directives from './JS/directives'
Vue.use(Directives)
复制代码
指令定义函数提供了几个钩子函数(可选):
bind: 只调用一次,指令第一次绑定到元素时调用,可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。
01
下面分享几个实用的 Vue 自定义指令
复制粘贴指令 v-copy
长按指令 v-longpress
输入框防抖指令 v-debounce
禁止表情及特殊字符 v-emoji
图片懒加载 v-LazyLoad
权限校验指令 v-premission
实现页面水印 v-waterMarker
拖拽指令 v-draggable
v-copy
Hello today
今天,你好
02
vue 异步组件
这种方法主要是使用了 resolve 的异步机制,用 require 代替了 import 实现按需加载
export default new Router({
routes: [
{
path: '/home',',
component: (resolve) => require(['@/components/home'], resolve),
},
{
path: '/about',',
component: (resolve) => require(['@/components/about'], resolve),
},
],
})
![d62c45b3f2d040a1850013fb5ebf97d0.png](https://img-blog.csdnimg.cn/img_convert/d62c45b3f2d040a1850013fb5ebf97d0.png)
![e4b862eab440135f104a29626fbf2f56.gif](https://img-blog.csdnimg.cn/img_convert/e4b862eab440135f104a29626fbf2f56.gif)
![e4b862eab440135f104a29626fbf2f56.gif](https://img-blog.csdnimg.cn/img_convert/e4b862eab440135f104a29626fbf2f56.gif)
![5ecdf07407390908ccb58e6bb7b8c29c.png](https://img-blog.csdnimg.cn/img_convert/5ecdf07407390908ccb58e6bb7b8c29c.png)
![3e779b2665162a5fd2571312c26953e3.png](https://img-blog.csdnimg.cn/img_convert/3e779b2665162a5fd2571312c26953e3.png)
~END