vue学习笔记

封装element组件 参考对象 折叠面板 按钮 npm create vue@3 npm i 使用vue3建库如果报错可以尝试禁用vs的 vetur 插件，这是vue2插件，会给vue3项目报错(禁

建项 项目需求写法——可视化报表 可视化报表项目效果 开源表格样式库阿帕奇 绘制echarte图标的流程 在视图中放置一个容器，这个容器需要有一个固定的宽高 获取容器，调用init方法，初始化echa

购物车案例 准备工作 首页默认加载，其余页面懒加载 api就是用来模拟后台接口的 在app.vue中做购物车首页，头部不进入路由，在头部的底部放RouterView 给app 的header添加插槽#

Vue生态中包含了大量优秀的组件库，经过快速的学习，我们就能把这些现成的组件应用到自己的项目中了 1.常见组件库 UI组件库需要基于JS框架来实现，也就是说我们现在学习的是Vue3，也需要选择适配的组

1.Pinia基本介绍 1.1 基本介绍 一直以来VueX都是官方为Vue提供的状态管理库，但是在Vue3的版本中，尽管VueX4也能提供组合式API，但是自身存在的很多缺陷让官方重新编写了一个新的库

1. 基本介绍 这里介绍的VueX是匹配Vue3的V4版本，它绝大多数功能使用都和之前基本保持一致。 1.1 官方定义 先一起看一下官网对于VueX的定义： Vuex 是一个专为 Vue.js 应用程

网易云项目 创建、启动项目并配置路由 npm init vite npm i npm i vue-router npm i sass -D 在main.js中 在index中配置路由 实现全局通用导航

路由切换页面的时候，视图改变了，前端的路径也变了，但是没有重新访问该页面。可以说是视图和url的匹配关系。 vue2对应的是路由的v3版本，vue3对应的是路由的v4版本 vue2路由 选择安装版本时

1.Vue2的响应式原理 在Vue2中，我们会把数据放到配置选项data中，一旦我们这样做了，我们心里清楚此时一旦视图中的操作修改了data中的数据，视图会立刻(这个立刻仍然需要等待一个异步更新队列

1 < script setup >语法糖 语法糖写法不需要return 开启setup语法糖，需要在script标签上添加setup属性，Vue3中核心js代码基本都组织在了setup函数中，通过r

Vue3版本已经升级为了Vue的默认版本 ，新版本的特性和优化进一步提高了开发效率 1.Vue3简介 vue3相较于vue2，性能提升了，打包效率提升，渲染效率提升，内存减少 源码重构（使用Proxy

总体要求 在项目开始的时候，新建一个与存放子组件的components文件夹同级的utils文件夹，在其中新建一个index.js文件，用来封装工具方法。 工具方法为不直接渲染视图到页面的方法，可以抽

动态写选项卡  vue内置组件，这个组件可以让视图动态地渲染对应的组件内容 vue内置组件不用自己定义，可以直接拿来使用。 vue内置组件component，这个组件可以让视图动态地渲染对应的组件内容

1.组件的注意点 两个注意点 所有被vue直接管理的函数，最好写成普通函数，不要写箭头函数。这样它里面的this指向的才是vue或者组件实例对象。 所有不被vue直接管理的函数（定时器的回调函数，aj

1.todolist项目 点击添加数据到list列表 在data中定义input（todoname）和list变量 使用v-model绑定输入框中的数据input（todoname） 给添加按钮绑定点

1.vue自定义指令 概念 自己模拟vue官方实现一个指令 作用 对原生指令的补充和扩展，可以用于定义任何dom操作，并且可以复用 分类 全局自定义指令，可以供整个页面使用 局部自定义指令，只作用于它

1.vue指令剩余 注意 methods中函数书写必须是普通函数，只有普通函数，this才指向vue实例，箭头函数会指向window 注意 表单下拉框输入项可以不写value，写了value则valu

1.vue简介 概念 一套用于构建用户界面的渐进式框架 框架 提供了一整套完整的开发解决方案 好处：提高开发效率 坏处：必须按照规则开发 渐进式 逐步增强的应用功能 开发者可以在不影响应用性能的情况下