介绍 const mixin =, {
,方法:{
,/* *
,,*,格式化时间
,,*,@param {字符串| | |数字对象数组},dateTime 作用;时间,可以是一个字符串,时间戳,表示时间的对象,日期对象或者* * * * * *表示时间的数组
,,*,@param {字符串},(fmt),安康;格式
,,*,@returns {字符串},返回格式化后的日期时间,默认格式:2018年1月11日,15:00
,,*,@see [momentjs] {@tutorial http://momentjs.cn/}
,,*/formatDate 才能;(dateTime, fmt =, & # 39; YYYY年米月DD日,HH: mm: ss # 39;), {
,,if (! dateTime), {
,,,return & # 39; & # 39;
,,}
,,moment.locale(& # 39;应用# 39;)
,,dateTime =,时刻(dateTime) .format (fmt)
,,return dateTime
,,}
,}
}export defaullt mixin import mixin 得到& # 39;。/mixin # 39;
Vue.mixin(混合) 数据(),{
return {才能
,,,用户名:“等你“,
,,,时间:this.formatDate (new 日期()),
,,加勒比海盗:,(1、2、3、4、5,& # 39;文字& # 39;],
,,,结果:[]
,,}
以前,} //, src/路由器/index.js
import Vue 得到& # 39;vue # 39;
import Router 得到& # 39;vue-router& # 39;
Vue.use(路由器)
export default new 路由器({
,模式:& # 39;历史# 39;
,路线:[
{才能
,,路径:& # 39;/& # 39;
,,重定向:& # 39;/指数# 39;
,,},
{才能
,,,路径:& # 39;/关于# 39;
,,,的名字:& # 39;关于# 39;
,,组件:resolve =祝辞,要求((& # 39;@/页面/关于# 39;],解决)
,,},
{才能
,,,路径:& # 39;/指数# 39;
,,,的名字:& # 39;指数# 39;
,,组件:resolve =祝辞,要求((& # 39;@/页面/指数# 39;],解决)
,,},
{才能
,,,路径:& # 39;/产品# 39;
,,,的名字:& # 39;产品# 39;
,,组件:resolve =祝辞,要求((& # 39;@/页面/产品# 39;],解决)
,,}
,)
}) & lt; p @click=發oadPage(& # 39;指数# 39;)“祝辞Index //,/src/页面索引
& lt; template>
,& lt; div>
& lt;才能p>这是索引页面& lt;/p>
& lt;才能p @click=發oadPage(& # 39;指数# 39;)“祝辞Index
& lt;才能p @click=發oadPage(& # 39;关于# 39;)“祝辞About
& lt;才能p @click=發oadPage(& # 39;产品# 39;)“祝辞Product
,& lt;/div>
& lt;/template>
& lt; script>
默认,export {
,}
& lt;/script>
& lt; style>
& lt;/style>
今天就跟大家聊聊有关如何在Vue项目中使用全局mixin,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
使用场景:货币单位,时间格式。这些如果在用到的页面使用的话代码会重复的很多,所以在全局混入这些实例会减少代码量,可维护性也比较高。
,
步骤1:先定义mixin。js
步骤2:在主要。js文件里面
全局混入是。mixin没有s
步骤3:在你的vue文件里面就可以使用mixin里面定义好的东西比如
这个vue文件的数据源数据里面的时间就是引用混入进来的方法。
<强>使用mixin里的方法
设置路由
页面调用mixin里的loadPage方法
索引页面如下
看完上述内容,你们对如何在Vue项目中使用全局mixin有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
