仿写饿了么app之vue2.0版本笔记2

第四部分：
mock数据部分
vue开发请求本地数据的配置，早期的vue-cli在bulid目录下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里面配置，最新的脚手架里面已经去掉了这两个文件，改用webpack.dev.conf.js代替。所以在webpack.dev.conf.js里面配置；
在const portfinder = require('portfinder')下面加入：
const express = require('express')
const app = express()
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
另外，在devServer下面加入
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: seller
})
}),
app.get('/api/goods', (req, res) => {
res.json({
errno: 0,
data: goods
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
errno: 0,
data: ratings
})
})
},
第五部分：
获取元素部分：
1.0版本里面获取元素用的是v-el:xx;
2.0版本里面获取元素用的是：ref;
例如：<div class="content" ref="myContent"></div>
在script里面则是：this.$refs.myContent.style.fontSize='20px';
注：第二个单词的首字母大写，也就是驼峰命名法；
第六部分：
动画部分：

image.png
1.官网上的一个图很好的解释了动画的使用；
在进入/离开的过渡中，会有6个class切换。
v-enter:进入过渡的开始状态；
v-enter-active:进入过渡的整个过程；//可以用来定义过渡的过程时间，延迟和曲线函数；
v-enter-to:进入过渡的结束状态；
v-leave:离开过渡的开始状态；
v-leave-active:离开过渡的整个过程；//可以用来定义过渡的过程时间，延迟和曲线函数；
v-leave-to:离开过渡的结束状态；
注：定义过渡的时候，一定要事先定义好元素的最终状态；因为6个class并不是最终状态，类名最后都会消失的！！！（没理解，走过的坑！！！）
2.js钩子
直接上例子：
<transition-group v-on:before-enter="beforeEnter" v-on:enter="enter"
v-on:after-enter="afterEnter">
<div v-for="(ball, index) in balls" :key="index" v-show="ball.show" class="ball">
<div class="inner inner-hook"></div>
</div>
</transition-group>
然后js部分：
methods:{
beforeEnter(el){},
enter(el){},
afterEnter(el){}
}
然后重点来了，要在style里面加上
.v-enter-active transition: all 0.5s cubic-bezier(0.61,-0.25,0.96,0.29)
这是定义过渡执行过程的！！！
附上设置贝塞尔曲线链接：https://obooman.github.io/cubic-bezier-curve/demos/cubic-bezier-path-describe-timing-function.html

第七部分：
简单非父子组件之间的事件监听部分：
可以使用一个空的vue实例；
在main.js下面声明一个空的Vue实例作为事件总线：
data(){return { eventHub: new Vue() }}
然后再组件中，可以使用$emit,$on,$off分别来分发、监听、取消监听事件；
分发事件：this.$root.eventHub.$emit('getElement',event.target);
在兄弟组件监听事件:
created() {
this.$root.eventHub.$on('getElement',(target) => {console.log(target)})；
}
最好在组件销毁前清除事件监听：
beforeDestory() {
this.$root.eventHub.$off('getElement',(target) => {console.log(target)})；
}