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 相关文章推荐
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
webpack4简单入门实例
Sep 06 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
深入学习JavaScript中的bom
May 27 Javascript
js实现简单商品筛选功能
Feb 02 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
桌面中心(二)数据库写入
2006/10/09 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
一个符号插入器 中用到的js代码
2007/09/04 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
python实现在线翻译
2020/06/18 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
自荐信的禁忌和要点
2013/10/15 职场文书
好人好事事迹材料
2014/02/12 职场文书
出国留学自荐信模板
2015/03/06 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js