第四部分:
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';
注:第二个单词的首字母大写,也就是驼峰命名法;
第六部分:
动画部分:
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)});
}
网友评论