写法vue2 vue js
VUE3单页面应用开发常用工具
Vite 一种新型的前端构建工具，它主要由两个部分做成 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。 社区模板 create- ......
vue_中文输入法情况下, 输入框v-model绑定值中没有输入值但却触发input事件
- 今天写的一个搜索框, 要求输入字符时不作处理, 直到用户点击搜索按钮时才执行搜索逻辑; 当用户将搜索框文本删除至空字符串时, 执行一次无搜索值的搜索逻辑, 用于将表格数据恢复至无筛选; 在这个功能上我想当然地使用了input事件用于触发输入事件, 但是被测试出bug: 当输入法是中文时, 在选字 ......
VUE element-ui之table表格全局排序
### 一 调用后端接口排序功能 步骤： 标签中定义排序方法： ``` ``` 要排序的字段定义排序关键字sortable ： ``` //注意：调用接口排序时必须sortable="true"，表格自带排序则只需sortable sortable="true" ``` methods中实现全局排序 ......
fabric.js 判断点击坐标是否在某个子元素内
通过 containsPoint 方法坐标是否在某个元素内 const rect = new fabric.Rect({ width: 100, height: 100, fill: 'red', }) canvas.add(rect); canvas.on('mousee:down', (even ......
js打字输出效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="p1">啊啊啊啊啊啊啊啊啊啊啊啊啊</p> </body> <script> var p ......
vue实现简单表单收集
# vue实现简单表单收集 ## 实现 ```vue 表单 v-model收集的是value值 2、如果 v-model收集的是value值，但要自己配置value 3、如果 如果没有配置value,收集的是checked 如果value初始值是数组收集的是value，若非数组，收集是的checke ......
vue3 watch 监听响应式数据变化 改变img的src
目标：用一个图片来监视全局websocket对象的连接状态 全局websocket的写法详见：https://www.cnblogs.com/hailexuexi/p/17577818.html main.js 全局对象 websocket的连接状态 //全局对象 const globalData= ......
在Vue3后台管理系统中使用watch和watcheffect
1、watch 在 Vue3 中的组合式 API 中，watch 的作用和 Vue2 中的 watch 作用是一样的，他们都是用来监听响应式状态发生变化的，当响应式状态发生变化时，都会触发一个回调函数。 const message = ref("test"); watch(message, (n ......
Vue中key的作用
1.虚拟Dom中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】， 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2.对比规则： (1).就虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容 ......
使用three.js与WebGL相比有什么优势？
推荐：使用NSDT场景编辑器助你快速搭建可二次编辑的3D应用场景 特点 WebGL和Three.js是两个与网页3D图形渲染相关的技术。以下是它们的一些特点： WebGL: 基于OpenGL ES标准，为网页提供了一种基于GPU加速的图形渲染API。 具有高性能的图像处理能力，可以在支持WebGL的 ......
vue——debounce防抖函数无效
参考： vue记录-vue中使用lodash _.debounce防抖不生效原因，解决方案 https://blog.csdn.net/Delete_89x/article/details/122000444 问题代码： <el-input v-model="slotProps.form.condi ......
Vue3 toRef响应式失效问题排查
### 父组件 ```html const stuRecordInfo = ref({ stuNum: 11111 }) // 接口请求返回 stuRecordInfo.value.stuNum = 22222 ``` ### 子组件 ```html const info = toRef(props ......
vue中export default data()外面的数据如何通过$t获取动态值
如果将数据放到外面的`const`中，而不是在Vue组件的`data`选项中，那么无法直接通过`$t`方法来获取翻译文件的值。因为`$t`方法是Vue-i18n插件提供的实例方法，需要在Vue组件中使用。 如果你想在外部使用`$t`方法来获取翻译文件的值，可以将Vue-i18n的实例导出，并在外部文 ......
js计算一串数字最长子链长度
假设有一串字符串"186 186 150 200 160 130 197 200"；现在求它的最长升序子串长度。let str ="186 186 150 200 160 130 197 200";let arr = str.split(" "); // 转化为数组let arrLeft = []; ......
在springboot项目中部署vue打包的dist以及刷新遇到404的解决方法
一、在springboot项目中部署dist 新建一个springboot项目，并将dist复制到resources目录下面，同时在application.yml添加配置即可，操作结果如下图所示： 添加的配置代码如下： spring: web: resources: static-locations ......
CentOS 7.9 一键安装 Node.js Golang Docker 环境
本脚本仅支持CentOS7.9_x64， 安装 golang 1.21.0 node.js 16.20.2 docker latest ``` bash #!/bin/bash yum install -y wget make NODE_VERSION=node-v16.20.2-linux-x64 ......
nvm 管理 Node.js 版本
# 通过 NVM 安装、管理Node.js 版本(Windows) ## 介绍 NVM 可以让我们通过指令安装指定版本，并且可以切换当前Node.js 版本，不用花时间在解决升版和降版。 ## 安装 链接： https://github.com/coreybutler/nvm-windows 选择最 ......
nvm 管理 Node.js 版本
# 通过 NVM 安装、管理Node.js 版本(Windows) ## 介绍 NVM 可以让我们通过指令安装指定版本，并且可以切换当前Node.js 版本，不用花时间在解决升版和降版。 ## 安装 链接： https://github.com/coreybutler/nvm-windows 选择最 ......
Vue 中请求同步执行解决方案
有很多小伙伴在使用Vue的时候都会遇到一种情况，form表单修改回显时，某个下拉框里的内容回显乱码，这是因为Vue是的请求方法是异步请求：简单来说，form表单内容先获取了出来，而项目阶段的下拉框随后才获取出来 // 表单<el-col :span="12"> <el-form-item :labe ......
Vue的组件data为什么必须是一个函数?
vue中的data必须是函数是为了保证组件的独立性和可复用性。 实例是通过构造函数来创建的，每个构造函数可以new多个实例，每个实例都会继承原型上的方法和属性， 在vue中，一个vue组件就是一个vue实例，当一个组件被复用多次，就会创建多个实例。如果data是对象， 那么被多次复用的这个组件，在某 ......
Web 国际化：新增越南语语系（vue i18n）
前提： 1. 在src/locales文件夹中，新增vi.json文件 背景： 1. vue 步骤： 1. 在main.js中， import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: lo ......
Vue Router
什么是路由 路由就是URL地址，地址不同，则显示的页面内容不同，路由分为前端路由和后端路由，Vue属于前端框架，因此我们讲解的路由也是前端路由。 Vue是单页面应用程序，通过hash(#)来实现不同页面之间的切换。 什么是单页面应用程序？通俗地讲就是不需要刷新页面，所有组件都在一个页面上的应用程序。 ......
JS面试题
###事件委托 * 事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会传递到父节点；因此可以把子节点的监听函数定义在父节点上（这样父节点就是绑定事件的节点），父节点可以通过事件对象获取目标节点（就是触发事件的节点），由父节点的监听函数统一处理多个子元素的事件，这种方式就是事件委托。 ......
Vue 项目性能优化实践
Vue已经成为前端必备利器了，Vue首页加载速度慢是很常见的问题，dist文件的体积差不多都在10m左右，解决方式也有很多，最简单的方式增加服务器的配置性能，当然在预算有限的情况下，如果通过优化来提升速度呢。 比如在一台普通配置服务器上，差不多加载速度在15s左右，那是没办法接受的，不管是用户体验还 ......
【开源三方库】bignumber.js：一个大数数学库
OpenHarmony（OpenAtom OpenHarmony简称“OpenHarmony”）三方库，是经过验证可在OpenHarmony系统上可重复使用的软件组件，可帮助开发者快速开发OpenHarmony应用。如果是发布到开源社区，称为开源三方库，开发者可以通过访问开源社区获取。接下来我们来了 ......
JS的执行还分是谁发起的？
这一部分首先我们考虑一下，如果我们是浏览器或者 Node 的开发者，我们该如何使用 JavaScript 引擎。 当拿到一段 JavaScript 代码时，浏览器或者 Node 环境首先要做的就是；传递给 JavaScript 引擎，并且要求它去执行。 然而，执行 JavaScript 并非一锤子买 ......
vue通讯的几种方式
1.props 和 $emit。父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。 2. 父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。 3.$refs 获取组件实例。 4.envetBus 兄弟组件数据传递， ......
webpack压缩 html 和 js
转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack压缩 html 和 js 一、压缩 js /* webpack.config.js webpack的配置文件 */ module.exports = ......
webpack配置js 语法检查 eslint
转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack配置js 语法检查 eslint js 语法检查主要用到的 loader 和插件有：eslint-loader eslint eslint-confi ......
webpack的js兼容性处理
转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack的js兼容性处理 js兼容性检查主要用到的 loader 有 babel-loader@8.3.0 @babel/core@7.14.6 @babel ......