写法vue2 vue js

vue数组和对象进行 watch 和 watchEffect 对比

const arr1 = ref([]); const arr2 = reactive([]); const obj1 = ref({}); const obj2 = reactive({}); watchEffect(() => { console.log("watchEffect arr1", ......
数组 watchEffect 对象 watch vue

超详细!新手如何创建一个Vue项目

本篇仅以HBuilder X为例,其余开发软件同样适用 这里两种方法,使用script标签直接引入本地的vue.js或使用CDN引入。 ......
新手 项目 Vue

vue引入粒子背景图效果

安装依赖 npm install vue-particles --save-dev main.js import VueParticles from 'vue-particles' Vue.use(VueParticles) template <vue-particles color="#409EF ......
粒子 背景 效果 vue

如何在vue3获取 DOM 元素

获取dom的ref元素名称,要对应暴露的名称,不然会出现无效的dom报错,也就是拿到的是null 在setup中,使用ref(null)获取dom 不能直接在setup里面拿到dom的值,因为setup对应的生命周期是created,所以必须在后续的生命周期钩子里面拿到,比如onMounted 注意 ......
元素 vue3 vue DOM

Js/Jquery获取自定义属性的方法

html: <span id="item"data-test='test' ></span> 方法一、原生JS的 getAttribute 获取自定义属性 设置属性 .setAttribute("属性","值") 获取属性 .getAttribute("属性") var span=document. ......
属性 方法 Jquery Js

js和jquery获取屏幕宽高以及加margin和padding等边距的宽高

Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body. ......
屏幕 padding jquery margin

DayOne-Vue的基本使用指令以及过滤器

一、Vue 1、什么是Vue Vue是一个流行的JavaScript框架,用于构建用户界面。它被设计成渐进式的,可以逐步应用到现有的项目中,也可以构建全新的应用。Vue的核心库只关注视图层,因此易于集成到其他库或现有项目中。Vue具有响应式和组件化的特性,使得开发者可以更轻松地管理和维护复杂的用户界 ......
过滤器 指令 DayOne-Vue DayOne Vue

Vue3——使用deep进行样式穿透的时候发出v-deep警告

前言 其实只是一个警告,如果你不在意也是可以的,不过有点强迫症就按着提示说的改了,然后又去官网看了下对应的文档; !> ::v-deep usage as a combinator has been deprecated. Use :deep() instead. 这里没啥好说的,因为Vue3的文档 ......
deep 样式 时候 v-deep Vue3

js对象获取属性的方法

第一种:点语法(首选) eg: 首先用对象字面量创建一个对象 let person = { name: "Nicholas", age: 29 } console.log(person.name) //"Nicholas" console.log(person.age) // 29 注:在对象字面量 ......
属性 对象 方法

【装饰器设计模式详解】C/Java/JS/Go/Python/TS不同语言实现

简介 装饰器模式(Decorator Pattern)是一种结构型设计模式。将对象放入到一个特殊封装的对象中,为这个对象绑定新的行为,具备新的能力,同时又不改变其原有结构。 如果你希望在无需修改代码的情况下即可使用对象,且希望在运行时为对象新增额外的行为,可以使用装饰模式。或者你用继承来扩展对象行为 ......
设计模式 语言 模式 Python Java

如何正确的安装Node.js及环境变量配置?

Node.js是一款基于Chrome V8引擎的JavaScript运行环境。它可以在服务器端运行JavaScript代码,具有高效、轻量、跨平台等特点,被广泛应用于Web开发、命令行工具、游戏开发等领域。 下面是Node.js的安装和配置教程: 安装Node.js 访问Node.js官网(http ......
变量 环境 Node js

three3d.js

// 城市 - 数据显示 setCityNum(vector, num, data) { // CSS2DRenderer生成的标签直接就是挂在真实的DOM上,并非是Vue的虚拟DOM上 const div = document.createElement('div'); div.className ......
three3d three3 three 3d js

vue指令之事件指令

什么是事件指令 事件指的是:点击事件,双击事件,划动事件,焦点事件... 语法 v-on:事件名='函数' # 注意:函数必须写在 methods配置项中 示例 # 点击按钮,隐藏h1标签 <body> <div id="app"> <button v-on:click="myclick">点我</ ......
指令 事件 vue

vue 之 computed方法自带缓存踩坑1

使用场景:ant-vue 穿梭框使用 页面使用computed方法处理组织结构数据,退出页面时,对加载数据做了set null 操作,再次进入页面时,穿梭框只显示数据,无法做左右穿梭功能。 原因:computed方法在页面初始化时执行,且只执行一次,并会将方法内的数据进行缓存。退出页面做了数据清除工 ......
缓存 computed 方法 vue

js中e.clientX e.pageX e.offsetX e.screenX之间的区别

event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY,但它们使用的 ......
之间 clientX offsetX screenX pageX

h5 - 使用pdf.js 预览pdf

下载地址 http://mozilla.github.io/pdf.js/getting_started/#download 点击后会下载,有点慢 打开后我加了两个文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t ......
pdf h5 js

vue 中数据更新视图不更新

Vue无法检测实例被创建时不存在于data中的变量 new Vue({ data:{}, template: '<div>{{message}}</div>' }) this.message = 'Hello world !' // `message` 不是响应式的页面不会发生变化 解决: new ......
视图 数据 vue

Win7安装node.js

问题 win7直接安装node.js官网的最新版安装不成功,是因为最新版的版本高,不支持win7,只支持win8以上。 解决 安装低版本的node.js,我选的是12.22.12版本,然后为其配置环境变量即可。 如果需要npm,你只需要下载一个版本,解压后将除node之外的所有文件放到你安装好的目录 ......
Win7 node Win js

vue中$forceUpdate()的使用

刷新数组的作用 this.$forceUpdate(); 具体请看:vue中$forceUpdate()的使用 - 简书 (jianshu.com) ......
forceUpdate vue

使用vue2+element-ui+vuex实现后台管理系统的头部背景色动态点击修改

**以下内容仅供自己学习使用 话不多说,直接上代码 首先去vuex里面 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { headerColor ......
头部 element-ui 后台 管理系统 背景

js实现拖拽功能(拖拽排序)

<template> <transition-group class="container" name="sort"> <div class="drag-item" v-for="(v,i) in dragArray" :key="i" :draggable="true" @dragstart="d ......
功能

js中常见的面试题

以下是几个常见的 JavaScript 面试题: 1. 创建对象的几种方式 JavaScript 中创建对象的几种方式有:字面量、构造函数、Object.create()、class 等。其中字面量是最简单和最常见的创建对象的方式,构造函数可以通过工厂模式或者原型链来实现复用,Object.crea ......
常见

vue项目内存溢出,JavaScript heap out of memory

第一种方式: 参考地址:https://blog.csdn.net/wj197927/article/details/124323835 第二种方式: 修改NODE_OPTIONS NodeJS启动的应用,内存使用是有上限的;默认为4GB(不同机器环境可能会有不同)。NodeJS应用使用的内存上限, ......
JavaScript 内存 项目 memory heap

项目实践后的图片压缩完整使用过程【vue3+js】

van-uploader + 图片压缩 + 图片base64转成file compressImage.js const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg'] const MAXSIZE = 1024 * 1024 * 2; const M ......
过程 项目 图片 vue3 vue

js实现文字左右轮播

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .textDiv{ position: relative; width: 70%; margin: 0 auto; ......
文字

npm run dev 出现问题:vue-admin-template-master/node_modules/.bin/vue-cli-service: Permission denied

在Mac环境下,当复制Vue-cli项目或通过版本工具获取已有项目后,执行命令npm run serve进行调试时,可能会提示XXX/node_modules/.bin/vue-cli-service: Permission denied 权限不足的问题。 解决方案:找到项目的根目录,打开终端,输入 ......

VUE watch监听器的基本使用方法详解

1、下面代码是watch的一种简单的用法 <div id="app"> <input type="text" v-model="firstName" /> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri ......
监听器 使用方法 方法 watch VUE

在线直播系统源码,Vue3中全局配置 axios

在线直播系统源码,Vue3中全局配置 axios 1. 简单项目的全局引用 如果只是简单几个页面的使用,无需太过复杂的配置就可以直接再 main.js 中进行挂载 import Vue from "vue"; /* 第一步下载 axios 命令:npm i axios 或者yarn add axio ......
在线直播 全局 源码 系统 axios

vue3使用iconfont字体图标时的注意事项

前言 iconfont地址:https://www.iconfont.cn/ 正文 在代码中如何引用 https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.27&helptype=code 字体图标的自带颜色 有些字体图标是 ......
图标 注意事项 iconfont 字体 事项

Wiki.js配置LDAP认证

安装好wikijs 之后, 可以进行进一步的详细配置. 这里介绍 LDAP 认证的配置. 在 管理 -> 身份验证 -> 添加策略 -> 选择 LDAP/AD , 如下: 接下来进行详细配置: 显示名称: 按需修改 是否启用: 是 LDAP URL: 格式为: ldap://serverhost:3 ......
Wiki LDAP js