VUE学习：vue基础24————自定义指令

最新推荐文章于 2024-06-28 11:31:39 发布

北凉冬

最新推荐文章于 2024-06-28 11:31:39 发布

阅读量177

点赞数 2

分类专栏：新星计划 vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/117420101

版权

vue.js 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

新星计划

15 篇文章 0 订阅

订阅专栏

提示：
本文为VUE栏目：VUE学习：vue基础24————自定义指令

VUE学习：vue基础24————自定义指令

前言
自定义指令
- 演示：自定义全局指令和私有指令
- 自定义指令案例

前言

本文vue框架中指令。

提示：以下是本篇文章正文内容，下面案例可供参考

自定义指令

演示：自定义全局指令和私有指令

<body>
<div id="app">
   <input type="text" v-focus placeholder="请输入用户名">
   <p v-red>你看看我红吗</p>
   <p v-test>测试指令</p>
   <p v-test="100" v-color="'pink'">测试指令</p>
   <p v-test="50+50">测试指令</p>
</div>
</body>
<script>
   /*全局指令*/
   Vue.directive('focus',{
      /*inserted函数表示当绑定了该指令的元素被插入到dom中时自动触发*/
      inserted(el){
         /*获得焦点*/
         el.focus();
      }
   });
   let vm = new Vue({
      el: "#app",
      data: {},
      methods: {},
      directives:{
         red:{
            inserted(el){
               el.style.color="red";
            }
         },
         test:{
            bind(el){
               console.log("bind函数只会调用一次，指令第一次被绑定到元素时触发。");
            },
            inserted(el,binding,vnode,oldVnode){
               /*
               * el表示绑定了该指令的dom对象
               * binding是一个包含了指令各种信息的对象（指令名,指令值,指令表达式和一个包含了修饰符的对象）
               * */

               console.log("*************");
               console.log(el);
               console.log(binding);
               console.log(vnode);
               console.log("*************");


               console.log("inserted函数在组件被渲染时调用。");
            },
            update(){
               console.log("update函数在所有组件的VNode对象更新时调用");
            },
            componentUpdated(){
               console.log("指令所在组件的VNode对象和其子类VNode对象全部更新后调用")
            },
            unbind(){
               console.log("unbind在指令解绑时调用")
            }
         },
         color:{
            inserted(el,bind){
               let color=bind.value || "red";
               el.style.color=color;
            }
         }
      }
   });
</script>

在这里插入图片描述

自定义指令案例

自定义sub指令，参数为延迟时间

<body>
<div id="app">
   <button type="button" v-sub="{fn:submit,time:3000}">提交</button>
</div>
</body>
<script>
   let vm = new Vue({
      el: "#app",
      data: {},
      methods: {
         submit(){
            console.log("数据提交");
         }
      },
      directives:{
         sub:{
            inserted(el,bind){
               let fn=bind.value.fn;
               let time=bind.value.time;

               el.flag=true;   /*设置按钮默认可以点击*/
               el.handler=function () {
                  if(el.flag){
                     fn();
                     el.disabled=true;
                     el.flag=false;
                  }
                  el.time=setTimeout(()=>{
                     el.disabled=false;
                     el.flag=true;
                  },time);
               }
               /*给DOM绑定单击事件*/
               el.addEventListener("click",el.handler);
            }
         }
      }
   });
</script>

在这里插入图片描述

北凉冬

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
VUE学习：vue基础24————自定义指令

提示：本文为VUE栏目：VUE学习：vue基础24————自定义指令VUE学习：vue基础24————自定义指令前言自定义指令演示：自定义全局指令和私有指令自定义指令案例前言本文vue框架中指令。提示：以下是本篇文章正文内容，下面案例可供参考自定义指令演示：自定义全局指令和私有指令<body><div id="app"> <input type="text" v-focus placeholder="请输入用户名"> <p v-re
复制链接

扫一扫

专栏目录