变量vue3 vue css

vue3对于ref和reactive类型数据监听的区别

总结:1、对于ref类型的数据进行监听,不能使用 ()=>字段名,的方法,而是采用直接写值进行监听,案例见方式一和方式二2、对于reactive类型的数据进行监听,不要使用直接写属性名的方式监听:watch(属性名,(newVal, oldVal)=>{}),因为这种方式虽说可以执行函数,但却监听不 ......
reactive 类型 数据 vue3 vue

从0搭建Vue3组件库(十):如何搭建一个 Cli 脚手架

本篇文章将实现一个名为`create-easyest`脚手架的开发,只需一个命令`npm init easyest`就可以将整个组件库开发框架拉到本地。 ## 创建 Cli 包 首先,我们在 packages 目录下新建 cli 目录,同执行`pnpm init`进行初始化,然后将包名改为`crea ......
脚手架 组件 Vue3 Vue Cli

CSS动画和过渡的区别

CSS动画和过渡都是用来实现网页元素的动态效果,但它们在实现方式和应用场景上有一些区别。 CSS过渡(CSS Transitions)是在元素状态改变时实现平滑过渡效果的一种机制。过渡通过指定元素的属性变化,使元素从一个状态平滑地过渡到另一个状态。过渡通常用于响应用户操作、交互效果或状态变化,可以控 ......
动画 CSS

vue watch deep 用法

### 简单案例 ``` watch deep obj:{{obj}} 调用watch次数:{{times}} 改变对象 ``` ![](https://img2023.cnblogs.com/blog/1202393/202306/1202393-20230614131230156-5873063 ......
watch deep vue

Vue3中循环任务优化方案

# 需求 在使用循环任务时,往往需要使用到`setInterval`方法。其接受三个参数,分别是 1.具体执行的函数 2.执行时间间隔 3.传递个函数的参数,并返回一个id,后续可以使用这个id来停止循环的执行。具体的使用可以[查阅MDN](https://developer.mozilla.org ......
任务 方案 Vue3 Vue

15-1 shell脚本编程进阶字符串切片和高级变量

一、显示字符的长度 [root@centos8 ~]#str=`echo {a..z} |tr -d ' '` [root@centos8 ~]#echo str str [root@centos8 ~]#echo $str abcdefghijklmnopqrstuvwxyz [root@cent ......
脚本编程 字符串 变量 脚本 字符

vue 中使用 rem 后元素最终大小的计算和转换?

1.如果项目引入了rem,那么默认的html元素的font-size大小被设置为 html 元素样式中的 font-size 会被设置为 clientWidth/10 + "px",此值可以自己修改2.1rem 将等于 html 的 font-size 的大小3.如果一个元素用px作为单位设置,那将 ......
元素 大小 vue rem

ant design-vue的table表格添加rowkey的三种方式

项目场景: 知识产权模块展示表格数据 问题描述 控制台给出警告 原因分析: 未按照组件要求添加key 属性作为唯一的标识。 解决方案: 方法1::rowKey=“record=>record.number” <!-- number为表格数据data中的一个属性 --> <a-table ref="t ......
design-vue 表格 方式 design rowkey

vue watch immediate方法用法

* 通过`immediate` 选项,我们可以第一次监听时就执行回调函数,以便进行一些初始化操作. * 注意: 如果我们监听的事一个对象或数组类型数据,那么`immediate` 选项只会在实例初始化时执行一次回调操作,而不是在对象或数组内部数据变化时重新执行回调函数。 * 如果需要在内部数据变化时 ......
immediate 方法 watch vue

CSS选择器的优先级和权重。

**定义:CSS选择器的优先级和权重是用来确定当多个选择器应用于同一个元素时,哪个选择器的规则将会生效。以下是CSS选择器优先级和权重的解释:** **CSS选择器的优先级:** 1.内联样式:应用于HTML元素内部的style属性,具有最高的优先级。如 2.ID选择器:通过元素的id属性选择元素, ......
优先级 权重 CSS

转:Vue项目解决跨域

Vue项目解决跨域 使用vue配置代理服务器解决跨域连接 Vue·修改启动端口 ......
项目 Vue

Vue-router跳转和location.href有什么区别

vue-router使用pushStat进行路由更新,不刷新页面,静态跳转; 使用diff算法,按需加载,减少dom操作, 同一个页面跳转或者路由跳转 异步加载this.$nextTick(()=>{获取url}) 使用location.href来跳转,简单方便,但是刷新了页面; 不同页面间跳转 可 ......
Vue-router location router href Vue

Vue中的key

【key 是为 Vue 中 虚拟节点 的唯一标记,通过这个 key,diff 操作可以更准确、更快速】 (1)第一种情况是 v-if 中使用 key。 由于 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。 因此当使用 v-if 来实现元素切换的时候,如果切换前后含有相同类型的 ......
Vue key

vue记录滚动位置

# 1.目的 列表页进入详情页时缓存并记录滚动位置,返回列表页面不重新请求数据并滚动到离开时的位置 # 2.实现 ## 2.1.单页面 不管是浏览器前后退 还是router-link前后退都生效 ``` ``` ``` // 滚动位置 let scrollTop = 0; onActivated(( ......
位置 vue

vue事件总线

//事件总线: 类似于单独对于一个功能的处理。组件间通信的方式;适用于任意组件间通信 // export default{ // //监控事件 // $on(eventName,handler){ // if(!listeners[eventName]){ // listeners[eventNam ......
总线 事件 vue

