🤠vue基础知识

vue快速回忆

Vue2 笔记

1. 渐进式的渲染框架

2. 创建实例

3. 差值表达式: {{}} 让括号里面能走代码返回值，仅做展示用

4. 数据响应式的处理： 底层Dom操作

5. 调试: vue 插件 操作

6. vue指令(v-前缀 + 标签属性)
1. v-html 为动态显示隐藏 innerhtml，内嵌标签
2. v-show=”表达式” true 显示 false隐藏
3. v-if(条件渲染)=”表达式” v-else(-if) true 显示 false移除
4. v-on: <button v-on:click="count++">+</button>
v-on: <button @click="count++">+</button>
v-on: <button @click="fn">+</button>
v-on: <button @click="fn(参数1，参数2)">+</button>
5. <img v-bind:src="imgUr1" alt="变量"> 将imgUr1的值赋给src
<img :src="imgUr1" alt="变量"> 将imgUr1的值赋给src
6. v-for=“(每一项, 下标) in 数组”
<li v-for="(item, index) in booksList":key="item.id">
7. v-model: 双向绑定 许多表单属性都可以
账户: <input type="text" v-model="username"> <br><br>

7. 指令修饰符
1. <input @keyup.enter="fn” v-model="username” type="text">强制回车
2. <input v-model.trim="username"type="text"><br>强制输入的空格
3. <input v-model.number="age" type="text"><br> 强制输入为数字
4. <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>

8. 样式控制的增强
1. 类名来回切换
<div class="box":class="{ pink: true，big: true }></div>
<div class="box”:class="['pink'，big']"></div>

9. 计算属性：有点只要返回值那味

10. 监视 watch 完整写法

11. 请求

12. 初始化界面的请求: 一进界面直接渲染 create



一进界面获取焦点

13. 工程化开发 vue cli : 集成了webpack 配置
根组件 == 普通组件
vetur 高亮代码 less less-loader

14. 普通组件的注册用户使用 局部注册 全局注册main.js

15. 组件的css: scope

16. 组件的 data 选项必须是一个函数。 保证每个组件实例，维护独立的一份数据对象。

17. 组件通信
父子关系 props(父传子) 和 $emit(子传父) 非父子关系 provide & inject eventbus 通用解决方案: Vuex (适合复杂业务场景 )

18. ref $refs 当前组件内查找dom元素 mounted

1. v-loading 加载过程中

2. 自定义指令: 封装dom操作
1.通过指令的值相关语法，可以应对更复杂指令封装场景 2.指令值的语法 0v-指令名 ="指令值"，通过 等号 可以绑定指令的值@ 通过 binding.value 可以拿到指令的值3 通过 update 钩子，可以监听指令值的变化，进行dom更新操作

22. 插槽 - 默认插槽

作用:让组件内部的一些 结构 支持 自定义

多个: 具名(字)插槽

作用域插槽： 传参

1. 单页应用程序： 移动端站点 系统类 内部网站
1. vue-router 路由的使用 view文件夹下 router-link代替a

2. ESLint 自动修正

3. vueX 是 数据管理 mutation是修改 mapMutations

vue3

参数与函数

项目实战

Vue3 Pinia Pinia持久化处理 ElementPlus组件

pnpm Eslint(格式)+prettier(美观) husky(git hooks工具) 提交前校验

VueRouter4 路由设计 大模型

需求：

登陆注册，添分类，发文章(检索)，个人中心(昵称头像)

 

npn → yarn → pnpm

基本配置：环境同步：eslint与# 后台数据管理系统 - 项目架构设计

git

element-ui 安装好后直接使用即可

默认 components 下的文件也会被自动注册

配置 — 路由 — 组件 — Pinia — axios —整体路由设计

由设计完后，App.vue下要存 <router-view></router-view>

Login界面分析

默认 components 下的文件也会被自动注册

配置 — 路由 — 组件 — Pinia — axios —整体路由设计

由设计完后，App.vue下要存 <router-view></router-view>

 

 

vue商城项目

1. 报错: yarn config set registry https://registry.npm.taobao.org/

2. ctrl shift p

3. vant2组件库

4. 将 px 变成 vw

5. 为什么要重置less默认样式

6. 路由设计 路由配的规则就是数组里面包对象

7. 我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址,请求响应拦截器等等)

8. // 添加响应拦截器 失败统一处理 错误信息在请求里面

9. 返回特征权证，存入vuex，本地存储

10. 优化：添加请求 loading 效果

11. 对于支付页，订单页等，必须是登录的用户才能访问的，游客不能进入该页面，需要做拦截处理。路由前置守卫

12. 静态渲染 + 动态渲染

13. copilot