![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue项目之仿大众点评
记录我的GitHub项目——仿大众点评的学习笔记
https://github.com/faimi/Fan_DAZHONGDIANPING.git
Feather_74
这个作者很懒,什么都没留下…
展开
-
仿大众点评——栅栏布局、flex布局、require、:class
要点:1、v-for循环图片时需要写requirepic: require("./image/home/cover_01.png")2、flex换行display: flex;width: 100%;flex-wrap: wrap;width:50%;max-width:50%;min-width:50%;3、v-for循环class:class="color[key]"4、如果...原创 2019-10-27 13:32:28 · 442 阅读 · 0 评论 -
仿大众点评——如何通过slot插槽定制使用Vant框架的Tab 标签页和NavBar 导航栏两个导航组件
通过npm安装Vantnpm i vant -S引入Vant框架我在Vant官网看到可以按需引入组件,但是当我按照Vant官网引入Layout 布局时却没有实现行列布局import Vue from 'vue';import { Row, Col } from 'vant';Vue.use(Row).use(Col);因此我采用下面这种导入所有组件的方式(但是并不推荐,因为这样...原创 2020-01-12 22:40:12 · 6866 阅读 · 0 评论 -
仿大众点评——watch (监测变化) $route 对象和导航守卫beforeRouteEnter两种方法监听数据变化
我在写仿大众点评的时候遇到一个问题:虽然进入不同商品详情页,router的path也变了,但是页面的数据没有发生改变。然后我看了Vue.js的官网,看到了这样一段话:提醒一下,当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。然后我...原创 2020-01-07 21:52:39 · 1325 阅读 · 0 评论 -
仿大众点评——Vue Router动态路由匹配(动态路径参数和watch $route 对象)
动态路径参数在 vue-router 的路由路径中使用“动态路径参数”export default new Router({ { routes:[ path:'/guessLikeDetails/:index', component:guessLikeDetails ] },})通过 $rout...原创 2020-01-05 20:04:51 · 357 阅读 · 2 评论 -
仿大众点评——商品的详情页面
图都是猜你喜欢的商品,但是会根据商品键值key的不同进入不同的商品详情页面代码猜你喜欢:在点击事件上加入店铺的键值key<div class="bg" v-for="(index,key) in dianpu.dianpu" :key="key" @click="$router.push(`/guessLikeDetails/${key}`)"> <...原创 2020-01-04 23:27:54 · 606 阅读 · 0 评论 -
仿大众点评——美食详情
图代码template<template> <div id="app"> <div style="position: relative;"> <div class="swiper-container"> <div class="swiper-wrapper"> <...原创 2020-01-02 23:26:13 · 257 阅读 · 0 评论 -
仿大众点评——tab切换、部分数据的显示与隐藏
图代码template<template> <div id="app"> <div v-for="(index,key) in GroupBuying" v-bind:key="'one'+key"> <div class="GroupName">{{index.GroupName}}</div> ...原创 2019-12-29 22:00:34 · 268 阅读 · 0 评论 -
仿大众点评——aui-tab按钮组工具栏
tab切换图代码这里我引用了AUI的框架,所以需要在index.html文件进行配置//css样式引入 <link rel="stylesheet" href="/static/css/aui.css">//script引入<script src="/static/script/api.js"></script><script src="...原创 2019-12-26 22:52:00 · 506 阅读 · 0 评论 -
仿大众点评——美食列表
图代码template<template> <div id="app"> <div class="fl-flex" v-for="(index,key) in restaurant.Restaurant" v-bind:key="key"> <div class="flex1"> <div cl...原创 2019-12-23 20:49:13 · 339 阅读 · 0 评论 -
仿大众点评——如何设置页面不随宽度变化拉伸
图在引用页面设置总宽度<template> <div> <v-foodList style="width:1000px;"></v-foodList> </div></template><script>import foodList from '../../compon...原创 2019-12-22 22:28:05 · 135 阅读 · 0 评论 -
仿大众点评——解决placeholder中iconfont不显示和颜色改变的问题
成果图iconfont图标不显示之前在网上搜索placeholder如何显示iconfont图标,网上大部分的答案都是 <input type="text" class="iconfont inp" placeholder="" />但是这样的话图标根本出不来如何在input的placeholder中显示图标我们只需把代码换一换 &...原创 2019-12-21 16:36:29 · 403 阅读 · 1 评论 -
仿大众点评——地区选择(阻止下拉列表框的消失)
实现图代码<template> <div id="app"> <div class="cf-flex dropdown"> <div class="cf-flex1" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" ari...原创 2019-12-20 22:02:00 · 227 阅读 · 0 评论