vue自定义指令用法经典实例小结


Posted in Javascript onMarch 16, 2019

本文实例总结了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>3water.com 自定义指令写法一</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>3water.com 自定义指令写法二</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>3water.com 自定义指令:拖拽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 :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
    <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
  </div>
</body>
</html>

自定义元素指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 自定义元素指令</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>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
图片Slider 带左右按钮的js示例
Aug 30 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 #jQuery
基于vue通用表单解决方案的思考与分析
Mar 16 #Javascript
vue+php实现的微博留言功能示例
Mar 16 #Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 #Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 #Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 #Javascript
vue过滤器用法实例分析
Mar 15 #Javascript
You might like
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
python实现马丁策略的实例详解
2021/01/15 Python
党员个人对照检查材料思想汇报
2014/09/16 职场文书
关于长城的导游词
2015/01/30 职场文书
中国世界遗产导游词
2015/02/13 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
学前教育见习总结
2015/06/23 职场文书
手残删除python之后的补救方法
2021/06/26 Python
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript