Vue

思路 做任何需求的套路： 先铺设标签和样式 铺设数据（固定数据/js动态创建数据/后台返回数据） 写交互，多思考用户在页面上的动作，实现对应功能的代码 如果需要把用户输入的值/动作的结果，返回给后

掌握创建vue/cli脚手架项目 掌握插值表达式的使用 掌握事件绑定 掌握随机数公式 this.访问变量 过程 准备标签和数据 按钮绑定点击事件 btnFn 和方法methods里 在方法中产生随机

项目介绍 大事件项目介绍 在线演示：https://fe-bigevent-web.itheima.net/login 接口文档：https://apifox.com/apidoc/shared-26

--- highlight: a11y-dark --- # Vue3.3新特性——defineOptions **背景说明** - 有`<script setup>`之前,如果要定义 props,

# Vue3入门 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp

商品详情页+评论区渲染 目标：实现商品详情页静态结构，封装接口，完成商品详情页渲染 这样就在detail里存好了： 完整代码（prodetail/index.vue）： 加入购物车——唤起弹层 ！ 这

# 首页 <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/232ca2e78af04475b5d70f23169e67d0~tp

智慧商城 知识点目录 ​ 实现 按照结构创建vue-cli脚手架，创建项目 初始化设置一下文件 （有部分修改和增加） ​ 增加两个文件夹——api 和 utils 删除之前关于vue页面样式的一些文件

购物车案例 功能模块分析： 请求动态渲染购物车，数据存vuex 数字框控件修改数据 动态计算总价和总数量 目标1：构建cart购物车模块 说明： 既然明确数据要存vuex，建议分模块存 购物车数据存c

Vue的核心特性是：响应式 而响应式，也就是数据变化，视图自动更新 第一个Vue程序 1. 插值表达式（双花括号） 一种Vue的模板语法 利用表达式来进行插值，渲染到页面中 注意： 1.使用的数据必须

# Vue生命周期和生命周期的四个阶段和钩子函数 > 什么时候可以发送初始化渲染请求（越早越好） > > 什么时候可以开始操作dom（至少dom渲染的出来，也就是至少是挂载阶段） **Vue的生命

**组件的三大组成部分** - template - 只能有一个根元素 - style - 全局样式(默认):影响所有组件 - 局部样式： `scoped`下样式，只作用于当前组件 -

# 组件封装案例——商品列表 ​![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a50ffcde690413a98f2d483d8d215

--- highlight: a11y-dark --- # vuex **1. 是什么** vuex是一个vue的状态管理**工具**，状态就是数据 简单来说，vuex是一个**插件**，可以帮

指令修饰符 通过‘.’指明一些指令后缀，不同后缀封装了不同的处理操作——>简化代码 按键修饰符 v-model修饰符 事件修饰符 冒泡是默认存在的（点击子盒子，父盒子也会触发） v-bind操作cla

>- ​渲染的时候注意购物车整体和空车不能同时出现 > - 渲染时style和前面选中的关系 > - 删除filter > - 修改个数时需要先通过id找到对应项，才能进行加加减减 > - 修改个数时

--- highlight: a11y-dark --- # 自定义指令 > - 之前所学的比如v-model、v-for、v-html...这些都属于内置指令 > - 而像v-focus、v-loa

# 路由模块封装 路由的封装抽离 **问题**：所有的路由配置都堆在main.js中合适吗 **目标**：将路由模块抽离出来 **好处**：拆分模块，利于维护 **方案**：把所有有关路由的文