当前位置: 首页 > news >正文

vue2与vue3知识点

1.vue2(optionsAPI)选项式API
2.vue3(composition API)响应式API

vue3 setup 中this是未定义(undefined)vue3中已经开始弱化this

vue2通过this可以拿到vue3setup定义得值和方法

setup语法糖

ref =========> 可以定义:基本类型、对象类型得响应式数据

reactive ======> 定义:对象响应式数据

toRef 的作用是将一个响应式对象中的属性转换成单独的响应式引用

toRefs 将一个对象的所有属性变成响应式引用,

import { reactive, toRefs } from 'vue';export default {setup() {// 创建一个响应式对象const state = reactive({count: 0,name: 'Vue 3'});// 使用toRefs将响应式对象的属性转换为响应式引用const refs = toRefs(state);// 返回响应式引用,以便在模板中使用return {...refs};},
};
<template><div><!-- 使用ref --><el-button type="warning">Warning</el-button><el-button type="danger" @click="changeData">Danger</el-button><div>姓名{{ name }}</div><div>年龄{{ age }}</div><div>电话{{ tel }}</div><!-- 使用reactiv --></div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
//数据
let name = ref('张三')
let age = ref(42)
let tel = ref(15231971993)
const changeData = () => {age.value = age.value + 10
}
// reactive
let car = reactive({brand: '银行',price: 20,color: 'red'}
)
console.log(car,'car')
</script>

相关文章:

vue2与vue3知识点

1.vue2&#xff08;optionsAPI&#xff09;选项式API 2.vue3&#xff08;composition API&#xff09;响应式API vue3 setup 中this是未定义&#xff08;undefined&#xff09;vue3中已经开始弱化this vue2通过this可以拿到vue3setup定义得值和方法 setup语法糖 ref > …...

从源码中学习动态代理模式

动态代理模式 动态代理是 Java 反射&#xff08;Reflection&#xff09;API 提供的一种强大机制&#xff0c;它允许在运行时创建对象的代理实例&#xff0c;而不需要在编译时静态地创建。 Java 提供了两种主要的方式来实现动态代理&#xff1a; 基于接口的动态代理&#xff1a…...

谷歌浏览器完美清除缓存

1.在页面上按下键盘的F12&#xff0c;打开控制台。 2.鼠标放到刷新图标上&#xff0c;点击鼠标右键&#xff0c;选择‘清空缓存并硬性重新加载’。 这样浏览器对网站页面的缓存就彻底被清理干净了。 目前支持该操作方式的浏览器有谷歌和Edge浏览器。 有的浏览器不支持该方式操…...

《如何高效学习》

有道云笔记 第一部分 整体性学习策略 结构 结构就像思想中的一座城市&#xff0c;有很多建筑物&#xff0c;建筑物之间有道路相连&#xff0c;有高大而重要的与其他建筑有上百条路相连&#xff0c;无关紧要的建筑只有少数泥泞的小道与外界相通。 建立良好的知识结构就是绘制…...

阿里云ACP认证考试题库

最近有好些同学&#xff0c;考完阿里云ACP了&#xff0c;再来跟我反馈&#xff1a;自己花700买的阿里云ACP题库&#xff0c;结果答案是错的&#xff01; 或者考完后发现&#xff0c;买的阿里云ACP题库覆盖率只有50%&#xff01; 为避免大家继续踩坑&#xff0c;给大家分享一个阿…...

学习经验分享【38】YOLOv11解读——最新YOLO版本

YOLO算法更新速度很快&#xff0c;已经出到V11版本&#xff0c;后续大家有想发论文或者搞项目可更新自己的baseline了。后续将改进YOLOv11算法&#xff0c;有需要的朋友可关注&#xff0c;我会持续进行更新。 YOLO11是Ultralytics YOLO系列实时目标检测器的最新迭代版本&#x…...

电商选品/分析| 亚马逊常见插件爬虫实战之-helium插件

说明 插件爬虫相当于二次爬虫,二次加工信息,因为大部分插件信息也是从正规网上去获取数据,这次列举helium插件爬虫案例,其他插件爬虫也是类似这个方式. 需求 1、⽤⾕歌浏览器&#xff0c;下载chrome extension&#xff1a;“Helium 10 2、登录helium10 3、打开 打开Amazo…...

遇到慢SQL、SQL报错,应如何快速定位问题 | OceanBase优化实践

在数据库的使用中&#xff0c;大家时常会遇到慢SQL&#xff0c;或执行出错的SQL。对于某些SQL问题&#xff0c;其错误原因显而易见&#xff0c;但也有不少情况难以直观判断。面对这类问题&#xff0c;我们应当如何应对&#xff1f;如何准确识别SQL错误的根源&#xff1f;是否需…...

postgresql僵尸进程的处理思路

简介 僵尸进程&#xff08;zombie process&#xff09;是指一个已经终止但仍然在进程表中保留条目的进程。正常情况下&#xff0c;当一个进程完成执行并退出时&#xff0c;操作系统会通过父进程调用的wait()或waitpid()系统调用来收集该子进程的退出状态。如果父进程未及时调用…...

Springboot 练习

Springboot练习——分页查询 Emp类 package com.wzb.pojo20240930;import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;import java.time.LocalDate; import java.time.LocalDateTime;Data NoArgsConstructor AllArgsConstructor public…...

ISA-95制造业中企业和控制系统的集成的国际标准-(3)

ISA-95 文章目录 ISA-95ISA-95设备对象模型一、设备对象模型是什么&#xff1f;二、设备对象模型常见组织 ISA-95设备对象模型 ISA-95 标准中的设备对象模型侧重于表示制造和生产过程中使用的物理和逻辑设备及资源。 一、设备对象模型是什么&#xff1f; 设备对象模型提供了…...

MATLAB中图形导出功能的详细使用指南

在MATLAB中&#xff0c;图形的导出是一个常见的需求&#xff0c;无论是为了报告、演示还是进一步的分析。MATLAB提供了多种方式来导出图形&#xff0c;包括使用图形用户界面(GUI)的工具&#xff0c;以及通过编程方式使用特定的函数。本文将详细介绍如何在MATLAB中导出图形&…...

助农小程序|助农扶贫系统|基于java的助农扶贫系统小程序设计与实现(源码+数据库+文档)

助农扶贫系统小程序 目录 基于java的助农扶贫系统小程序设计与实现 一、前言 二、系统功能设计 三、系统实现 5.1.1 农户管理 5.1.2 用户管理 5.1.3 订单统计 5.2.1 商品信息管理 5.3.1 商品信息 5.3.2 订单信息 5.3.3 商品评价 5.3.4 商品退货 四、数据库设计 1、…...

SpringBoot上传图片实现本地存储以及实现直接上传阿里云OSS

一、本地上传 概念&#xff1a;将前端上传的文件保存到自己的电脑 作用&#xff1a;前端上传的文件到后端&#xff0c;后端存储的是一个临时文件&#xff0c;方法执行完毕会消失&#xff0c;把临时文件存储到本地硬盘中。 1、导入文件上传的依赖 <dependency><grou…...

git clone或repo init 时报错:fatal: 协议错误:错误的行长度 xxx

执行repo init或git clone时报错:protocol error: bad line length 或协议错误:错误的行长度 系统版本:Ubuntu20.04 repo version v2.47 repo launcher version 2.45 git version 2.25.1 报错信息 fatal: 协议错误:错误的行长度 948 fatal: 远端意外挂断了 repo: err…...

SpringBoot2(Spring Boot 的Web开发 springMVC 请求处理 参数绑定 常用注解 数据传递 文件上传)

SpringBoot2&#xff08;Spring Boot 的Web开发 springMVC 请求处理 参数绑定 常用注解 数据传递 文件上传&#xff09; 一、Spring Boot的Web开发 1.静态资源映射规则 总结&#xff1a;只要静态资源放在类路径下&#xff1a; called /static (or /public or /resources or …...

成都网安周暨CCS2024 | 大模型安全与产业应用创新研讨活动成功举办

9月11日-12日&#xff0c;作为2024年国家网络安全宣传周成都系列活动的重磅活动之一&#xff0c;CCS 2024成都网络安全系列活动在成都举行。“大模型安全与产业应用创新研讨活动”同期举办&#xff0c;本场活动由百度安全、成都无糖信息联合承办&#xff0c;特邀云安全联盟CSA大…...

React 解释常见的 hooks: useState / useRef / useContext / useReducer

前言 如果对 re-render 概念还不清楚&#xff0c;建议先看 React & 理解 re-render 的作用、概念&#xff0c;并提供详细的例子解释 再回头看本文。 如果对 React 基础语法还不熟练&#xff0c;建议先看 React & JSX 日常用法与基本原则 再回头看本文。 useState useS…...

telnet发送邮件教程:安全配置与操作指南?

telnet发送邮件的详细步骤&#xff1f;怎么用telnet命令发邮件&#xff1f; 尽管现代邮件客户端和服务器提供了丰富的功能和安全性保障&#xff0c;但在某些特定场景下&#xff0c;了解如何使用telnet发送邮件仍然是一项有价值的技能。AokSend将详细介绍如何安全配置和操作tel…...

超强大的 Nginx 可视化管理工具

今天给大家介绍一款 Nginx 可视化管理界面&#xff0c;非常好用&#xff0c;小白也能立马上手。 nginx-proxy-manager 是一个反向代理管理系统&#xff0c;它基于 NGINX&#xff0c;具有漂亮干净的 Web UI。还可以获得受信任的 SSL 证书&#xff0c;并通过单独的配置、自定义和…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...