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 相关文章推荐
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
原生js实现无缝轮播图
Jan 11 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
tensorflow更改变量的值实例
2018/07/30 Python
详解重置Django migration的常见方式
2019/02/15 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
python super函数使用方法详解
2020/02/14 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
艺术学院毕业生自我评价
2014/03/02 职场文书
岗位竞聘书范文
2014/03/31 职场文书
安全责任书范文
2014/08/25 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书