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属性

• 用户获取注册过ref属性的dom节点或者组件。

计算属性 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)

路由传参

动态路由

• 1. 配置动态路由标识 router/index.js
• 2. 跳转传参 传真实参数
• 3. 对应的路由页面获取动态路由传参 this.$route.params.key名

query传参 配合 path

• this.route.query.key名

params传参 配合 name 弊端：页面刷新数据丢失

• this.route.params.key名

路由守卫

• 1. 配置路由守卫标识 配置路由元信息 meta
• 2. 当进入路由页面时判断当前路由是否需要守卫 1. 需要 2. 需要 beforeEach()
• 3. 判断当前用户的登陆状态 登陆直接查看 未登录 拦截到的登陆页面 本地存储
• 4. 实现登陆功能 表单处理
• 5. 跳转路由拦截之前的页面 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插件

使用步骤

• 1. 下载swiper npm i swiper@5.4.5 -D
• 2. 引入swiper

    import Swiper from 'swiper'
    import 'swiper/css/swiper.css'

• 3. html中轮播图结构
• 4. 合适的位置实例化轮播图

vant UI组件库 轻量、可靠的移动端 Vue 组件库

• 1. 下载 npm i vant -S
• 2. 引入

    // src/main.js
    // 引入vant
    import Vant from 'vant'
    import 'vant/lib/index.css'
    Vue.use(Vant);

• 3. 根据需要找对应得组件 粘贴复制

element UI组件库 PC端

• 1. 下载 npm i element-ui -S
• 2. 引入

  // src/main.js
  // 引入element ui
  import Element from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  Vue.use(Element);

• 3. 根据需要找对应得组件 粘贴复制

购物车案例

• 1. 模拟购物车列表数据 mockjs
• 2. 前端请求数据 axios mounted
• 3. 后台拦截接口 vue.config.js devServer
• 4. 前端获取数据 渲染页面 指令
• 5. 全选反选 全选功能 当全选框选中时，商品列表中的所有商品均为选中状态，反之亦成立
• 当商品列表中的每一件商品选中时，全选框为选中状态，否则，全选框为非选中状态
• 6. 商品数量递增递减
• 7. 总价总和

qq音乐歌曲列表

• 1. 模拟购物车列表数据 mockjs
• 2. 前端请求数据 axios mounted
• 3. 后台拦截接口 vue.config.js devServer
• 4. 前端获取数据 渲染页面 指令
• 5. 组件拆分
• 6. 传参 props

tab切换案例

• 1. 模拟数据 mockjs
• 2. 前端请求数据 axios mounted
• 3. 后台拦截 vue.config.js devServer
• 4. 前端获取数据 渲染页面
• 5. 实现效果 tab切换 轮播图 vant 列表
• 6. 组件拆分 组件传参

瑞辛咖啡

• 1. 根据素材分析路由结构
• 2. 配置路由 新建路由页面 - 路由配置表 - 页面配置 路由相关标志
• 3. 模拟数据 mockjs
• 4. 前端请求数据 axios mounted
• 5. 后台拦截请求 vue.config.js
• 6. 获取数据 渲染页面
• 7. 实现菜单页面的tab切换
• 8. 根据要求拆分组件
• 9. 实现弹框功能

纵横中文网

• 根据素材分析路由嵌套结构
• 根据分析的结构配置路由 创建路由页面 - 配置路由配置表 - 页面配置结构
• 根据素材模拟书籍列表数据 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管理数据 商品列表