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

提示:
本文为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>

VUE学习:vue基础24————自定义指令_第1张图片

自定义指令案例

自定义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>

VUE学习:vue基础24————自定义指令_第2张图片

你可能感兴趣的:(新星计划,vue.js,vue.js)