详解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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
详解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中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python机器学习之神经网络(一)
2017/12/20 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
Python sep参数使用方法详解
2020/02/12 Python
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
毕业生的求职信范文分享
2013/12/04 职场文书
经典演讲稿汇总
2014/05/19 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
公司员工安全协议书
2014/11/21 职场文书
学校2014年度工作总结
2014/12/06 职场文书
校本研修个人总结
2015/02/28 职场文书
管理失职检讨书范文
2015/05/05 职场文书
小学少先队活动总结
2015/05/08 职场文书
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS