vue cli

安装

1. 安装vue-cli https://cli.vuejs.org/zh/guide/installation.html
2. 创建项目
3. 运行项目
4. 安装依赖
5. 查看配置
6. vue.config.js配置webpack
   vue inspect (在控制台查看)
   veu inspect > out.js (把配置输出到out.js)

vue-router配置

文档地址: https://router.vuejs.org/zh/guide/#html

1. 安装vue-router
2. meta可以设置属性,方便路由守卫使用
3. 配置路由/router/index.js
   • path
   • component
   • children
   • name
   • 动态路由配置
   • redirect 重定向(设定默认路由)
   • router-view
4. 路由传参(从list组件跳转到detail组件)
   (1) 动态路由,list通过router-link跳转,detail通过router.push({path:'/detail',query: {
   filmId:xxx
   }})
   detail通过router.push({name:'detail',params: {
   filmId:xxx
   }})
   detail通过$route.params.filmId接收
5. 到main.js里设置router
6. router-view 渲染子路由组件

promise

1. try catch语句
2. promise是什么 是一个对象，是用来处理异步操作的
3. 有什么用
   • 避免回调地狱
   • promise可以支持多个并发的请求，获取并发请求中的数据
   • 这个promise可以解决异步的问题(把异步变同步)，本身不能说promise是异步的
   • axios.get axios.post得到的也是一个promise对象

mock数据(模拟数据)

1. 常用的nodejs框架:
   • express koa(两者同一个团队开发)
   • egg(阿里团队)
   • hapi(沃尔玛团队)
2. 为什么要用mock数据
3. 如何使用
4. 模拟数据网站 https://www.easy-mock.com/

封装组件

1. 封装footer组件

封装请求方法

1. 新建一个utils/index.js, 使用了promise封装请求,统一处理一些相同的数据
2. main.js给Vue的原型添加$http,里面放入utils封装的get和post请求方法
3. 在请求的时候,使用this.http.post();

底部组件切换

1. @click.native 事件修饰符的使用

影院列表

构造区域列表

1. map方法把区域对象(district)提取出来
2. find从数组里查找符合条件的对象
3. filter过滤符合条件的对象
4. 数组去重的几种方法

vuex跨组件通信

https://vuex.vuejs.org/zh/guide/

1. 安装
2. 配置
   • 导出一个vuex的对象
   • 挂到vue的实例上
3. 使用
4. state
5. getter
   • 配置getters
   • 使用mapGetter,让我们可以在页面很方便的取到state里面的值
   • 在computed里,用...mapGetters['xxx'],把xxx从getters映射过来,然后就可以直接使用
6. mutation 用来修改state里面的东西
7. action 动作
8. module 拆分store
9. store本地化(持久化)插件vuex-persistedstate

计算属性和过滤器

6. 计算属性
   computed: 根据已有的属性(可以是在data里定义的,也可以是在store定义的)得到一个新的属性(新的属性的值会根据依赖的属性的值改变而改变)
7. 过滤器
   • Vue.filter('xxx',(value)=>{})
   • 使用 xxx | 过滤器的名称