• 重庆“轮椅教师”高位截瘫仍坚守讲台 2019-07-07
  • 百度车联网携手宝马 合作伙伴全面升级为国际OEM厂商 2019-07-01
  • 全面从严治党永远在路上——辽宁代表团开放日侧记 2019-07-01
  • 【学习时刻】华侨大学黄日涵:“一带一路”盛会开启合作发展新篇章 2019-06-24
  • 秒变迷弟!吴建豪晒与甄子丹合影:偶像给我签名 2019-06-20
  • 军统头目戴笠留下哪些巨额遗产 令蒋介石身边人惊诧 2019-06-20
  • 初春喝藿香汤 解表化湿,散寒温经 2019-06-18
  • 新华时评:磋商,不等于反复折腾 2019-06-09
  • 天山特克斯峡谷 中国国家地理网 2019-06-08
  • 端午小长假珠海口岸将迎双向客流高峰 2019-06-08
  • 王朝崩塌!恒大半个月内双线出局 卡帅敲响下课警钟 2019-06-07
  • 一周人事:国务院发布任免刘伟当选北京市总工会主席 2019-06-07
  • 敞篷式设计 日产聆风Open Car官图发布 2019-06-06
  • 习近平为传统文化“代言” 2019-06-05
  • 奋力谱写新时代追赶超越新篇章——访陕西省委书记胡和平 2019-06-04
  • 香港赛马会财神网站:vue自定义指令用法经典实例小结

    香港赛马会网站惠泽社绝杀八码 www.mwcrz.tw  更新时间: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.mwcrz.tw 自定义指令写法一</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.mwcrz.tw 自定义指令写法二</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.mwcrz.tw 自定义指令:拖拽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.mwcrz.tw 自定义元素指令</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代码运行工具//tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

    相关文章

    • Vuejs第九篇之组件作用域及props数据传递实例详解

      Vuejs第九篇之组件作用域及props数据传递实例详解

      这篇文章主要介绍了Vuejs第九篇之组件作用域及props数据传递实例详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
      2016-09-09
    • Vue + Vue-router 同名路由切换数据不更新的方法

      Vue + Vue-router 同名路由切换数据不更新的方法

      本篇文章主要介绍了Vue + Vue-router 同名路由切换数据不更新的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
      2017-11-11
    • vue.js全局API之nextTick全面解析

      vue.js全局API之nextTick全面解析

      本篇文章主要介绍了vue.js全局API之nextTick全面解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2017-07-07
    • Vue+Vux项目实践完整代码

      Vue+Vux项目实践完整代码

      本文给大家分享一段详细的代码给大家介绍Vue+Vux项目实践思路,需要的朋友可以参考下
      2017-11-11
    • vue webpack开发访问后台接口全局配置的方法

      vue webpack开发访问后台接口全局配置的方法

      今天小编就为大家分享一篇vue webpack开发访问后台接口全局配置的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
      2018-09-09
    • 利用Vue实现移动端图片轮播组件的方法实例

      利用Vue实现移动端图片轮播组件的方法实例

      轮播图是前端很常用的一个网页特效,几乎所有的网站或多或少都会用到这个特效。下面这篇文章主要给大家介绍了关于利用Vue实现移动端图片轮播组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
      2017-08-08
    • 详解Element 指令clickoutside源码分析

      详解Element 指令clickoutside源码分析

      这篇文章主要介绍了详解Element 指令clickoutside源码分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2019-02-02
    • 在vue中实现点击选择框阻止弹出层消失的方法

      在vue中实现点击选择框阻止弹出层消失的方法

      今天小编就为大家分享一篇在vue中实现点击选择框阻止弹出层消失的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
      2018-09-09
    • VuePress 静态网站生成方法步骤

      VuePress 静态网站生成方法步骤

      这篇文章主要介绍了VuePress 静态网站生成方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2019-02-02
    • 初识简单却不失优雅的Vue.js

      初识简单却不失优雅的Vue.js

      这篇文章主要为大家介绍了简单却不失优雅、小巧而不乏大匠的Vue.js,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
      2016-09-09

    最新评论

  • 重庆“轮椅教师”高位截瘫仍坚守讲台 2019-07-07
  • 百度车联网携手宝马 合作伙伴全面升级为国际OEM厂商 2019-07-01
  • 全面从严治党永远在路上——辽宁代表团开放日侧记 2019-07-01
  • 【学习时刻】华侨大学黄日涵:“一带一路”盛会开启合作发展新篇章 2019-06-24
  • 秒变迷弟!吴建豪晒与甄子丹合影:偶像给我签名 2019-06-20
  • 军统头目戴笠留下哪些巨额遗产 令蒋介石身边人惊诧 2019-06-20
  • 初春喝藿香汤 解表化湿,散寒温经 2019-06-18
  • 新华时评:磋商,不等于反复折腾 2019-06-09
  • 天山特克斯峡谷 中国国家地理网 2019-06-08
  • 端午小长假珠海口岸将迎双向客流高峰 2019-06-08
  • 王朝崩塌!恒大半个月内双线出局 卡帅敲响下课警钟 2019-06-07
  • 一周人事:国务院发布任免刘伟当选北京市总工会主席 2019-06-07
  • 敞篷式设计 日产聆风Open Car官图发布 2019-06-06
  • 习近平为传统文化“代言” 2019-06-05
  • 奋力谱写新时代追赶超越新篇章——访陕西省委书记胡和平 2019-06-04
  • 快彩乐老11选5遗漏 河北20选5走势 中国足彩网比分直 快乐赛车开奖 宝石女王客服 今天福彩3d能出什么号码查询 pk10开奖记录直播 汉诺威96 波斯波斯利??塔什干棉农 浙江11选5开奖走势图