vue框架
webpack 模块（内置模块和第三方模块）第三方模块
vue框架入门及组件
概念：是用于构建用户界面的渐进式框架，设计为自底向上逐层应用，侧重于视图层。
特点：双向数据绑定(v-modle) 虚拟dom 单向数据流
创建vue项目的方式
- 引入外部链接 cdn
- 脚手架创建项目 vue/cli npm i @vue/cli vue -g
vue语法
指令
- v-for 渲染数组
- v-if 根据条件判断当前dom节点是否加载
- v-else 条件语句
- v-show 根据条件设置当前dom节点的display block none
- v-text 渲染变量
- v-html 渲染变量 可解析变量中的标签
- v-bind 用于绑定属性解析属性值为变量的时候使用 可简写:
- v-on 用于绑定事件 可简写@
- v-model 用于表单
vue中的组件
概念：组件是可复用的 Vue 实例
封装、抽离组件流程 定义组件->引入组件->注册组件->调用组件
组件生命周期
概念：组件从创建到销毁的一系列过程（设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM,实例销毁）被称为组件的生命周期。
生命周期函数
创建期
- beforeCreate 组件实例创建前触发 访问不到组件数据，访问不到组件挂载的dom节点
- created 组件实例创建完成时触发 可以访问到组件数据，访问不到组件挂载的dom节点
- beforeMount 组件实例挂载前触发 可以访问到组件数据，访问不到组件挂载的dom节点
- mounted 组件实例挂载完成时触发 可以访问到组件数据，可以访问到组件挂载的dom节点
更新期/存在期
- beforeUpdate 组件实例更新前触发
- updated 组件实例更新完成时触发
销毁期
- beforeDestroy 组件实例销毁前触发
- destroyed 组件实例销毁完成时触发
组件注册
- 全局注册 注册到Vue构造函数上 Vue.component(组件名，组件模板)
- 局部注册 注册到需要使用组件的.vue文件中 components:{组件A,组件B}
refs属性
计算属性 computed
计算属性与methods中方法的区别: 计算属性是基于它们的响应式依赖进行缓存的
侦听器 watch
用来监测vue实例中的数据的变化
自定义指令 全局指令 局部指令
插槽
概念：Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。
组件通信
组件关系
- 嵌套关系 嵌套一层 父子组件关系 父向子 props 子向父 this.$emit(自定义事件，可选参数)
- 嵌套关系 嵌套多层 eventbus(无关系组件，兄弟组件，嵌套组件)
vue路由
路由概念：随着浏览器地址栏发生改变，展示给用户不同的页面。
适用场景：多页面的切换
路由模式：hash模式 history模式
路由相关标签
- router-link 导航区 使浏览器地址栏发生变化
- router-view 视图区 用来展示用户页面
路由跳转
- 标签方式跳转 router-link
- js方式跳转 this.$router.push()
- 返回上一页 this.$router.go(-1)
路由传参
动态路由
- 配置动态路由标识 router/index.js
- 跳转传参 传真实参数
- 对应的路由页面获取动态路由传参 this.$route.params.key名
query传参 配合 path
- this.
%20%2F%2F%20%E8%8E%B7%E5%8F%96%E5%8F%82%E6%95%B0%20this.)
route.query.key名
params传参 配合 name 弊端：页面刷新数据丢失
- this.
%20%2F%2F%20%E8%8E%B7%E5%8F%96%E5%8F%82%E6%95%B0%20this.)
route.params.key名
路由守卫
- 配置路由守卫标识 配置路由元信息 meta
- 当进入路由页面时判断当前路由是否需要守卫 1. 需要 2. 需要 beforeEach()
- 判断当前用户的登陆状态 登陆直接查看 未登录 拦截到的登陆页面 本地存储
- 实现登陆功能 表单处理
- 跳转路由拦截之前的页面 this.$router.push(路由路径)
vuex
概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex使用方法
从vuex中获取数据
- html部分获取 {{$store.state.key名}}
- js部分获取 this.$store.state.key名
- 辅助函数 mapState 组件 计算属性 computed:{...mapState([变量A,变量B...])} html {{变量}} js this.变量
修改vuex中的数据
- 同步修改 this.$store.commit(mutations中的方法名，可选参数);
- 异步修改 this.$store.dispatch(actions中的方法名，可选参数);
swiper插件
使用步骤
- 下载swiper npm i swiper@5.4.5 -D
- 引入swiper
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
vant UI组件库 轻量、可靠的移动端 Vue 组件库
// src/main.js
// 引入vant
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant);
element UI组件库 PC端
- 下载 npm i element-ui -S
- 引入
// src/main.js
// 引入element ui
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element);
购物车案例
- 模拟购物车列表数据 mockjs
- 前端请求数据 axios mounted
- 后台拦截接口 vue.config.js devServer
- 前端获取数据 渲染页面 指令
- 全选反选 全选功能 当全选框选中时，商品列表中的所有商品均为选中状态，反之亦成立
- 当商品列表中的每一件商品选中时，全选框为选中状态，否则，全选框为非选中状态
- 商品数量递增递减
- 总价总和
qq音乐歌曲列表
- 模拟购物车列表数据 mockjs
- 前端请求数据 axios mounted
- 后台拦截接口 vue.config.js devServer
- 前端获取数据 渲染页面 指令
- 组件拆分
- 传参 props
tab切换案例
- 模拟数据 mockjs
- 前端请求数据 axios mounted
- 后台拦截 vue.config.js devServer
- 前端获取数据 渲染页面
- 实现效果 tab切换 轮播图 vant 列表
- 组件拆分 组件传参
瑞辛咖啡
- 根据素材分析路由结构
- 配置路由 新建路由页面 - 路由配置表 - 页面配置 路由相关标志
- 模拟数据 mockjs
- 前端请求数据 axios mounted
- 后台拦截请求 vue.config.js
- 获取数据 渲染页面
- 实现菜单页面的tab切换
- 根据要求拆分组件
- 实现弹框功能
纵横中文网
- 根据素材分析路由嵌套结构
- 根据分析的结构配置路由 创建路由页面 - 配置路由配置表 - 页面配置结构
- 根据素材模拟书籍列表数据 mockjs
- 前端请求数据 axios mounted
- 后台拦截请求 vue.config.js devServer post(body-parser)
- 前端获取到数据 渲染页面
- 根据需求拆分组件 props
- 路由跳转传参 动态路由
- 详情页加入书架，判断用户登陆状态 书架-路由守卫
- 路由守卫功能
淘宝案例
- 分析路由结构，路由嵌套关系
- 配置页面路由 views下新建路由页面-router/index.js配置路由关系-页面配置
- 首页 轮播图功能 vant 商品列表
- 模拟数据 mockjs
- 前端请求数据 axios mounted
- 后台拦截 devServer
- 前端获取数据 渲染
- 组件拆分 props 对象
- 动态路由跳转详情
- vuex实现加入购物车功能
多点超市综合案例
- 分析路由结构
- 配置项目路由 views下新建路由页面-router/index.js配置路由关系-页面配置
- 首页 商品列表
- 模拟数据 mockjs
- 前端请求 axios
- 后台拦截 devServer
- 前端获取数据渲染
- 根据要求拆分组件 组件传参 props
- 点击商品跳转详情页面 路由跳转传参 动态路由
- 详情页面 轮播图功能 vant
- 详情页面加入购物车
- 购物车页面 购物车功能 全选反选 商品数量递增递减 总价总数
- vuex管理数据 商品列表
