vue3笔记
vue3迁移指南笔记
Composition API 1.setup选项是组合API的入口点 2.利用reactive实现数据相应式，利用ref将基础数据类型包装成对象类型，使用reactive包裹teleport 传送 作用：使组件挂载到指定元素中 ，避免多层嵌套的弹框样式不好处理const app = Vue.createApp({}); app.component('modal-button&#
日期 2023-06-12 10:48:40
Vue3学习笔记（一）——MVC与vue3概要、模板、数据绑定与综合示例
一、前端MVC概要1.1、库与框架的区别框架是一个软件的半成品，在全局范围内给了大的约束。库是工具，在单点上给我们提供功能。框架是依赖库的。Vue是框架而jQuery则是库。1.2、MVC（Model View Controller）MVC的核心理念是：你应该把管理数据的代码（Model）、业务逻辑的代码（Controller）、以及向用户展示数据的代码（View）清晰的分离开模型：代表应用当前的
日期 2023-06-12 10:48:40
Vue3学习笔记（二）——组合式API（Composition API）
一、常用 Composition API官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API： 响应式 API：例如 ref() 和
日期 2023-06-12 10:48:40
Vue3学习笔记（四）——组件、生命周期
一、组件如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展，但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目。1.0、SPASPA指的是Single Page Application，就是只有一张W
日期 2023-06-12 10:48:40
Vue3.0踩坑笔记
监听路由变化踩坑：由于route.path是异步获取当前path,导致页面刷新并不能保持menus正确的active。 解决方案：使用watch监听当前path，可拿到最新的path1 const selectedKeys = ref([]); 2 3 // 监听路由变化,更新menus当前选中 4 watch( 5 () => route.path, 6
日期 2023-06-12 10:48:40Vue3学习笔记Day2 项目工程化的第一步，第一个Vue项目
开发环境IDE: 推荐VS Code,其实你如果用惯了 JB那一套也挺好的，只不过人家是收费的。浏览器：推荐Chrome。依赖项：ViteNode.js 然后在命令行执行以下命令，创建项目：npm init @vitejs/app 复制然后跟着一路设置一下。 介绍一下项目目录:. ├── README.md ├── index.html 入口文件 ├── package.jso
日期 2023-06-12 10:48:40
Vue3学习笔记 Composition API和script setup 新搭档的好处是？
<script setup> 本质上是以一种更精简的方式来书写 Composition API。按昨天说的规范： 我们在src/components/新建Todolist.vue<template> <div> <h1 @click="add">{{count}}</h1> </div> &
日期 2023-06-12 10:48:40Vue3学习笔记 用朴素的语言理解大名鼎鼎的响应式
昨天一起学习了组合式API和 script setup。 今天我们了解一下 Vue3里大名鼎鼎的 响应式机制。我们将会从响应式 的概念，原理，实际案例来进行学习。啥是响应式其实在JavaScript里是没有响应式这个概念的。 比如下面这段原生js代码:let count = 1 let double = count * 2 console.log(double) count = 2 console
日期 2023-06-12 10:48:40Vue3学习笔记 怎么实现动画效果？
有时候我们想做一些动画效果。过渡 transitioncss的属性transition 可以实现动画过渡效果。示例：点击按钮，让div的宽度变长。<template> <div class="box" :style="{width:width+'px'}"></div> <button @
日期 2023-06-12 10:48:40Vue3学习笔记Day10 如何使用Vuex进行数据跨组件交互？
Web应用的三大件:组件数据路由Vuex的诞生那多个组件之间的数据通信是如何实现的呢？常见方案：定义全局变量，任何组件需要数据就去全局变量获取。window._store = {} 复制如下图所示：这里存在一个问题 并不是响应式的，还要我们自己手动用ref reactive 搞成响应式数据。这就是 Vuex 诞生的雏形了。Vuex是啥？可以这样来理解，项目比作公司，数据是公司资产，那么Vuex就是
日期 2023-06-12 10:48:40Vue3学习笔记
Vue31.Vite搭建Vue3项目全局安装 Vitenpm install -g create-vite-app复制使用 Vite 创建 Vue3 项目create-vite-app vue3-vite复制可以发现瞬间创建完成。运行cd vue3-vite npm install (or `yarn`) npm run dev (or `yarn dev`)复制vite冷服务热更新Rol
日期 2023-06-12 10:48:40golang + vue3+vite 构建后台管理系统笔记。
开始选用的gin框架，但是后来突然发现gin框架的路由不是最长匹配规则。不能实现路由降级。比如不能同时注册 / 和 /upload 路由。如下代码会报错。// catch-all wildcard '*filepath' in new path '/*filepath' conflicts r.GET("/ping", func
日期 2023-06-12 10:48:40Vue3快速上手资料！手把手带你彻底学会Vue3，超详细讲解！不怕学不会！【建议收藏】【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通vue3笔记资料】
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：Re
日期 2023-06-12 10:48:40Vue3学习笔记（七）—— 状态管理、Vuex、Pinia
一、状态管理 1.1、什么是状态管理？ 理论上来说，每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例： <script setup> import { ref } from 'vue' // 状态 const count = ref(0) // 动作 function increment() { count.value++ }
日期 2023-06-12 10:48:40Vue3学习笔记（六）—— 作业
第一章：Vue 3.0 概述 1、选择题 1.1、在MVVM设计模式中，Model代表的是_______。 A. 数据模型 B. 控制器 C. 视图 D、监听模型 1.2、在Vue中挂载点是在_______文件中定义的。 A. main.js
日期 2023-06-12 10:48:40Vue3学习笔记（五）——路由，Router
一、前端路由的概念与原理 1.1. 什么是路由 路由（英文：router）就是对应关系。 1.2. SPA 与前端路由 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现。 结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！ 1.3. 什么是前端路由 通俗易懂的概念：
日期 2023-06-12 10:48:40Vue3学习笔记（四）——组件、插槽、生命周期、Hooks
一、组件 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展，但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目。 1.0、SPA SPA指的是Single Page Appli
日期 2023-06-12 10:48:40Vue3学习笔记（三）——模板语法、Class 与 Style 、ES6新增数组方法、UI库介绍
一、模板语法 Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。 在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的
日期 2023-06-12 10:48:40Vue3学习笔记（二）——组合式API（Composition API）
一、常用 Composition API 官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html 组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API： 响应式 API：例如&nb
日期 2023-06-12 10:48:40Vue3学习笔记（一）——MVC与vue3概要、模板、数据绑定与综合示例
一、前端MVC概要 1.1、库与框架的区别 框架是一个软件的半成品，在全局范围内给了大的约束。库是工具，在单点上给我们提供功能。框架是依赖库的。Vue是框架而jQuery则是库。 1.2、MVC（Model View Controller） MVC的核心理念是：你应该把管理数据的代码（Model）、业务逻辑的代码（Controller）、以及向用户展示数据的代码（View）清晰的分离开 模型
日期 2023-06-12 10:48:40Vue3入门笔记自用
ref, reactive, toRefs ref定义简单的基本数据类型，如number，string等，更改其值时需对其value属性更改 reactive定义对象，
日期 2023-06-12 10:48:40全面总结 Vue 3.0 的新特性！手把手教你如何入门Vue3.0（适合小白的保姆级教程）【尚硅谷vuejs3.0笔记】
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：Re
日期 2023-06-12 10:48:40vue3学习笔记（Mixin混入）
Mixin 分发 Vue 组件中的可复用功能 不同组件使用mixin，mixin里的数据是独立的，组件间不会受影响（A组件使用mixin中的num属性，B组件也是用
日期 2023-06-12 10:48:40vue3学习笔记（异步组件，包含defineAsyncComponent、Suspense的使用）
异步组件 按需引入，用到的时候再加载，异步组件的引入需要用defineAsyncComponent进行注册。defineAsyncComponent工厂函数需要返回一个Promise对象
日期 2023-06-12 10:48:40vue3学习笔记（动态组件）
markRow：标记一个对象，使其不能成为一个响应式对象。toRaw：将响应式对象（由 reactive定义的响应式）转换为普通对象。shallowRef
日期 2023-06-12 10:48:40vue3学习笔记（插槽）
父级组件中使用 <A> </A> 并且不提供任何插槽内容时，子组件中 <slot></slot>标签中的内容当作默认内容展示。v-slot 只能添加在 <
日期 2023-06-12 10:48:40vue3学习笔记（兄弟组件传参）
兄弟组件传参数 mitt使用方式和vue2的事件大巴类似。 安装 npm i mitt -S 新建plugin/Bus.js import mitt from 'mitt ' cosnt emit
日期 2023-06-12 10:48:40Vue3学习笔记
Vue2学习笔记 【前端总路线学习笔记】 文章目录 Vue3一、Vue3简介Vue3带来了什么1.性能的提升2.源码的升级*3.拥抱TypeScript4.新的特性* 二、创建Vue3.0工
日期 2023-06-12 10:48:40