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 相关文章推荐
JS获取时间的方法
Jan 21 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
JavaScript实现短暂提示框功能
Apr 04 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
回顾Javascript React基础
Jun 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
javascript GUID生成器实现代码
2009/10/31 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
js有序数组的连接问题
2013/10/01 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
js 通用订单代码
2013/12/23 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
DOM 事件流详解
2015/01/20 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python类的继承和多态代码详解
2017/12/27 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python判断有效的数独算法示例
2019/02/23 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
关于python 跨域处理方式详解
2020/03/28 Python
什么是python类属性
2020/06/10 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
什么是唯一索引
2015/07/05 面试题
高中军训感想300字
2014/03/04 职场文书
农林环境专业求职信
2014/03/13 职场文书
学生手册评语
2014/05/05 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
高中学生自我评价范文
2014/09/23 职场文书
2016新年慰问信范文
2015/03/25 职场文书
上学路上观后感
2015/06/16 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery