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

vue3学习1

vite是新的官方构建工具,构建速度比webpack更快

vue项目的入口文件是index.html,一般在这里引入src/main.js,并且设置好容器#app

App.vue放的是根组件,components里放分支组件

vue组件中写三种标签,template & script & style

配置数据方式,放到data(){}中:

函数放到methods:{}中

以上配置项是vue2的写法,选项式API

vue3是组合式API,使用setup(){ 定义 + return },setup执行时间早于beforeCreate(),setup中没有this的定义,setup可以返回一个渲染函数

import setupExtend from 'vite-plugin-vue-setup-extend' 可以通过name属性指定组件名

setup语法糖,自动return:

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

vue3响应式数据-ref包裹的数据是响应式数据(对象),reactive包裹对象类型的数据

Object.assign(obj1, obj2) 可以更新reactive定义的对象

toRefs可以把reactive定义的每一组key:value变成ref类型的变量

toRef从reactive中一个一个取,其中更改nl,reactive中的age也会变

计算属性computed(()=>{return}),计算依赖的数据变化,就会重新计算,computed是ref变量

以下是只读的写法

可读可写,get set方法:

vue3-watch(监听):

可以监听四种数据:

        1、ref定义的数据;

        2、reactive定义的数据;

        3、函数返回一个值(getter函数);

        4、一个包含上述内容的数组。

vue2的watch写法:

vue3的watch写法,是一个函数,声明 监听对象和 回调函数(newValue, oldValue)

终止监听:

监听ref定义的对象类型的数据,监听的是对象的地址值,若想监听对象内部属性的变化,需要手动开启深度监听deep=true;想要立即监听,也要手动开启immediate=true ;

oldValue和newValue 也是监听的新老地址的值,若没变地址,则oldValue=newValue,大部分情况(监听对象地址不变)可以把newValue和oldValue合并成一个参数value。

reactive对象类型数据无法整体修改,必须通过Object.assign来修改

监听reactive对象类型数据,默认是开启深度监听的,隐式创建深层监听且无法关闭!

地址不变,则oldValue和newValue相同

监听对象中的某个值(基本类型的),需要构造getter函数,监听getter函数返回值

监听对象中的某个 子对象,可直接监听,也可以构造getter函数,

***建议写函数式,并加上deep=true(监听中最常用)

同时监视以上几种情况:

v-bind:value= 单向绑定(简写为:value=), v-modal:value= 双向绑定(简写为v-modal=)

v-for写法,v-bind:key=缩写成 :key=

相关文章:

vue3学习1

vite是新的官方构建工具&#xff0c;构建速度比webpack更快 vue项目的入口文件是index.html&#xff0c;一般在这里引入src/main.js&#xff0c;并且设置好容器#app App.vue放的是根组件&#xff0c;components里放分支组件 vue组件中写三种标签&#xff0c;template & s…...

java机器学习计算指标动态阈值

java机器学习计算指标动态阈值 最近听到有的人说要做机器学习就一定要学Python&#xff0c;我想他们掌握的知道还不够系统全面。本文作者以动态阈值需求场景给大家介绍几种常用Java实现的机器学习库&#xff0c;包括使用开源库如Weka或Deeplearning4j&#xff08;DL4J&#xf…...

mac os设置jdk版本

打开环境变量配置文件 sudo vim ~/.bash_profile 设置不同的jdk版本路径 # 设置JAVA_HOME为jdk17路径 export JAVA_HOME$(/usr/libexec/java_home -v 17)# 设置JAVA_HOME为jdk8路径 export JAVA_HOME$(/usr/libexec/java_home -v 1.8) 设置环境变量 # 将jdk加入到环境变量…...

Python正则表达式学习

Python正则表达式全攻略 一、正则表达式基础 1. 什么是正则表达式&#xff1f; 用于描述字符串匹配规则的表达式广泛应用于文本处理、表单验证、数据清洗等领域 2. Python中的re模块 import re3. 基础语法 字符说明示例.匹配任意字符(除换行)a.c → abc\d数字 [0-9]\d\d …...

ShenNiusModularity项目源码学习(10:ShenNius.FileManagement项目分析)

ShenNiusModularity项目支持七牛云和本地图片存储&#xff0c;其文件上传接口及实现就位于ShenNius.FileManagement项目内&#xff0c;该项目内文件不多&#xff0c;主要就是围绕上传本地及七牛云的实现及相关类定义。   扩展类FileManagemenServiceExtensions的AddFileUploa…...

mysql查看binlog日志

mysql 配置、查看binlog日志&#xff1a; 示例为MySQL8.0 1、 检查binlog开启状态 SHOW VARIABLES LIKE ‘log_bin’; 如果未开启&#xff0c;修改配置my.ini 开启日志 安装目录配置my.ini(mysql8在data目录) log-binmysql-bin&#xff08;开启日志并指定日志前缀&#xff…...

Node.js高频面试题精选及参考答案

目录 什么是 Node.js?它的主要特点有哪些? Node.js 的事件驱动和非阻塞 I/O 模型是如何工作的? 为什么 Node.js 适合处理高并发场景? Node.js 与传统后端语言(如 Java、Python)相比,有哪些优势和劣势? 简述 Node.js 的运行原理,包括 V8 引擎的作用。 什么是 Nod…...

