脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue自定义指令用法

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

 更新时间：2019年03月16日 11:08:42   作者：白杨-M  
这篇文章主要介绍了vue自定义指令用法,结合实例形式总结分析了vue自定义指令常见写法与相关操作注意事项,需要的朋友可以参考下

本文实例总结了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • vite+vue3中require is not defined问题及解决

    vite+vue3中require is not defined问题及解决

    这篇文章主要介绍了vite+vue3中require is not defined问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • Vue中使用vee-validate表单验证的方法

    Vue中使用vee-validate表单验证的方法

    vee validate 一个轻量级的 vue表单验证插件。接下来通过本文给大家分享Vue中使用vee-validate表单验证的方法，需要的朋友参考下吧
    2018-05-05
  • vue实现界面滑动效果

    vue实现界面滑动效果

    这篇文章主要为大家详细介绍了vue实现界面滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Vue--Router动态路由的用法示例详解

    Vue--Router动态路由的用法示例详解

    这篇文章主要介绍了Vue--Router动态路由的用法,很多时候，我们需要将给定匹配模式的路由映射到同一个组件，在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数，本文对Vue Router动态路由相关知识给大家介绍的非常详细，需要的朋友参考下吧
    2022-08-08
  • 详解vue3+element-plus实现动态菜单和动态路由动态按钮(前后端分离)

    详解vue3+element-plus实现动态菜单和动态路由动态按钮(前后端分离)

    本文需要使用axios,路由,pinia,安装element-plus,并且本文vue3是基于js而非ts的,这些环境如何搭建不做描述,需要读者自己完成,感兴趣的朋友跟随小编一起看看吧
    2023-11-11
  • Vue动态设置el-table操作列的宽度自适应

    Vue动态设置el-table操作列的宽度自适应

    这篇文章主要给大家介绍了关于Vue如何动态设置el-table操作列的宽度自适应,很多页面都需要用到表格组件el-table,如果没有给el-table-column指定宽度,默认情况下会平均分配给剩余的列,需要的朋友可以参考下
    2023-07-07
  • Vue2.0使用过程常见的一些问题总结学习

    Vue2.0使用过程常见的一些问题总结学习

    本篇文章主要介绍了Vue2.0使用过程常见的一些问题总结学习，详细的介绍了使用中会遇到的各种错误，有兴趣的可以了解一下。
    2017-04-04
  • vue.js父子组件传参的原理与实现方法

    vue.js父子组件传参的原理与实现方法

    这篇文章主要介绍了vue.js父子组件传参的原理与实现方法,结合实例形式分析了vue.js父子组件传参的基本原理、实现方法与相关操作注意事项,需要的朋友可以参考下
    2023-04-04
  • vue中实现回车键登录功能

    vue中实现回车键登录功能

    这篇文章主要介绍了vue中实现回车键登录功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • Vue.extend 编程式插入组件的实现

    Vue.extend 编程式插入组件的实现

    这篇文章主要介绍了Vue.extend 编程式插入组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论