随笔分类 - Vue3专题精讲
摘要：组件传值方式1 —— props / $emit（父子传值 ） 一、父传子 1.1、父组件通过 props 传递数据 在父组件中，创建了一个名为List的子组件实例，并通过:msg="msg"语法将父组件的msg数据传递给子组件。这里的msg是一个响应式引用（使用ref创建），初始值为'这是父传过去
阅读全文
摘要：Vue2、Vue3代码风格 一、导入方式 Vue2 使用require导入方式，例如： var Vue = require('vue') Vue3 支持 ES6 的 import 方法，例如： import { createApp } from 'vue' 二、组件定义 Vue2 使用Vue.com
阅读全文
摘要：Vite 解决 @ 问题 在Vue3和Vite中，@符号通常用于别名，指向src目录。这是Vue CLI项目的默认设置，但在Vite项目中，你需要手动配置这个别名。 在Vite中，你可以在vite.config.js文件中配置别名。这是一个配置示例： import { fileURLToPath,
阅读全文
摘要：基于 Vite 搭建 Vue3 项目 一、为什么选 Vite https://www.vitejs.net/ 在浏览器支持 ES 模块之前，JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联
阅读全文
摘要：路由 Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 深度集成，用于构建单页面应用。Vue.js 单页面应用是基于路由和组件映射的，路由用于配置访问路径，将组件（components）映射到路由路径（routes）。 一、路由模式 Vue Router 常用的两种模式是
阅读全文
摘要：初始化项目——项目入口 引自: https://vuejs.org/guide/introduction.html#what-is-vue Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript
阅读全文
摘要：初始化项目——文件结构 在 Vue.js 项目中，所有与项目相关的业务逻辑文件都放在 src 目录下。后缀为 .vue 的文件分为 3 个部分，分别是页面模版（template）、页面脚本（script）和页面样式（style）： 一、模板（template） 模板是 Vue.js 组件的 HTML
阅读全文
摘要：初始化项目——项目结构 项目结构是项目的整体展现，也是对不同文件和文件夹的业务模块的划分。随着业务需求的迭代，项目会不断地增加业务模块，建立业务模块文件，使项目结构清晰、方便管理，这是很重要的。 这个目录结构是使用 Vue CLI 创建的 Vue.js 项目，其中包含了一些常用的文件和目录。下面是该
阅读全文
摘要：vue3 创建项目的时候卡顿，比较慢 使用 vue3 命令 vue create vue3-element-plus-admin 创建项目时，一直出现卡顿，导致无法创建项目，如下： 解决办法： 1、检查 npm 源： //查看源，可以看到设置过的所有的源 $ npm config get regis
阅读全文
摘要：初始化项目——启动项目 运行 VS Code 开发工具，依次单击菜单栏的 "文件" ——> "将文件夹添加到工作区" 选项，如下所示： 选择构建完成的 vue3-element-plus-admin 项目，添加成功后，即可在左侧工作区域查看项目的整体结构，如下所示： 标记1：这个区域是 VS Cod
阅读全文
摘要：项目创建 完成 Vue CLI 脚手架的安装后，即可快速构建一个全新 Vue.js 项目，包括可初始化项目的整体结构、依赖包、插件等相关工作。 一、命令构建项目 1.1、创建项目： [root@JumperServer:project_vue] # vue create vue3-element-p
阅读全文
摘要：脚手架安装 Vue CLI 是基于 Vue.js 进行快速开发的完整系统，支持搭建交互式项目、快速开始零配置原型开发、丰富的官方插件集合，以及完全图形化地创建和管理 Vue.js 项目的用户界面。 Vue CLI 致力于将 Vue.js 生态中的工具基础标准化，它确保各种构件工具基于智能的默认配置即
阅读全文
摘要：watch侦听器——深层侦听 https://cn.vuejs.org/guide/essentials/watchers.html#basic-example 直接给watch()传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发： const obj = r
阅读全文
摘要：watch侦听器——侦听数据源类型 https://cn.vuejs.org/guide/essentials/watchers.html#basic-example watch的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、
阅读全文
摘要：watch侦听器 https://cn.vuejs.org/guide/essentials/watchers.html 虽然计算属性在大多数情况下更适合，但有时也需要一个自定义的侦听器。 这就是为什么 vue 通过 watch 选项提供了一个更通用的方法来响应数据的变化。当需要在数据变化时执行异步
阅读全文
摘要：计算属性的getter和setter https://cn.vuejs.org/guide/essentials/computed.html#basic-example （我这里没有使用vue官网提供的例子） 计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景
阅读全文
摘要：计算属性缓存 vs 方法 https://cn.vuejs.org/guide/essentials/computed.html#basic-example template: <p>{{ calculateBooksMessage() }}</p> js: // 组件中 function calc
阅读全文
摘要：计算属性 https://cn.vuejs.org/guide/essentials/computed.html 模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。 比如说，我们有这样一个包含嵌套数组的对象： js: const author =
阅读全文
摘要：单文件组件(SFC) https://cn.vuejs.org/guide/scaling-up/sfc.html 一、单文件组件(SFC)是什么？ vue 的单文件组件 (即*.vue文件，英文 Single-File Component，简称SFC) 是一种特殊的文件格式，使我们能够将一个 vu
阅读全文
摘要：多个应用实例 https://cn.vuejs.org/guide/essentials/application.html#multiple-application-instances 应用实例并不只限于一个。 createAppAPI 允许你在同一个页面中创建多个共存的 vue 应用，而且每个应用
阅读全文
