详解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 乱码问题
Aug 06 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
php修改时间格式的代码
2011/05/29 PHP
php批量上传的实现代码
2013/06/09 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php使用curl访问https示例分享
2014/01/17 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
php微信开发之关注事件
2018/06/14 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
javascript连续赋值问题
2015/07/08 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
Python生成词云的实现代码
2020/01/14 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
python打开音乐文件的实例方法
2020/07/21 Python
哈理工毕业生的求职信
2013/12/22 职场文书
机电一体化专业求职信
2014/07/22 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
SQL Server使用导出向导功能
2022/04/08 SQL Server