申博太阳城亚洲微信支付充值,今年6月,该私募总经理助理曾向记者娓娓道来,因为目前EB的条款是高度定制化的,没有买方的事先深度参与,许多条件也不好达成。 完美世界影视制片人何静: 还有一些网站就索性退剧。在梦幻般的游戏世界,你可以用拳头、刀枪对付无脸恶棍。因此二三线的电视台会陷入小制作的恶性循环。
完美世界影视制片人何静: 回顾2012年,应该说很多的烂剧,我们就从年中6月份上海节我就能看到,冷静的场馆,不靠谱的剧的海报,《和尚连》啊、《女尼排》啊,各种的过度消费抗战,等等这种出来。所以很多投资人都不提现。常州鼎胜网络科技有限公司11月9日发布的停业公告。”魏海全告诉有槽。
口碑宝宝可与支付宝好友互相转增集齐“吃宝”“喝宝”“玩宝”“乐宝”四类“口碑宝宝”,即可参与抽奖。下面说说电商圈的事。北上广及江浙地区车票最难买结合历年春运抢票数据和2017年春运安排,360浏览器根据近几年春运购票数据发布了春运客运预测。今年排名第五位的RosannaPansino写的菜谱书单价18美元,去年也卖出了12万本。
? ? ?? 在我们做项目的时候,往往有很多代码逻辑是通用的,比如说,业务逻辑类型的判断,时间戳的转换,url中字符串的截取等等,这些函数如果在每个需要的页面中都加入的话,不仅加重了当前页面的逻辑复杂程度,还会占用大量原本可以省略的内存。因此,将这些代码整理出来统一管理是很有必要的,在vue项目中,我们都知道模块化和组件化,但vue的框架中还有一个很好用的知识点,就是mixin。
? ? ? mixin不仅可以存放data、watch、methods、computed等,还可以存放Vue的生命周期,是不是很神奇呢?
? ?? 通过点击按钮“点击我”,实现“难受”和“极好的”相互切换,首先上效果图:
? ?? 初始页面:
?
? ? ?? 子组件1和子组件2都可以通过“点击我”,实现状态改变,通过触发子组件1的按钮1次,触发子组件2的按钮2次,效果如下:
? ? ? 项目的核心结构如下:
? ? ?? 其中,新增了mixin文件夹,新增了Child1.vue和Child2.vue,更改HelloWorld.vue为Father.vue,因为本人有代码洁癖,觉得vueRouter默认的hash模式,会使得前端路由有些难看,所以改成了history模式,项目更改的文件代码如下:
Child1.vue
<template>
<div class="Child1">
<h1>我是子组件1</h1>
<p>我现在很{{status}}</p>
<button @click="submitChange">点击我</button>
</div>
</template>
<script>
import { Happy } from '../mixin/showHappy'
export default {
name: "Child1",
mixins: [Happy]
}
</script>
Child2.vue?
<template>
<div class="Child2">
<h1>我是子组件2</h1>
<p>我现在很{{status}}</p>
<button @click="submitChange">点击我</button>
</div>
</template>
<script>
import { Happy } from '../mixin/showHappy'
export default {
name: "Child2",
mixins: [Happy]
}
</script>
Father.vue
<template>
<div class="Father">
<h1>我是父组件</h1>
<child1-component />
<child2-component />
</div>
</template>
<script>
import Child1Component from './Child1'
import Child2Component from './Child2'
export default {
name: 'Father',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components:{
Child1Component,
Child2Component
}
}
</script>
mixin/showHappy.js
/*这里是专门用来进行mixin测试的(通过点击按钮会相应的改变对应状态)*/
export const Happy = {
data(){
return{
isRealHappy:true,
status: '',
sad: '难受',
comfort: '舒服'
}
},
methods:{
submitChange(){
if(this.isRealHappy){
this.isRealHappy = !this.isRealHappy
this.status = this.comfort
}else{
this.isRealHappy = !this.isRealHappy
this.status = this.sad
}
}
}
}
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Father from '@/components/Father'
Vue.use(Router)
const routes = [
{
path: '/',
name: 'Father',
component: Father
}
]
const routers = new Router({
mode: 'history',
routes
})
export default routers
那么,代码贴了这么多,mixin究竟有啥用呢?那就是代码复用
如果我们不用mixin这种方式,直接把这段代码贴到Child1.vue和Child2.vue中,也是可以实现与页面展示一样的效果:
?
? ? ? ?? 很显然,mixin的书写方式更优雅,虽然项目中没有这么简单的代码,但这是一种思想!
? ? ? ?? 让我们更精致一些,让项目让代码尽可能高类聚低耦合,如此一来,我们必然会成为更优秀的程序员!
? ? ? ?? 顺便提及一下使用小细节,如果在组件中出现了与mixin中相同的属性或方法,会优先展示组件中的属性和方法哦!各位小伙伴,一起加油吧!
? ? ?