中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何在vue中實現自定義指令

發布時間:2021-04-02 16:07:13 來源:億速云 閱讀:159 作者:Leah 欄目:web開發

本篇文章給大家分享的是有關如何在vue中實現自定義指令,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。

自定義指令:

一、屬性:

Vue.directive(指令名稱,function(參數){
  this.el  -> 原生DOM元素
});
<div v-red="參數"></div>

指令名稱:     v-red  ->  red

* 注意: 必須以 v-開頭

拖拽:

二、自定義元素指令:(用處不大)

Vue.elementDirective('zns-red',{
  bind:function(){
    this.el.style.background='red';
  }
});

自定義指令寫法一:

<div id="box">
  <span v-red>
    asdfasd
  </span>
</div>
Vue.directive('red',function(){
  this.el.style.background='red';
});
window.onload=function(){
  var vm=new Vue({
    el:'#box',
    data:{
      msg:'welcome'
    }
  });
};

測試示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net 自定義指令寫法一</title>
<script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script>
<script>
Vue.directive('red',function(){
  this.el.style.background='red';
});
window.onload=function(){
  var vm=new Vue({
    el:'#box',
    data:{
      msg:'welcome'
    }
  });
};
</script>
</head>
<body>
<div id="box">
  <span v-red>
    asdfasd
  </span>
</div>
</body>
</html>

自定義指令寫法二:推薦寫法

<div id="box">
  <span v-red="a">
    asdfasd
  </span>
</div>
//這里的color可以傳參
Vue.directive('red',function(color){
  this.el.style.background=color;
});
window.onload=function(){
  var vm=new Vue({
    el:'#box',
    data:{
      a:'blue'
    }
  });
};

測試示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net 自定義指令寫法二</title>
<script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script>
<script>
//這里的color可以傳參
Vue.directive('red',function(color){
  this.el.style.background=color;
});
window.onload=function(){
  var vm=new Vue({
    el:'#box',
    data:{
      a:'blue'
    }
  });
};
</script>
</head>
<body>
<div id="box">
  <span v-red="a">
    asdfasd
  </span>
</div>
</body>
</html>

自定義指令寫法三:

<div id="box">
  <span v-red>
    asdfasd
  </span>
</div>
Vue.directive('red',{
  bind:function(){
    this.el.style.background='red';
  }
});
window.onload=function(){
  var vm=new Vue({
    el:'#box'
  });
};

自定義指令:拖拽drag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net 自定義指令:拖拽drag</title>
  <script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script>
  <script>
    Vue.directive('drag',function(){
      var oDiv=this.el;
      oDiv.onmousedown=function(ev){
        var disX=ev.clientX-oDiv.offsetLeft;
        var disY=ev.clientY-oDiv.offsetTop;
        document.onmousemove=function(ev){
          var l=ev.clientX-disX;
          var t=ev.clientY-disY;
          oDiv.style.left=l+'px';
          oDiv.style.top=t+'px';
        };
        document.onmouseup=function(){
          document.onmousemove=null;
          document.onmouseup=null;
        };
      };
    });
    window.onload=function(){
      var vm=new Vue({
        el:'#box',
        data:{
          msg:'welcome'
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <div v-drag :></div>
    <div v-drag :></div>
  </div>
</body>
</html>

自定義元素指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net 自定義元素指令</title>
  <style>
    zns-red{
      width:100px;
      background: gray;
      height:100px;
      display: block;
    }
  </style>
  <script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script>
  <script>
    Vue.elementDirective('zns-red',{
      bind:function(){
        this.el.style.background='red';
      }
    });
    window.onload=function(){
      var vm=new Vue({
        el:'#box',
        data:{
          a:'blue'
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <zns-red></zns-red>
  </div>
</body>
</html>

以上就是如何在vue中實現自定義指令,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

曲阳县| 中牟县| 高碑店市| 河南省| 大丰市| 瑞安市| 保德县| 塔城市| 东源县| 乐东| 威海市| 新平| 满洲里市| 南江县| 古交市| 江阴市| 罗平县| 喀喇| 阳高县| 兴和县| 常山县| 洞口县| 连平县| 石首市| 保康县| 松江区| 扶余县| 中牟县| 徐汇区| 开鲁县| 彭山县| 奉贤区| 南开区| 田阳县| 黑龙江省| 平顺县| 淮滨县| 花莲县| 鄄城县| 定结县| 中阳县|