摘要：
按照之前的写法，定义mutation，使用mutation，当如果要修改mutation名字的时候，需要修改至少两处，当有多出引用此名字的时候，有多少处引用就要改多少个地方，不便于管理 解决方案，把所有mutation的名字抽离出来定义为常量，引用常量做名字，以后要改，则只需改一处即可，并且一眼就能 阅读全文
posted @ 2021-01-20 22:40
向前走。
阅读(424)
评论(0)
推荐(0)
摘要：
有些时候，我们并不想拿到原数据或者所有的原数据，想要拿到加工过后的数据，实现思路就和计算属性一样 getters可以理解为vuex中的计算属性 使用 由于只有一条数据，所以看不出效果 同样的，也支持mapGetters的写法 阅读全文
posted @ 2021-01-20 22:39
向前走。
阅读(111)
评论(0)
推荐(0)
摘要：
在组件中要使用vuex的状态，取值表达式会很长 处理方式1：使用计算属性 、 方式二：可以使用vuex-mapStore来处理，列表中可以是多个状态，只要是vuex管理的状态都可以在这里使用 以上方法，虽然可以很容易使用vuex里面的状态，但是当有自定义的计算属性的时候，无法融合 方法3：在计算属性 阅读全文
posted @ 2021-01-20 22:37
向前走。
阅读(495)
评论(0)
推荐(0)
摘要：
异步处理逻辑 应用场景： 当这样来回切换的时候，每一次切换都会请求对应的接口，会对后端接口造成不必要的压力，而且如果用户网络不好的话，请求接口会变慢，造成不好的用户体验 解决办法：当切换到对应页面的时候，判断是否有对应组件的数据，如果有，则直接从store中获取数据渲染渲染，如果没有，则通过acti 阅读全文
posted @ 2021-01-20 22:36
向前走。
阅读(1192)
评论(0)
推荐(0)
摘要：
上一篇的操作，虽然可以达到效果，但是有很大风险，vuex中的状态是共享的，所有组件都可以使用和改变，但状态改变后，无法确定是哪个组件中的事件使vuex中的状态改变了，所以需要一个第三方的东西来统一处理，Mutations 同步处理逻辑 vue devtools安装和使用： 安装和说明：https:/ 阅读全文
posted @ 2021-01-20 22:34
向前走。
阅读(1482)
评论(0)
推荐(1)
摘要：
VuexVuex是在中大型项目中，用来管理一些变量的。因为如果项目比较大，一些数据在各个页面中可能需要进行交替使用，如果数据量比较大，通过params或者query的方式不太方便。这时候就可以使用Vuex来管理这些数据。 官方文档：https://vuex.vuejs.org/zh/guide/ 安 阅读全文
posted @ 2021-01-20 22:25
向前走。
阅读(155)
评论(0)
推荐(0)
摘要：
获取影院数据 渲染 要使用better-scroll实现的效果 下载Better-Scroll库：cnpm install --save better-scroll 使用better-scroll 动态设置div高度 cinema <template> <div class="cinema" :st 阅读全文
posted @ 2021-01-20 22:23
向前走。
阅读(654)
评论(0)
推荐(0)
摘要：
实现点击电影信息跳转到详情页面 获取传递给detail组件的参数，去请求接口获取数据 渲染数据 图片css和渲染图片 <template> <div v-if="filminfo"> <img :src="filminfo.poster" class="poster"> <h2>{{ filminf 阅读全文
posted @ 2021-01-20 22:22
向前走。
阅读(466)
评论(0)
推荐(0)
摘要：
先实现film-header导航 实现film-header组件 FilmHeader组件 <template> <div> <ul> <router-link to="/film/nowplaying" tag="li" active-class="isActive">正在热映</router-l 阅读全文
posted @ 2021-01-20 22:20
向前走。
阅读(240)
评论(0)
推荐(0)
摘要：
在预留的轮播位置，实现真正的轮播 安装swiper组件 swiper的css所在的位置 老版有dist文件夹，位置为：swiper/dist/css/swiper.css新版没有dist文件夹，位置为：swiper/swiper-bundle.css 实现swiper组件 <template> <d 阅读全文
posted @ 2021-01-20 22:17
向前走。
阅读(409)
评论(0)
推荐(0)
摘要：
nowplaying页面局部css <style lang="scss" scoped> ul { li { padding: 10px; overflow: hidden; img { float: left; width: 100px; } } }</style> 由效果看，导演是一个数组，数组 阅读全文
posted @ 2021-01-20 22:16
向前走。
阅读(244)
评论(0)
推荐(0)
摘要：
一：数据请求 nowplayingurl: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=8629683',headers: { 'X-Client-Info': '{"a":"3000","ch 阅读全文
posted @ 2021-01-20 22:15
向前走。
阅读(296)
评论(0)
推荐(0)
摘要：
store.js main.js SubmitOrder.vue组件 导入并创建路由 使用路由 阅读全文
posted @ 2021-01-20 22:13
向前走。
阅读(300)
评论(0)
推荐(0)
摘要：
VuexVuex是在中大型项目中，用来管理一些变量的。因为如果项目比较大，一些数据在各个页面中可能需要进行交替使用，如果数据量比较大，通过params或者query的方式不太方便。这时候就可以使用Vuex来管理这些数据。 官方文档：https://vuex.vuejs.org/zh/guide/ 安 阅读全文
posted @ 2021-01-20 22:12
向前走。
阅读(218)
评论(0)
推荐(0)
摘要：
实现效果 cart.vue <style scoped lang='scss'> .cart-container { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; .mask-bg { background-color: rgb 阅读全文
posted @ 2021-01-20 22:10
向前走。
阅读(576)
评论(0)
推荐(0)
摘要：
把计步器写成一个组件 导入并使用计步器组件 修改css 数量为0的时候，左边按钮和数量不显示 点击增加或减少事件 Stepper.vue <style scoped lang="scss"> .stepper-container { display: flex; align-items: cente 阅读全文
posted @ 2021-01-20 22:09
向前走。
阅读(525)
评论(0)
推荐(0)
摘要：
查看商品详情 获取商品数据 商品详情页面，写成自定义组件 控制点击商品再展示 详情页和布局 关闭按钮点击事件 <style scoped lang="scss"> .gd-container { position: absolute; left: 0; right: 0; top: 0; botto 阅读全文
posted @ 2021-01-20 22:08
向前走。
阅读(899)
评论(0)
推荐(0)
摘要：
左上角返回按钮 下方菜单栏只在首页展示 <template> <div id="app"><!-- <Home></Home>--> <router-view></router-view><!--路由出口--> <van-tabbar v-model="active" v-if="showTabba 阅读全文
posted @ 2021-01-20 22:06
向前走。
阅读(379)
评论(0)
推荐(0)
摘要：
<style scoped> .merchant-container >>> .van-nav-bar { background: none; } /*去掉横线*/ .merchant-container >>> .van-hairline--bottom::after { border: none 阅读全文
posted @ 2021-01-20 22:04
向前走。
阅读(916)
评论(0)
推荐(0)
摘要：
在左侧商品分类点击商品时，右侧自动跳转到对应的商品详情 定义一个点击事件 绑定点击事件 获取商品高度 触发点击事件时改为获取高度偏移量，并滚动 增加选中状态 效果 <style scoped> .merchant-container >>> .van-nav-bar { background: no 阅读全文
posted @ 2021-01-20 22:03
向前走。
阅读(1171)
评论(0)
推荐(0)
摘要：
修改取数逻辑 渲染 效果 修改css 实现滚动 <style scoped> .merchant-container >>> .van-nav-bar { background: none; } /*去掉横线*/ .merchant-container >>> .van-hairline--bott 阅读全文
posted @ 2021-01-20 22:01
向前走。
阅读(388)
评论(0)
推荐(0)
摘要：
使用better-scroll组件实现上下拉动的功能，官网：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88 安装：npm install bett 阅读全文
posted @ 2021-01-20 21:58
向前走。
阅读(489)
评论(0)
推荐(0)
摘要：
定义商家详情页 <template> <div class=""> 商家详情 </div></template><script type="text/ecmascript-6">export default { name: "", data(){ return {} }, components: { 阅读全文
posted @ 2021-01-20 21:57
向前走。
阅读(672)
评论(0)
推荐(0)
摘要：
使用vant组件实现 在app中注册 使用 更换图标，使用vant组件 创建订单页面和我的页面 <template> <div class=""> 我的页面 </div></template><script type="text/ecmascript-6">export default { name 阅读全文
posted @ 2021-01-20 21:56
向前走。
阅读(513)
评论(0)
推荐(0)
摘要：
商家列表 评分图标用vant组件 标签，用vant组件 修改css <style scoped> .van-dropdown-menu >>> van-dropdown-menu__title{ color: #767676; } .van-dropdown-menu__item{ font-siz 阅读全文
posted @ 2021-01-20 21:55
向前走。
阅读(645)
评论(0)
推荐(0)
摘要：
样例 下拉选项框，用vant组件：https://youzan.github.io/vant/#/zh-CN/dropdown-menu 注册组件 使用并添加选项 加上另外的选项 统一修改文字样式和大小 <style scoped lang="scss"> .header-group { backg 阅读全文
posted @ 2021-01-20 21:54
向前走。
阅读(600)
评论(0)
推荐(0)
摘要：
头部地址 搜索框 使用vant的组件：https://youzan.github.io/vant/#/zh-CN/ 去除搜索框的边距 设置输入框与上一行的距离 <style scoped lang="scss"> .header-group { background-color: black; pa 阅读全文
posted @ 2021-01-20 21:52
向前走。
阅读(746)
评论(0)
推荐(0)
摘要：
使用iconfont解决小图标的问题 官网：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 搜索要使用的图标 选中图标并添加入库 将图标添加至项目 选则font class，图标下面的名字为图标名，在使用的时候会指定此名 阅读全文
posted @ 2021-01-20 21:50
向前走。
阅读(626)
评论(0)
推荐(1)
摘要：
项目初始化：1. vue create 项目名2. sass配置： * npm install node-sass@4.12.0 --save-dev * npm install sass-loader@8.0.0 --save-dev * style就可以通过lang='scss'来写sass语法 阅读全文
posted @ 2021-01-20 21:49
向前走。
阅读(261)
评论(0)
推荐(0)
摘要：
对于某些接口的前置校验，比如未登录状态下访问个人中心，明显是不应该访问到的，应该跳转到登录页面才对 官方说明：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 一、全局路由守卫：就是在整个网页中，只要发生了路由的变化， 阅读全文
posted @ 2021-01-20 21:43
向前走。
阅读(2459)
评论(0)
推荐(0)
摘要：
官方说明：https://router.vuejs.org/zh/guide/essentials/history-mode.html 按目前的代码，在访问url的时候，总是有一个#号 要去掉这个#号，只需要在路由配置中加一个属性，mode='history'即可 但是这样过后，不知看起来像后端路由 阅读全文
posted @ 2021-01-20 21:42
向前走。
阅读(259)
评论(0)
推荐(0)
摘要：
动态路由：1. 在url中，通过定义一个参数，那么以后url中就可以动态的传递这个参数。语法是：`/profile/:参数名`2. 在组件中，可以通过`this.$route.params.参数名`拿到，或者是组件的模板中，可以通过`$route.params.参数名`拿到。3. `this.$ro 阅读全文
posted @ 2021-01-20 21:41
向前走。
阅读(1947)
评论(0)
推荐(0)
摘要：
一：重定向： 按之前的代码，当输入的地址没有后缀的时候，是没有默认页面跳转的，即没有设置重定向页面 只需要在router的配置文件router.js中，配置重定向即可实现 二：二级路由，一级路由固定了，访问的子组件都是在一级路由对应组件下渲染的组件 创建两个组件，用作二级路由对应的组件 在route 阅读全文
posted @ 2021-01-20 21:39
向前走。
阅读(1154)
评论(0)
推荐(0)
摘要：
上一篇实现的效果是在浏览器中输入路径，加载对应的组件，但是在实际使用上，不可能让用户去这么做，应该在某个页面上，给出对应组件的链接，用户点击，则加载该组件 写一个导航组件，列出三个组件的链接（暂时使用a链接，下面会使用路由组件） 在根组件中，注册tabbar组件 router组件提供了路由的组件，r 阅读全文
posted @ 2021-01-20 21:36
向前走。
阅读(424)
评论(0)
推荐(0)
摘要：
Vue-RouterVue-Router是用来将一个Vue程序的多个页面进行路由的。比如一个Vue程序（或者说一个网站）有登录、注册、首页等模块，那么我们就可以定义/login、/register、/来映射每个模块。 安装：通过script加载进来：<script src="https://unpk 阅读全文
posted @ 2021-01-20 21:33
向前走。
阅读(1461)
评论(0)
推荐(0)
摘要：
由于前端包本身已经被映射为了域名的形式，所以直接请求后端接口，会报跨域的问题 猫眼接口：https://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=B7C0C9B0DC9E11EABDF83B2B19B81E94EBA03A3B4D5A 阅读全文
posted @ 2021-01-20 21:30
向前走。
阅读(8472)
评论(0)
推荐(1)
摘要：
在package.json中有三个命令，分别是serve、build、lint 先检查代码风格问题，并修复 npm run lint 打包上生产：npm run build 在目录下生成了dist文件夹，代码已经被自动压缩，只需要将此报配上代理(如Nginx)即可用于生产 阅读全文
posted @ 2021-01-20 21:27
向前走。
阅读(895)
评论(0)
推荐(0)
摘要：
准备好两个组件 在根组件中引入 注册方式1：全局注册 注册方式2：局部组件注册 实现在navbar组件中，控制sidebar组件的显示和隐藏 navbar组件中留一个插槽 sidebar组件添加一些内容 在根组件中写控制逻辑 以上案例有个问题，子组件的css被主组件的css覆盖了 解决方案：在子组件 阅读全文
posted @ 2021-01-20 21:26
向前走。
阅读(454)
评论(0)
推荐(0)
摘要：
一、安装node和vue脚手架 1.下载node：http://nodejs.cn/download/ 双击安装，一路下一步到安装成功，打开cmd，执行node -v，出现版本号，则说明安装成功 2.配置使用淘宝镜像： npm的服务器在国外。那么可以安装一下cnpm，并且指定镜像为淘宝的镜像：npm 阅读全文
posted @ 2021-01-20 21:25
向前走。
阅读(1308)
评论(0)
推荐(0)
摘要：
过滤器：过滤器就是数据在真正渲染到页面中的时候，可以使用这个过滤器进行一些处理，把最终处理的结果渲染到网页中。1. 使用：`{{username|strip}}`、`<a :href="url|strip">百度</a>`。2. 定义：都是定义一个函数，这个函数的第一个参数永远都是被过滤的那个变量 阅读全文
posted @ 2021-01-20 21:22
向前走。
阅读(149)
评论(0)
推荐(0)
摘要：
生命周期函数：1. 创建阶段： * beforeCreate：Vue已经创建了，但是data和methods都还没有被创建好。 * created：data和methods已经被创建好了。 * beforeMount：模板经过编译，还没有挂载到网页中。 * mounted：模板已经经过编译，并且已经 阅读全文
posted @ 2021-01-20 21:21
向前走。
阅读(129)
评论(0)
推荐(0)
摘要：
基础的展示和隐藏，无过渡效果 vue提供了组件transition，用来控制元素过渡，css需自定义，但是css名字的后缀(绿色部分)是固定的 1.单个元素过渡 2.多个元素过渡 如果直接写多个元素，会报错 改为互斥，且不同标签，否则vue会认为标签没变，不会重新创建节点 或者相同标签，key值不同 阅读全文
posted @ 2021-01-20 21:19
向前走。
阅读(261)
评论(0)
推荐(0)
浙公网安备 33010602011771号