详解Vue.js Mixins 混入使用


Posted in Javascript onSeptember 15, 2017

Mixins一般有两种用途:

1、在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染。

2、很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用。

一、Mixins的基本用法

我们现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:“数据发生变化”.

代码实现过程:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="../assets/js/vue.js"></script>
  <title>Mixins Option Demo</title>
</head>
<body>
  <h1>Mixins Option Demo</h1>
  <hr>
  <div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加数量</button></P>
  </div>
 
  <script type="text/javascript">
    //额外临时加入时,用于显示日志
    var addLog={
      updated:function(){
        console.log("数据放生变化,变化成"+this.num+".");
      }
    }
    var app=new Vue({
      el:'#app',
      data:{
        num:1
      },
      methods:{
        add:function(){
          this.num++;
        }
      },
      mixins:[addLog]//混入
    })
  </script>
</body>
</html>

二、mixins的调用顺序

从执行的先后顺序来说,都是混入的先执行,然后构造器里的再执行,需要注意的是,这并不是方法的覆盖,而是被执行了两边。

在上边的代码的构造器里我们也加入了updated的钩子函数:

updated:function(){


   console.log("构造器里的updated方法。")


},

这时控制台输出的顺序是:

mixins数据放生变化,变化成2.
构造器里的updated方法。

PS:当混入方法和构造器的方法重名时,混入的方法无法展现,也就是不起作用。

三、全局API混入方式

我们也可以定义全局的混入,这样在需要这段代码的地方直接引入js,就可以拥有这个功能了。我们来看一下全局混入的方法:

Vue.mixin({


  updated:function(){


    console.log('我是全局被混入的');


  }


})

PS:全局混入的执行顺序要前于混入和构造器里的方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
项目实践之javascript技巧
Dec 06 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 #Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 #Javascript
vue实现登陆登出的实现示例
Sep 15 #Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 #Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 #jQuery
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 #Javascript
vue用addRoutes实现动态路由的示例
Sep 15 #Javascript
You might like
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
详解python开发环境搭建
2016/12/16 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
在django模板中实现超链接配置
2019/08/21 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
自主招生自荐信
2013/12/08 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
小学生作文评语集锦
2014/12/25 职场文书
课外活动总结
2015/02/04 职场文书
财务管理制度范本
2015/08/04 职场文书
高考升学宴主持词
2019/06/21 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
python opencv通过按键采集图片源码
2021/05/20 Python
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript