美文网首页
仿写饿了么app之vue2.0版本笔记2

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

作者: 蜗牛Coming | 来源:发表于2018-01-24 16:09 被阅读0次

    第四部分:
    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)});
    }

    相关文章

      网友评论

          本文标题:仿写饿了么app之vue2.0版本笔记2

          本文链接:https://www.haomeiwen.com/subject/qdjuaxtx.html