Vue之mixin全局的用法详解


Posted in Javascript onAugust 22, 2018

先贴上官方定义。

个人觉得全局mixin就是给全部Vue文件添加一些公用的实例(方法,过滤器and so on)

使用场景:货币单位,时间格式。这些如果在用到的页面使用的话代码会重复的很多,所以在全局混入这些实例会减少代码量,可维护性也比较高。

ex:

step1: 先定义mixin.js

const mixin = {
 methods: {
  /**
   * 格式化时间
   * @param {string|number|object|Array} dateTime - 时间,可以是一个字符串、时间戳、表示时间的对象、Date对象或者******表示时间的数组
   * @param {string} [fmt] - 格式
   * @returns {string} 返回格式化后的日期时间,默认格式:2018年1月11日 15:00
   * @see [momentjs]{@tutorial http://momentjs.cn/}
   */
  formatDate (dateTime, fmt = 'YYYY年M月DD日 HH:mm:ss') {
   if (!dateTime) {
    return ''
   }
   moment.locale('zh-CN')
   dateTime = moment(dateTime).format(fmt)
   return dateTime
  }
 }
}export defaullt mixin

step2:在main.js文件里面

import mixin from './mixin'
Vue.mixin(mixin)

全局混入是.mixin没有s

step3:在你的vue文件里面就可以使用mixin里面定义好的东西比如

 

data() {
  return {
   userName: "等你",
   time: this.formatDate(new Date()),
   arr: [1,2,3,4,5,'文字'],
   result: []
  }
 }

这个vue文件的数据源data里面的time就是引用混入进来的方法。

使用mixins里的方法

设置路由

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
 mode:'history',
 routes: [
  {
   path:'/',
   redirect:'/index'
  },
  {
   path: '/about',
   name: 'About',
   component:resolve => require(['@/pages/About'],resolve)
  },
  {
   path: '/index',
   name: 'Index',
   component:resolve => require(['@/pages/Index'],resolve)
  },
  {
   path: '/product',
   name: 'Product',
   component:resolve => require(['@/pages/Product'],resolve)
  }
 ]
})

页面调用mixins里的loadPage方法

<p @click="loadPage('Index')">Index</p>

Index页面如下

// src/pages/Index
<template>
 <div>
  <p>这是index页面</p>
  <p @click="loadPage('Index')">Index</p>
  <p @click="loadPage('About')">About</p>
  <p @click="loadPage('Product')">Product</p>
 </div>
</template>
<script>
 export default{

 }
</script>
<style>

</style>

至此,全局混入大功告成,有心的读者也可以试试局部混入(主要用于后期代码维护)。

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

Javascript 相关文章推荐
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
js实现目录定位正文示例
Nov 14 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
vue实现多级菜单效果
Oct 19 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
React中使用UEditor百度富文本的方法
Aug 22 #Javascript
VUE 全局变量的几种实现方式
Aug 22 #Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 #Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 #Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 #Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 #Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 #Javascript
You might like
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
python文件比较示例分享
2014/01/10 Python
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
Python手机号码归属地查询代码
2016/05/04 Python
Python 常用string函数详解
2016/05/30 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
python else语句在循环中的运用详解
2020/07/06 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
学年自我鉴定
2014/01/16 职场文书
新闻编辑求职信
2014/04/09 职场文书
养牛场项目建议书
2014/05/13 职场文书
销售合作意向书范本
2015/05/08 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
Redis唯一ID生成器的实现
2022/07/07 Redis