vue文章管理系统
👉 等用户真正访问到某个路由页面时，才去加载对应的组件文件，而不是在应用一开始就把所有路由对应的组件都加载进来。 首屏优化 ：如果你的项目很大，所有页面组件一次性打包，首屏加载速度会很慢。 分包加载 ：只加载用户需要的页面，减少初始包体积。 体验更流畅 ：用户点到新页面时才加载对应的资源，避免不必要的开销。 使用 :deep() 包裹第三方组件对应的类，即可做到组件作用域穿透，修改样式： ...
博客
14 篇Vue 3
vue2 与 vue3 的区别
特点： 这种属于传统写法，通常写在入口文件里 ，比如 main.js，直接挂载到页面 <div id"app"</div。适合小 demo 或者快速实验。 响应式依赖 Object.defineProperty，只能拦截已有属性。 新增属性或数组索引必须使用 Vue.set 或 Vue.$set 才能触发更新。 对深层对象和数组响应式性能有限。 判断是否传统写法的依据： 是否使用...
Vue3
ES6+ 语法精华
const 声明的数组可以添加或删除么？ const 声明的对象可以添加或修改属性么？ 答：可以的，因为数组和对象在 js 中属于引用类型，对其做添加、删除等操作，并不改变其内存地址。 用一对单引号或双引号声明，基本都用单引号 用一对反引号声明 避免了繁琐的加号做字符串拼接；嵌入的语法为 ${表达式} 当属性名是变量的时候，只能用中括号取值；否则既可以用点，也可以用中括号 当属性名和属性值的名字...
Pinia：vue3状态管理
Pinia官方网站 Pinia 是一个状态管理工具，Vue的专属状态管理库，它允许你跨组件或页面共享状态，让多个组件共享数据 。 那 Pinia 中存什么？ 多个组件共享的数据 ，才存储在 Pinia 中 某个组件中的私有数据，依旧存储在组件自身内部 例如： 登陆的用户名需要在首页、个人中心页、搜索页、商品详情页使用，则用户名存储在 Pinia 中 新闻详情数据，只有在新闻详情页查看，则存...
vue-router：vue3路由管理器
单页应用程序：SPA（Single Page Application）是指所有的功能都在一个 HTML 页面上实现。 单页应用网站：网易云音乐 https://music.163.com/ 多页应用网站：京东 https://jd.com/ 单页应用类网站：系统类网站/内部网站/文档类网站/移动端站点 多页应用类网站：公司官网/电商类网站 生活中的路由：设备和 ip 的映射关系 Vue中的...
自定义指令+插槽+商品列表案例
自定义指令 除了 Vue 内置的一系列指令 (比如 vmodel 或 vshow) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。 在不使用 <script setup 的情况下，自定义指令需要通过 directives 选项注册： 1. 注册： 2. 使用： 💥注意事项： 元素挂载后 （成为DOM树的一部分时） 自动执行 mounted...
v-model进阶+ref+nextTick
vmodel 实际上是个语法糖，当作用在 <input 原生输入框时，本质是 :value + @input 的组合。 其中 $event 是 事件对象的引用 ，可以用它拿到点击的元素、坐标、键盘键值等等。 vmodel 除了用在表单元素上，还可以用在组件上，实现数据的双向绑定。下面以实现父组件和子组件数据的双向绑定为例： 1. 父组件使用子组件时候绑定 vmodel"数据" 2. 子组件通过一个...
scoped+组件通信+props校验+记事本组件版
默认情况下 ，写在组件中的 style 样式会 全局生效 ，因此很容易造成多个组件之间的样式冲突问题。 1. 全局样式 ：默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响 2. 局部样式 ：可以给组件加上 scoped 属性，可以让样式只作用于当前组件的标签 MyLeft.vue文件： MyRight.vue文件： App.vue文件： 至此，发现 MyRight.vue 中 h3...
组件及组件化+组件生命周期
以可折叠面板为例，现要展示3个，如何操作？ 可折叠面板案例的代码： 1. 把需要复用的一段标签，抽离并封装到一个单独的 vue 文件里，连同相关 JS 和 CSS 放到一起 2. 哪里要用这个组件，哪里导入，当做标签使用即可 新建一个 src/components/MyPanel.vue 文件： 然后在 App.vue 导入并使用该组件： 组件是一个 独立的、可复用 的 Vue 实例，也是一段 ...