网站 系统设置,小程序diy制作平台,自己做简单网站,百度推广登陆入口这篇文章会教大家如何实现全局自定义指令和组件自定义指令 #x1f4d3;全局自定义指令和组件自定义指令的区别#xff0c;除了写法不同和作用不同#xff0c;其他的包括生命周期的使用方法都是一致的#xff0c;全局自定义指令在main.ts中注册后整个项目都可以使用#x…这篇文章会教大家如何实现全局自定义指令和组件自定义指令 全局自定义指令和组件自定义指令的区别除了写法不同和作用不同其他的包括生命周期的使用方法都是一致的全局自定义指令在main.ts中注册后整个项目都可以使用而组件自定义指令只能在组件中注册并且在组件中使用。
1全局自定义指令 首先我们可以了解下为什么要创建全局自定义指令首先vue官方给我们提供了一些指令那些指令虽然很强大但是有可能会不适合当前公司的一个开发的实际的业务逻辑所以这时候我们就得需要通过官方提供的方法创建输入自己的指令了。 下面根据我的思路来一步步的设计全局自定义组件吧
1.1 创建组件的执行函数 在项目中新建文件夹directive在文件夹里新建idnex.ts文件在文件里写处理逻辑 1.2 在里面写写我们的指令的生命周期和处理代码
export default {click: {beforeMount(el:any, binding:any, vnode:any) { //元素被挂载到dom之前调用console.log(beforeMount);},mounted(el:any, binding:any, vnode:any) {//元素被挂载到dom之后调用console.log(mounted);},beforeUpdate(el:any, binding:any, vnode:any, prevvnode:any) {//vnode(虚拟节点)更新前调用console.log(beforeUpdate);},updated(el:any, binding:any, vnode:any, prevvnode:any) {//vnode(虚拟节点)更新后调用console.log(updated);},beforeUnmount(el:any, binding:any, vnode:any) {//vnode(虚拟节点)卸载前调用console.log(beforeUnmount);},unmounted(el:any, binding:any, vnode:any) {//vnode(虚拟节点)卸载后调用console.log(unmounted);},},
};如上方所示vue的创建指令的方法处理接受指令名称的话还需要接受我们指令的生命周期vue创建指令的方法接受2个参数第一个参数是指令名称第二个参数是对象对象里面的属性是指令的生命周期属性值就是在当前生命周期所要执行的函数。 这里在解释下为什么要元素要挂在到dom上还有解释什么是vnode 首先你页面中的元素最终都会变成真正的dom元素并讲这个元素放在页面上这个过程解释挂载在挂载这个元素之前vue首先会创建组件的vnode也就是虚拟节点然后在将组件的虚拟节点vnode转换成真实的dom元素并将其插入到页面的特定位置上去所以这就是vnode元素在页面上显示之前需要在vnode上创建虚拟节点 至于为什么要将元素挂载到dom我们知道vue的整个体系都是需要dom来支撑的因为只有将元素插入到dom中这个元素才会在页面上显示而且只有将这个元素插入挂载到dom中vue才能管理他的生命周期响应式事件处理等。 指令的生命周期和组件的生命周期很相似。很多地方都基本一致 1.3 在main.ts中注册指令
import { createApp } from vue;
import App from ./App.vue;
import router from ./router;
import ElementPlus from element-plus;
import element-plus/dist/index.css;
import store from ./store;
import dir from ./directive/index; //从这里导入我们创建的指令的生命周期const app createApp(App); //创建app实例app.directive(myDirective, dir.click); //注册指令需要调用app的directive方法这个方法传入2个参数第一个参数就是我们的组件名称第二个参数就是我们在directive文件夹里写的对象对象里有指令的生命周期方法app.use(router).use(ElementPlus).use(store).mount(#app); 这里要注意下注册指令一定要比挂载app之前要比mount(#app)更早执行不然会注册失败
1.4 在页面上使用 当我们注册完成后就能在元素上使用了如下 divbutton v-myDirective{{ butt }}/buttonbutton clickbuttfn修改 /buttonRouterView //div 这里我给button加上了一个指令这里要注意下我们在页面上使用指令时得在我们注册时写的指令名称前加上 v-
1.5 获取元素的dom并修改 现在在页面上元素使用还不算达到我们的预期这时候我们需要看如何操作元素这才算达到我们的预期首先我们在directive文件夹里找到我们定义的指令生命周期生命周期的属性值接受一些参数我们打印下这些参数是啥 看下页面上显示的结果 我们能看到el居然是我们在页面上绑定元素的元素对象我们可以通过这个元素对象来修改这个元素的属性或者是进行一些事件操作了。 比如我要修改元素的颜色 这时候还是有些不够的假设我们想实现一个click的功能如果用指令实现咧这时候我们就需要靠函数中另外一个参数binding通过这个参数来接收从页面上传入的一些值包括函数 我们在页面上定义一个函数通过 指令函数 的方法将指令传给函数
templatedivbutton v-myDirective butt{{ butt }}/button //将函数传给指令RouterView //div
/template
script langts
import router from /router
import { ref } from vue
export default ({setup() {const butt ref(跳转)const fn () { //定义一个函数router.push(/user)}return {fn,butt}}
})/script 在我们的指令生命周期函数里就能接受这个函数并写入跳转的指令
export default {click: {mounted(el: any, binding: any) {//元素被挂载到dom之后调用el.addEventListener(click,binding.instance.fn) //通过binding.instance来获取我们之前传入的参数在通过这个元素对象写入一个点击事件就实现了类似于click一样的功能了},},
};这样我们的自定义指令也有和click一样的功能啦这只是简单的用法当配合指令的生命周期函数后能够实现的东西非常非常的多。
2组件自定义指令 组件自定义指令的生命周期和用法和全局自定义指令的用法一致只是写法不同而已看下方的例子 templatedivbutton v-myDirective butt{{ butt }}/buttondiv v-color red我是组件内指令/div //2.将定义好的组指令放在页面上使用RouterView //div
/template
script langts
import router from /router
import { ref } from vue
export default ({setup() {const butt ref(跳转)const fn () {router.push(/user)}return {fn,butt}},directives:{ //1.在组件里添加directives属性属性值是对象对象的属性就是我们的指令名称属性值也是一个对象在对象里写生命周期函数即可color:{mounted(el:any,bind:any){el.style.colorbind.value}}}
})/script 最近烦心的事不少感觉诸事不顺从来没觉得这样过。因为一件事情的出现导致我的梦想我的一切规划都没了 很难过愁啊。不知道如何取舍感觉都在将他们的想法强加给我用所谓的大义来压我。很累很累