vue实现子父组件之间通信

<template> <div> <button @click="handleClick" :disabled="isLoading"> {{ isLoading ? "loading" : "submit" }} </button> <div class="err">{{ error }}</di ......
组件 之间 vue

再也不用担心变量类型错误!学会JS中如何轻松检查变量类型

在JavaScript编程中,了解如何精确地检查变量类型是至关重要的技能,而新手程序员可能会因此感到困惑。本篇文章将详细介绍JS中检查变量类型的方法,包括使用typeof运算符、instanceof关键字、Object.prototype.toString()方法、以及ES6 语法中的Symbol.... ......
变量 类型 不用 错误

CSS常用属性

## 颜色 1. **RGB** (红,绿,蓝)三种颜色的集合,最低值是0(十六进制00)到最高值255(十六进制FF) 2. **HSL** H色相(0-360),S饱和度(百分比),L亮度(百分比) 3. (不)透明度 **rgba、hsla** (新版浏览器可不写a,直接写4个值) ## li ......
属性 常用 CSS

vue路由

1、 在dos窗口下安装 ``` npm install vue-router@3 --save-dev --registry=http://registry.npmmirror.com ``` 2、配置路由 ① 在src目录下面,新建 router文件夹 ② 然后再其中创建 index.js 路由 ......
路由 vue

vue组件之间的数据传递

一、组件之间的关系 父子关系、兄弟关系、跨级关系 二、父子之间数据传递 1、父组件向子组件传递【使用 props】 第一步:在父组件中使用子组件时,给子组件绑定属性 第二步:在子组件中使用props接收绑定的属性值 2、子组件向父组件传递【使用 $emit】 第一步:在子组件中通过$emit触发指定 ......
组件 之间 数据 vue

用纯HTML,JS,CSS实现横向滚动标签页

### 前言 前不久,在我的一个项目中,需要展示一个横向滚动的标签页,它支持鼠标横向拖动和点击切换。在实现的过程中,我发现这个小功能需要同时用到前端的三辆马车,但是实现难度不高,而且最终效果还不错,是个难得的初学者项目,于是萌生了写这篇文章的想法,希望对初学者有所帮助。同时为了避免初学者学习框架,我 ......
横向 标签 HTML CSS

【vue】前端下载文件自定义文件名称

【vue】前端下载文件自定义文件名称 https://blog.csdn.net/weixin_48200589/article/details/125067618 下载文件自定义文件名称 文件下载名称不想和后端提供的URL一样怎么办呢?1.首先给按钮去绑定一个事件2.正常我们的下载处理方式3.自定 ......
文件 前端 名称 vue

Vue3

[toc] # 一 vue3 介绍 ## 1 Vue3的变化 ### 1.1 性能的提升 * 打包大小减少41% * 初次渲染快55%, 更新渲染快133% * 内存减少54% ### 1.2 源码的升级 * 使用Proxy代替defineProperty实现响应式 * 重写虚拟DOM的实现和Tre ......
Vue3 Vue

Lua注册表和全局变量

Lua给用户提供了一个注册表,这个注册表实际上就是一个普通的Lua表,所以用户可以在里面存放任何Lua值。有趣的是,这个注册表虽然是给用户准备的,但Lua本身也用到了它,比如说Lua全局变量就是借助这个注册表实现的。 预先会往注册表中放入一个全局环境,全局环境也是一个普通的Lua表,所有的Lua全局 ......
注册表 全局 变量 Lua

Vue-watch-deep 深度监听

首先明确一个概念,Vue 是可以监听到 多层级数据改变的,且可以在页面上做出对应展示。但是 Vue 提供的 watch 方法,默认是不提供 深度监听的( deep 默认为 false,也就是不开启深度监听) (刚挂载的时候是不执行的,只有挂载完成之后的变化才会执行。如果我们想要初次挂载的时候就l执行 ......
Vue-watch-deep 深度 watch deep Vue

vue3进阶——组件基础

组件允许我们将 UI 划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构,这和我们嵌套 HTML 元素的方式类似,Vue 实现了自己的组件模型,使我们可以在每个组件内封装自定义内容与逻辑。 ![image](https://img2023. ......
组件 基础 vue3 vue

vue 的双向绑定原理(vue 的响应式原理)流程

一、原理 二、流程 第一步,“数据劫持” vue 2.x 用 Object.defineProperty() 方法来实现数据劫持,为每个属性分配一个 订阅者集合的管理数组 dep vue 3.x 用 ES6 的 Proxy 构造函数来实现数据劫持。 第二步,“添加订阅者” 在编译的时候在该属性的数组 ......
原理 双向 vue 流程

vue中computed的详细讲解

1.定义 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新 2.用法 一般情况下,computed默认使用的是getter属性 3.computed的响应式依赖(缓存) 1. computed的每一个计算属性都会被缓存起来,只要计算属性所依赖 ......
computed vue

《vue短跑》基础语法

# ref和$ref 在Vue中,\$ref是一个特殊的属性,它允许您引用组件或DOM元素。可以使用$ref属性在组件或元素上绑定一个唯一的标识符,然后在Vue实例中使用\$ref来访问该组件或元素。类似于id选择器。 例如,假设您有一个组件: 点击查看代码 ``` Focus Input ``` ......
短跑 语法 基础 vue