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 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
iframe 异步加载技术及性能分析
Jul 19 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
javascript数据类型详解
Feb 07 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 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批量删除数据
2007/01/18 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
YII实现分页的方法
2014/07/09 PHP
php统计数组元素个数的方法
2015/07/02 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
自制PHP框架之设计模式
2017/05/07 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
Jquery 学习笔记(一)
2009/10/13 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Pandas分组与排序的实现
2019/07/23 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
五四青年节优秀演讲稿范文
2014/05/28 职场文书
保护环境的标语
2014/06/09 职场文书
财务务虚会发言材料
2014/10/20 职场文书
六年级小学生评语
2014/12/26 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
投诉书范文
2015/07/02 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis