VUE项目编写总结（二）写在前面：第二阶段的知识总结来啦，这个阶段主要是项目整体结构的布局设计，通过简单的封装和方法抽离使得项目文件更加简洁直观，不过在优化时容易陷入钻牛角尖的境地，所以我们前期还是要以实现功能为主，优化放到后面再处理。一. Element UI 组件封装因为element ui全部引用整体文件过于庞大，所以我们在项目编写时，通常进行部分引用。这里我们新建一个element.js文
在如今的web开发中，基于java的应用越来越多。在这其中，servlet又扮演着十分重要的角色。本系列文章就是要介绍一些辅助进行servlet开发的工具，让大家进行开发时，有多种技术可供选择。servlet技术无疑是一种优秀的技术，java服务器端技术大都基于servlet技术。但这种技术也有其
转载
2024-10-18 19:06:55
66阅读
vue.jsvue.js只聚焦视图层，是构建数据驱动web界面的一个库。数据绑定定义：将数据和视图相关联，当数据发生变化时，可以自动更新视图。语法
1） 插值
使用双大括号{{}}，双大括号会将里面的值当做字符串进行处理；而如果值是HTML片段时，则使用三个大括号进行绑定<!-- {{text}}值改变时，文本值也会联动发生变化。即渲染一次，就
转载
2024-08-21 20:32:44
406阅读
安装 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阅读
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阅读
v-for中的key是什么作用？在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。 官方中对key的作用解释：key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销
转载
2024-02-02 11:41:40
91阅读
创建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阅读
之前我们说到，数组的方法内部其实都依赖了对象的基本语义，因此多数情况下，不需要特殊处理就能让方法按预期执行。就比如数组的includes方法，看下面代码：const arr = reactive([1,2])
effect(()=>{
console.log(arr.includes(1)) // 初始打印 true
})
arr[0] = 3 // 副作用函数重新执行，并打印fals
转载
2024-02-22 18:35:26
4719阅读
自定义组件组件是可以被复用的页面的零件，其实就是一个插件，只是在vue里叫组件去试试上面的组件，都是有脚手架版和直接引入使用的版本的
脚手架的使用需要先去main.js入口文件引入，还有css也是，查看官方文档都有的这些组件让vue的开发容易得飞起，这也是为什么说是个人就能做前端，封装得太好了，以前自己写几百行几千行的功能，在组件里主要一个标签一句代码就行，如何封装一个组件，就能理解如何使用一个组
转载
2024-07-17 20:52:31
398阅读
在绝大多数情况下，Vue 推荐使用模板<template>语法来创建应用。在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚拟 DOM。然而在某些使用场景下，我们真的需要用到 JavaScript
转载
2023-12-14 09:18:57
113阅读
前言 前面碰到一个需求：想要判断一个数是否在某个数组中，然后决定返回值 详见：一块学Vue:学习日记_2020.1.9 - 利用Vue实现冒泡排序的过程展示器_第二次优化 一开始想的方法是：this.state == 5 || this.state == 9 || this.state == 0 ? true : false; 但是感觉需要判断的数多了之后，写起来很麻烦，就想了第二种方
转载
2024-03-18 22:00:53
640阅读
在绝大多数情况下，Vue 推荐使用模板<template>语法来创建应用。在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚拟 DOM。然而在某些使用场景下，我们真的需要用到 JavaScript
转载
2023-12-14 11:04:16
89阅读
Vue3 特殊属性：key,ref,isvue3 特殊属性：keyrefis key期望值：number | string特殊属性key主要用于提示Vue的虚拟DOM算法在区分新节点列表和旧节点列表时识别VNodes。没有key的时候，Vue使用一种算法来最小化元素移动，并尽可能就地修补/重用相同类型的元素。使用key，它将根据键的顺序变化对元素重新排序，而key不再存在的元素将总是被删
转载
2023-11-13 23:17:50
137阅读
1、hookVue3 的 hook函数 相当于 vue2 的 mixin，不同在于 hook 是函数，其使用目的是为了复用代码，让setup中的逻辑更加清楚易懂。使用示例：在 src 目录下建立一个 hooks 文件夹，声明一个用于存放需要复用的代码的 js 文件，如下：文件内容如下：import {reactive,onMounted,onBeforeUnmount} from 'vu
转载
2024-03-03 09:03:58
201阅读
既然Vue通过数据劫持可以精准探测数据变化，为什么还需要虚拟DOM进行diff检测差异响应式数据变化，Vue确实可以在数据变化时，响应式系统可以立刻得知。但是如果给每个属性都添加watcher用于更新的话，会产生大量的watcher从而降低性能而且粒度过细也得导致更新不准确的问题，所以vue采用了组件级的watcher配合diff来检测差异写过自定义指令吗 原理是什么指令本质上是装饰器，是 vue
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阅读
