Vue教程01-课程导入1.传统Web开发中的问题1.1浏览传统Web开发的项目1.2传统Web开发中的问题1.3传统DOM元素的交互操作方法2.什么是Vue2.1Vue的优点2.2Vue应用场景2.3第一个Vue案例3.什么是MVVM?3.1MVVM是什么?3.2MVVM的组成部分4.Vue是如何实现MVVM的4.1加载data对象4.2加载虚拟DOM树4.3加载methods对象5.如何使用            
                
         
            
            
            
            Vue3 echarts自适应解决方案实战resize.jsimport {nextTick, ref} from "vue";
import {debounce} from 'throttle-debounce';
/*chart 是echarts图的实例*/
export const chart = ref();
/*检测侧边栏是否缩放*/
let sidebarElm;
/*使用eleme            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-09-16 10:09:51
                            
                                53阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            目录分析打开项目,依次分析下目录结构,项目目录结构如下 项目目录结构如下单文件组件.vue目完成后,我们看到src 目录下有一个componets 目录,里面有一个 HelloWorld.vue 文件(单文件组件),内容如下(1)template模板—作用:定义展示模板信息 (2)script 标签—作用:导出组件模块 script中都是js 代码,它定义这个组件中所需要的数据和及其操作在.vue            
                
         
            
            
            
            安装 JSX 插件在 Vue2 中要想使用 jsx 开发,需要安装 @vue/babel-preset-jsx 等插件,之后在 babel 里指定即可,详细可以参考下面的 Vue2 GitHub 文档Vue2:GitHub 文档 —— Babel Preset JSX最近在使用 Vue3,突然想用 jsx 进行开发部分页面,顺便记录一下,也可以参考下面的 Vue3 GitHub 文档Vue3:Gi            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-10-24 08:37:56
                            
                                264阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            一、什么是jsx在 JavaScript 里面写 HTML 的语法,就叫做 JSX,算是对 JavaScript 语法的一个扩展.(在vue3项目中相当于单文件组件,.vue)使用的是jsx语法二、jsx语法1.插值。与 vue 模板语法中的插值一样,但是双大括号 {{}} 变为了单大括号 {}。大括号内支持任何有效的 JavaScript 表达式,比如:2 + 2,user.firstName,            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-07-21 22:24:22
                            
                                265阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            Excel 导入导出功能Excel 导入功能vue-template-admin upload 组件解析知名的 Vue 后台管理系统框架 vue-template-admin 内封装了一个 Upload 上传组件,可以使用它来实现导入导出功能。upload.vue:<template>
  <div class="uploadExcel">
    <input re            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-04-03 13:58:46
                            
                                48阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            v-for中的key是什么作用?在使用v-for进行列表渲染时,我们通常会给元素或者组件绑定一个key属性。 官方中对key的作用解释:key属性主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes;如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法;而使用key时,它会基于key的变化重新排列元素顺序,并且会移除/销            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-02-02 11:41:40
                            
                                93阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            1、Vue3简介1.1、Vue3带来了什么1.性能的提升Vue3与Vue 2相比,在包大小(使用 tree-shaking 时减轻多达 41%)、初始渲染(速度提高多达 55%)、更新(多达 133% 更快)和内存使用(最多减少 54%)。打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-10-23 19:59:39
                            
                                180阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            创建Vue3项目方式一:
    使用vue-cli:vue的脚手架----->创建vue项目----->构建vue项目----->前端工具链
    创建方式还是和之前一样,Vue版本要选择Vue3的版本
方式二:
    使用vite创建:
    vite:https://cn.vitejs.dev/
        :npm create vue@latest            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-06-24 23:02:55
                            
                                282阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            本人菜鸟一枚,从网上下了个ssm项目,用eclipse写的,但是我用的idea,需要进行很多配置,但是又没做过java,也没配过,所有走了很大弯路,瞎琢磨一天才跑起来,特此记录下步骤包括环境、路径等配置和tomcat环境配置。 一、IDEA导入eclipse项目 1.使用idea打开项目 2.选择项目文件3## 右击项目打开module settings. 4.依次配置这几个模块,librarie            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-09-17 13:47:32
                            
                                107阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            在绝大多数情况下,Vue 推荐使用模板<template>语法来创建应用。在 Vue 3 的项目开发中,template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML,但 Vue 其实会把 template 解析为 render 函数,之后,组件运行的时候通过 render 函数去返回虚拟 DOM。然而在某些使用场景下,我们真的需要用到 JavaScript            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-12-14 09:18:57
                            
                                113阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            在绝大多数情况下,Vue 推荐使用模板<template>语法来创建应用。在 Vue 3 的项目开发中,template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML,但 Vue 其实会把 template 解析为 render 函数,之后,组件运行的时候通过 render 函数去返回虚拟 DOM。然而在某些使用场景下,我们真的需要用到 JavaScript            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-12-14 11:04:16
                            
                                89阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            1、hookVue3 的 hook函数 相当于 vue2 的 mixin,不同在于 hook 是函数,其使用目的是为了复用代码,让setup中的逻辑更加清楚易懂。使用示例:在 src 目录下建立一个 hooks 文件夹,声明一个用于存放需要复用的代码的 js 文件,如下:文件内容如下:import {reactive,onMounted,onBeforeUnmount} from 'vu            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-03-03 09:03:58
                            
                                201阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            Vue3 特殊属性:key,ref,isvue3 特殊属性:keyrefis key期望值:number | string特殊属性key主要用于提示Vue的虚拟DOM算法在区分新节点列表和旧节点列表时识别VNodes。没有key的时候,Vue使用一种算法来最小化元素移动,并尽可能就地修补/重用相同类型的元素。使用key,它将根据键的顺序变化对元素重新排序,而key不再存在的元素将总是被删            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-11-13 23:17:50
                            
                                137阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            前言在实际开发中导入功能是非常常见的,导入功能前端并不难,难的是后端字段的对应,主要处理在后端。我们只需要用饿了吗ui upload上传组件封装一层就可以了,主要起到上传文件作用。通过按钮跳转到页面,携带参数,下载excel模板。导入页面接受参数区分从哪一个页面过来。页面EXCEL导入成功就回到上一级页面,刷新数据。失败动画效果,把失败数据原因用表格展现出来。代码实现1.整体代码<templ            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-03-19 16:00:13
                            
                                320阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            Vue3 Diff 算法与key先来看看官方的解释
key属性主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes;如果不使用Key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法;而使用key时,它会基于key的变化重新排列元素顺序,并且会移除/销毁key不存在的元素;官方的解释对于初学者来说并不好理解,比如下面的问题:什么是新旧nodes            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-01-21 08:31:59
                            
                                132阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            先上图 如何在我们切换tab标签的时候,缓存标签最后操作的内容,简单来说就是每个标签页中设置的比如搜索条件及结果、分页、新增、编辑等数据在切换回来的时候还能保持原样。看看keep-alive是如何实现该功能的。首先我们要了解keep-alive的基本使用。具体介绍请查看官方文档(https://cn.vuejs.org/guide/built-ins/keep-alive.html#ba            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-12-25 19:32:53
                            
                                447阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            模板指令组件上 v-model 用法已更改,替换 v-bind.synckey 属性Vue 3.x 不建议在 v-if/v-else/v-else-if 的分支中使用 key,如果非要使用,请设置唯一的key值。Vue 3.x 可以将 key值 设置在template 上 (Vue2.x 需要将key值设置到子节点上)v-if 与 v-for 的优先级对比2.x 版本中在一个元素上同时使用 v-i            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-02-26 10:34:59
                            
                                93阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            前言—9 月 19 日凌晨,Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,"One Piece" 的代号也昭示了其开拓伟大航路的野心。Vue3 的新特性主要有 Composition API、Teleport、Fragments 和 <script setup />& <style vars /> 等。我们是否也可以在小            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-08-24 11:03:52
                            
                                321阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            1.安装 npm install vditor --save 2.使用 2.1在<template> 标签内创建一个div <div ref="editorRef"></div> 2.2 在<script>标签里引入js和css文件 import { onMounted, onBeforeUnmou ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-09-13 16:02:00
                            
                                1627阅读
                            
                                                                                    
                                2评论