详解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 Global对象
Aug 13 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
vue购物车插件编写代码
Nov 27 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
微信小程序实现批量倒计时功能
Nov 01 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中给js数组赋值方法
2014/03/10 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
浅谈Python 的枚举 Enum
2017/06/12 Python
Python进程间通信之共享内存详解
2017/10/30 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
CSS3 边框效果
2019/11/04 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
清明节演讲稿
2014/05/27 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
离婚协议书的范本
2015/01/27 职场文书
警示教育片观后感
2015/06/17 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
深度学习详解之初试机器学习
2021/04/14 Python
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
在js中修改html body的样式
2021/11/11 Javascript
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