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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
Django使用多数据库的方法
Sep 06 Javascript
JS实现520 表白简单代码
May 21 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
vue下的@change事件的实现
Oct 25 Javascript
javascript实现简单搜索功能
Mar 26 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
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现简易版计算器
2020/06/22 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
什么是数组名
2012/05/10 面试题
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
实习公司领导推荐函
2014/05/21 职场文书
市场调查策划方案
2014/06/10 职场文书
政审证明材料
2015/06/19 职场文书
新人入职感言
2015/07/31 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技