VUE3

# 使用vue3、egg和SQLite开发通用管理后台系统 plaform是一个基于RBAC模型开发的后台管理系统，没有多余的功能。本项目是一个以学习为目的的后台项目，旨在让前端也能充分了解RBAC模型是如何设计的，不建议用于线上，因为未经过充分的测试。 项目地址：https://github.co ......

一、创建Vue3.0工程 1.使用 vue-cli 创建 官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create ## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上 vue --version ......

tip: 带着问题去理解响应式原理why,what,how 1. 响应式原理核心点是什么? ** 数据截持 ** 依赖收集 ** 派发更新 2.vue2的响应式原理? vue3响应式原理?区别是什么? ......

## Vue项目配置.env文件 #### 在项目根目录下创建文件夹(.env.production )  ......

表单输入绑定 v-model可以绑定各种不同类型的输入，它会根据不同的元素自动使用对应的DOM属性和事件组合。 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件； <input type="checkbox"> 和 <input ......

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store） 辅助函数只能在选项式API中使用 <template> <h ......

Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 ”而存在。这也意味着，每个应用将仅仅包含一个 store 实例 在 Vue 组件中获得 Vuex 状态 import { createStore } from 'vuex' const store = cr ......

监听DOM事件，执行js代码 格式： v-on:click="methodName" 或 @click="methodName" 示例： 写js代码 <div id="app"> <button @click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ c ......

第1章 课程介绍 1 节｜12分钟第2章 前端工程开发：环境搭建 5 节｜43分钟第3章 前端工程开发关联技术：webpack 构建工具 7 节｜85分钟第4章 前端工程开发关联技术：Axios 网络请求库 8 节｜42分钟第5章 前端工程开发关联技术：Vue 脚手架 4 节｜34分钟第6章 后端工 ......

使用vue第三方库 useIntersectionObserver 创建文件 directives/index.js 导入第三方库 import { useIntersectionObserver } from '@vueuse/core' export const lazyPlugin = { i ......

子组件 菜单组件 MenuComponent 列表组件 ExtTelListComponent 状态组件 ExtTelStatusComponent 父组件 界面主体 MainIndex 实现功能：在 MainIndex 中引入 三个子组件 通过点击 菜单组件 切换加载 列表组件 和 状态组件 实现 ......

子组件 <template> <div class="menuUn Huans"> <a href="javascript:;" class="menuUna flexC fl-bet Huans" @click="menuOnClick('ExtTelStatusComponent')"><p>调 ......

在 vue3 开发中 经常会遇有 动态切换组件 的需求，下面简单写个例子，当然也还有其它方法。 用 component :is= 来变换组件 <div class="IndConK Huans overH" > <!-- 正常组件 <ext-tel-status-component ></ext-t ......

v-if，v-else-if，v-else 控制元素是否渲染，不满足条件的时候不会有相应元素。 <div v-if="type 'A'"> A </div> <div v-else-if="type 'B'"> B </div> <div v-else-if="type 'C'"> C </div> ......

directives:{ drag:{ mounted: (el, binding) => { const dragDom = el; const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); el.par ......

1、通过Prop 逐级透传问题（传统老的方法只能逐级传递） 传统方式代码如下： App.vue 1 <template> 2 <h3>祖宗</h3> 3 <Parent :msg="msg"></Parent> 4 </template> 5 6 <script> 7 import Parent f ......

Vue3关于样式的处理跟Vue2是一样的，常用的有以下几种。 1.绑定属性 html部分： <div :class="{ active: isActive }"></div> js部分： data() { return { isActive: true } } 当 isActive 值为true时， ......

npm init vite-app app-name ......

<template> <div class=""> <canvas id="canvas"></canvas> </div> </template> <script setup> import { onMounted } from 'vue'; let d const project3D = (x, ......

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能： 1 <template> 2 <h3>异步加载</h3> 3 <KeepAlive> 4 <component :is="tabCompon ......

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例 1、不使用KeepAlive，组件不保持存活，验证如下： A组件 1 <template> 2 <h3>ComponentA</h3> 3 <p>{{ message }}</p> 4 <button @c ......

1 <template> 2 <h3>动态组件(A、B两个组件动态切换)</h3> 3 <component :is="tabComponent"></component> 4 <button @click="changeHandle">切换组件</button> 5 </template> 6 7 ......

vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦，可以通过unplugin-auto-import给我们自动引入 1、安装 npm i -D unplugin-auto-import 2、在vite.config.ts中引入 import AutoImport from 'un ......

1 <template> 2 <h3>组件生命周期函数应用</h3> 3 <!--验证Dom结构加载时机--> 4 <p ref="name">我的内容</p> 5 <!--模拟网络加载数据--> 6 <ul> 7 <li v-for="(item,index) in banner" :key="i ......

跟Vue2一样，我们在工作中使用data中的属性时，很多时候不是直接拿来用，而是要经过一些计算，判断，筛选的过程。 比如一个数组，我们可能在使用前要判断 有没有元素，是否包含某个元素，然后根据不同的情况有不同的展示方式，这些如果都写在html部分，会非常不好阅读，如果多个地方要做类似的判断，则会大大 ......

## Vue3 中子父组件之间的通信 ### 一、父组件传递参数到子组件 采用defineProps #### 传递属性 父组件: ```vue 这是父组件 父组件像子组件传递参数 传递属性值 ``` 子组件: ```vue 这是子组件 属性值接收区 父组件传值接收区：字符型：{{ fatherMe ......

这里的示例都用选项式风格 在 Vue 3 中，数据是基于 JavaScript Proxy（代理） 实现响应式的。 这个示例中输出是false，因为当你在赋值后再访问 this.someObj，此值已经是原来的 newObj 的一个响应式代理。 需要注意的是newObj 并不会变成响应式。 <scr ......

监听变量的变化并触发函数 <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">点我</button> / ......

vue3六大亮点： 性能比Vue2强 可以将无用模块去掉，仅打包需要的 组合API 碎片（fragment），portal传送门（teleport），悬念（suspense） 更好的TS支持 暴露了自定义渲染API setup() 在setup函数中声明对象，代替data()。ref声明简单对象，r ......

# vue3封装echarts组件数据更新不同步问题 > 背景： ​ 记录一下项目中遇到的bug，在vue3+echarts环境下，为了方便使用，我将echarts封装成组件使用，使用的时候只需要把对应的值传入给chart组件就行，但是在传入真实数据的时候遇到了问题，就是传入value值与图表组件显 ......