TaskBuilder创建客户信息列表页面

3.4.1选择页面类型 点击上面创建的customer文件夹右侧的加号&#xff0c;打开“前端资源创建向导”对话框&#xff0c;选中“数据查询TFP”&#xff0c;资源名称会自动设置为index&#xff0c;这里我们不用改。 点“下一步”按钮&#xff0c;会弹出下图所示的“创建数据查询T…...

Linux Iptables示例一则

个人博客地址&#xff1a;Linux Iptables示例一则 | 一张假钞的真实世界 关于Iptables的介绍个人强烈推荐&#xff1a;iptables-朱双印博客-第2页。这位兄弟介绍的很详细。 我个人的需求是在同一个网络内从网络上把测试主机与正式环境主机间的网络进行隔离。我的思路是采用OU…...

新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)

视频教程和更多福利在我主页简介或专栏里 &#xff08;不懂都可以来问我 专栏找我哦&#xff09; 如果对你有帮助你可以来专栏找我&#xff0c;我可以无偿分享给你对你更有帮助的一些经验和资料哦 目录&#xff1a; 一、XSS的三种类型&#xff1a; 二、XSS攻击的危害&#x…...

【CXX】4 跨平台构建系统特性对比

多语言构建系统选项为开发团队提供了灵活性和选择&#xff0c;以适应不同的项目需求和现有的技术栈。CXX作为一个设计灵活的工具&#xff0c;旨在与多种构建系统无缝集成。以下是对不同构建系统选项的简要概述和建议&#xff1a; 一、Cargo&#xff1a; 适用场景&#xff1a;…...

MySQL 如何使用EXPLAIN工具优化SQL

EXPLAIN 是 SQL 查询优化中的一个重要工具&#xff0c;主要用于分析和诊断查询执行计划。通过 EXPLAIN&#xff0c;我们可以了解数据库引擎&#xff08;如 MySQL、PostgreSQL 等&#xff09;是如何执行特定的查询语句的&#xff0c;包括是否使用了索引、表连接的方式、扫描的行…...

沃丰科技大模型标杆案例|周大福集团统一大模型智能服务中心建设实践

沃丰科技携手老客户周大福如何进行统一大模型智能服务中心建设‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ “我们相信&#xff0c;科技与创新是推动珠宝行业持续发展的关键力量。”——周大福珠宝集团董事总经理黄绍基。这句话再次强调了科技与创新在珠宝行业发展中的重要性&…...

代码随想录day16

513.找树左下角的值 //迭代法中左视图的最后一位 int findBottomLeftValue(TreeNode* root) {int result 0;queue<TreeNode*> qe;if(root nullptr) return result;qe.push(root);vector<int> lefts;while(!qe.empty()){int sz qe.size();vector<int> tmp…...

常见的软件测试模型及特点

软件测试模型有多种&#xff0c;常见的包括以下几种&#xff0c;每种模型都有其特点和适用场景&#xff1a; 1. V 模型&#xff08;V-Model&#xff09; 特点&#xff1a; 测试和开发并行进行&#xff0c;开发的每个阶段都有对应的测试活动。适用于需求明确、开发过程较规范的…...

tailwindcss学习01

系列教程 01 入门 02 vue中接入 入门 # 注意使用cmd不要powershell npm init -y # 如果没有npx则安装 npm install -g npx npm install -D tailwindcss3.4.17 --registry http://registry.npm.taobao.org npx tailwindcss init修改tailwind.config.js /** type {import(tai…...

C语言复杂度分析

文章目录 一 算法效率评估第一,设计可靠的解法:第二,优化解的效率:二 迭代与递归迭代for 循环递归递归和迭代区别一 算法效率评估 第一,设计可靠的解法: 算法需要能够在规定的输入范围内,准确无误地求解问题,确保其结果的正确性和稳定性。这是算法设计的基本要求。 …...

DeepSeek服务器繁忙 多种方式继续优雅的使用它

前言 你的DeepSeek最近是不是总是提示”服务器繁忙,请稍后再试。”&#xff0c;尝试过了多次重新生成后&#xff0c;还是如此。之前DeepSeek官网连续发布2条公告称&#xff0c;DeepSeek线上服务受到大规模恶意攻击。该平台的对话框疑似遭遇了“分布式拒绝服务攻击”&#xff0…...

Bootstrap Blazor UI 中 <Table> 组件 <TableColumn> 使用备忘01:EF Core 外码处理

应用场景&#xff1a;将外码转换为对应的文本进行显示、编辑。 例如&#xff0c;有一个【用户】表&#xff0c;其中有一个【用户类型ID】字段&#xff1b;另有一个【用户类型】表&#xff0c;包含【ID】、【名称】等字段。现在要求在 <Table> 组件显示列表中&#xff0c…...

云原生数据抽象与弹性加速:Fluid开源系统的技术解析

在云计算、大数据和人工智能技术迅猛发展的背景下&#xff0c;云原生应用的数据处理和存储需求日益增长。南京大学顾荣教授及其团队开发的Fluid开源系统&#xff0c;旨在解决云原生环境中数据密集型应用面临的挑战&#xff0c;如计算存储分离、数据本地化、无状态服务与有状态计…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...