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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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函数的实现原理及性能分析(一)
2015/05/13 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
销售人员求职信
2014/07/22 职场文书
教师演讲稿开场白
2014/08/25 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
论群众路线学习笔记
2014/11/06 职场文书
九九重阳节致辞
2015/07/31 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
利用python进行数据加载
2021/06/20 Python
springboot如何初始化执行sql语句
2021/06/22 Java/Android
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS