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

 更新时间:2019-04-17 21:56:30   作者:佚名   我要评论(0)

本文实例总结了vue自定义指令用法。分享给大家供大家参考,具体如下:
自定义指令:
一、属性:


Vue.directive(指令名称,function(参数){
this.el -> 原生

本文实例总结了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 :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>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>

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

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

您可能感兴趣的文章:

  • 详解在Vue中通过自定义指令获取dom元素
  • vue 中自定义指令改变data中的值
  • Vue自定义指令拖拽功能示例
  • vue.js通过自定义指令实现五分时时彩数据拉取更新的实现方法
  • Vue自定义指令使用方法详解
  • 基于Vue自定义指令实现按钮级权限控制思路详解
  • vue自定义指令实现v-tap插件
  • Vue自定义指令实现checkbox全选功能的方法
  • Vue.directive 自定义指令的问题小结
  • Vue自定义指令详解

相关文章

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

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

    本文实例总结了vue自定义指令用法。分享给大家供大家参考,具体如下: 自定义指令: 一、属性: Vue.directive(指令名称,function(参数){ this.el -> 原生
    2019-04-17
  • 详解Golang利用反射reflect动态调用方法

    详解Golang利用反射reflect动态调用方法

    编程语言中反射的概念 在计算机科学领域,反射是指一类应用,它们能够自描述和自控制。也就是说,这类应用通过采用某种机制来实现对自己行为的描述(self-
    2019-04-17
  • golang如何使用struct的tag属性的详细介绍

    golang如何使用struct的tag属性的详细介绍

    从一个例子说起 我们经常会碰到下面格式的struct定义: type Person struct { Name string `json:"name"` Age int `json:"age"` } 这个struct定义一
    2019-04-17
  • golang分层测试之http接口测试入门教程

    golang分层测试之http接口测试入门教程

    前言 前几话主要讲解关于使用golang进行单元测试,在单元测试的上一层就是接口测试,本节主要讲使用golang进行接口测试,其中主要以http协议的接口测试来讲
    2019-04-17
  • Golang学习笔记之延迟函数(defer)的使用小结

    Golang学习笔记之延迟函数(defer)的使用小结

    golang的defer优雅又简洁, 是golang的亮点之一。defer在声明时不会立即执行,而是在函数return后,再按照先进后出的原则依次执行每个defer,一般用于释放资源
    2019-04-17
  • golang解析域名的步骤全纪录

    golang解析域名的步骤全纪录

    最近遇到了一个问题。 我们的kube-apiserver配置了OIDC认证,OIDC issuer是添加了dns server记录的,但由于某些原因,我需要覆盖掉dns server的解析,改用hos
    2019-04-17
  • golang如何使用sarama访问kafka

    golang如何使用sarama访问kafka

    下面一个客户端代码例子访问kafka服务器,来发送和接受消息。 使用方式 1、命令行参数 $ ./kafkaclient -h Usage of ./client: -ca string CA Certif
    2019-04-17
  • Go语言下载网络图片或文件的方法示例

    Go语言下载网络图片或文件的方法示例

    最近闲来无事, 于是就简单学习了下Go语言的基本的用法。由于实践才是最快的学习方法,所以这里就以下载网络图片或文件入手来学习Go语言 文件下载到本地,
    2019-04-17
  • Golang数组的传递详解

    Golang数组的传递详解

    概念介绍 数组与切片 数组是具有相同唯一类型的一组已编号且长度固定的五分时时彩数据项序列。数组长度最大为2Gb,它是值类型。切片是对数组一个连续片段的引用,所以切
    2019-04-17
  • Golang中如何对MySQL进行操作详解

    Golang中如何对MySQL进行操作详解

    前言 Golang官方并没有提供五分时时彩数据库驱动,但通过database/sql/driver包来提供了实现驱动的标准接口。可以在Github上找到很多开源的驱动。 其中go-sql-driver
    2019-04-17

最新评论