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

网络编程 2024/12/31 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

本文实例总结了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="/UploadFiles/2021-04-02/vue.min.js">

自定义指令写法二：推荐写法


<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="/UploadFiles/2021-04-02/vue.min.js">

自定义指令写法三：


<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="/UploadFiles/2021-04-02/vue.min.js">

自定义元素指令


<!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="/UploadFiles/2021-04-02/vue.min.js">

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。

                                
                                
                                    vue,自定义指令 
                                
                                    标签：
                                        vue,自定义指令
                                     

                                蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“vue自定义指令用法经典实例小结”

暂无vue自定义指令用法经典实例小结的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月31日

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

vue,自定义指令

vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】

简单易扩展可控性强的Jquery转盘抽奖程序

评论“vue自定义指令用法经典实例小结”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接