vue3.0 ref的使用

一.在vue2中定义变量

在使用vue2的时候,我们定义变量会在data中进行定义,那么我们在vue3中是如何定义变量的呢?我们会使用ref来进行定义。

(1)我们通过一个简单的案例来看

代码:

<template>
<div><button @click="count++">Count is: {{ count }}</button>
</div>
</template><script  setup>
import { ref } from "vue";
const count=ref(0)</script>

1.在这个案例中我们在script中添加了一个setup

2.然后通过插值表达式在模板层进行展示

3.在案例中给按钮绑定了一个点击事件,每次点击这个变量会自增1,这个和vue2中的相差不多。

4.如何定义变量:导入ref

import { ref } from "vue";

5.使用变量

1.在模板层

直接通过{{}}插值表达式来进行展示就可以了。

2.在数据层
console.log(count);

打印出来的是一个对象:

1.如何进行取值呢?(变量.value)
console.log(count.value);

二.利用计算属性

1.第一步导入:

import { ref,computed } from "vue";

2.使用(代码)

<template>
<div><button @click="count++">Count is: {{ count }}</button><div>组合出来的东西:{{publishedBooksMessage}}</div>
</div>
</template><script  setup>
import { ref,computed } from "vue";
const first=ref(10)
const name=ref(20)
const publishedBooksMessage = computed(() => {return first.value+name.value
})</script><style></style>

3.显示的页面

4.计算属性的作用

在案例中有两个依赖项10,20

在图中任何一个依赖项发生改变,计算属性都会发生改变。

5.计算属性还有set属性和get属性

这个是计算属性的完整写法,具体可以参考官网的写法,计算属性我们通常是用来展示的作用。

6.计算属性是有缓存的作用

使用方法来计算10+20

function fn() {console.log(1);return first.value + name.value;
}

调用3次:

  {{ fn() }}{{ fn() }}{{ fn() }}

 控制台里面打印了3个1。

使用计算属性。

 {{publishedBooksMessage}}{{publishedBooksMessage}}{{publishedBooksMessage}}

控制台显示出来的只有一个1,足以证明计算属性是有缓存作用的。

三.生命周期

1.vue2的生命周期

(1)beforeCreated

初始化阶段.初始化一些函数,方法

(2)Created

在这个阶段可以发送一些请求。

(3)beforeMounted

在这个阶段不能获取到真是的DOM

(4)Mounted

在这个阶段我们能够获取到真实的DOM

(5)beforeUpdated

更新之前

(6)updated

更新之后

(7)beforeDestory

组件销毁之间,但是没有完全销毁,组件任然可以使用

(8)destory

组件已经完全销毁。

2.vue3.0的生命周期

        

onMounted 这个生命周期能够获取到真实的DOM。

vue3的官网

快速上手 | Vue.js (vuejs.org)

使用的时候可以在官网直接查询其用法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/704154.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

支持向量机|机器学习方法(李航)

支持向量机&#xff0c;可以看着是升级版的感知机&#xff0c;与感知机相比。他们都是找到一个超平面对数据集进行分割&#xff0c;区别在于&#xff0c;感知机模型得到的超平面空间中可以有无穷个超平面&#xff0c;但支持向量机仅含有一个&#xff0c;这一个超平面与样本点的…

matplotlib plt.show()却弹出空白框并之后自动退出程序的原因及解决方法

运行下列代码并使用plt.show()进行展示时候&#xff0c;cmd输出如下&#xff1a; 先弹出空白框&#xff1a; 而后直接退出程序&#xff1a; 之前遇到过很多次&#xff0c;由于不输出Traceback&#xff0c;完全不知道什么原因。结果发现是因为没有导入torch导致的。 解决办法就…

人工智能在测绘行业的应用与挑战

目录 一、背景 二、AI在测绘行业的应用方向 1. 自动化特征提取 2. 数据处理与分析 3. 无人机测绘 4. 智能导航与路径规划 5. 三维建模与可视化 6. 地理信息系统&#xff08;GIS&#xff09;智能化 三、发展前景 1. 技术融合 2. 精准测绘 3. 智慧城市建设 4. 可…

配置QINQ

1.实验环境&#xff1a; 某运营商接了公司A和公司B的网络&#xff0c;现需要使用qinq技术实现公司A、公司B的私有网络能够使用运营商网络互通。公司A使用灵活的qinq让内部网络的vlan 10映射为公网vlan2进行数据转发&#xff0c;vlan20映射为vlan3进行数据转发。公司B使用基本的…

「哈哥赠书活动 - 48期」-『商业分析思维与实践:用数据分析解决商业问题宣传文案』

⭐️ 赠书 - 《商业分析思维与实践》 ⭐️ 内容简介 本书以业务为导向&#xff0c;详细地讲解了如何通过大数据分析来解决商业问题。其目的在于运用大数据分析思维&#xff0c;帮助读者把学术知识应用于真实的业务场景&#xff0c;解决实际的业务问题。本书基于业务问题&#x…

Arduino单片机基础介绍

&#xff08;本文为简单介绍&#xff0c;内容源于网络和AI&#xff09; Arduino单片机&#xff0c;自2005年诞生以来&#xff0c;已经成为全球爱好者和专业工程师们快速实现创意原型的重要工具。Arduino的普及不仅因其强大的功能和简易的操作&#xff0c;还在于其背后强大的社…

Java计划线程池ScheduledThreadPoolExecutor运行流程和源码分析

1. 计划线程池ScheduledThreadPoolExecutor简介 ScheduledThreadPoolExecutor继承自线程池ThreadPoolExecutor&#xff0c;并在其基础上增加了按时间调度执行任务的功能&#xff0c;如果对ThreadPoolExecutor还不是很熟悉&#xff0c;可以阅读一下这篇文章&#xff1a; Java线…

【C++】---内存管理new和delete详解

一、C/C内存分布 C/C内存被分为6个区域&#xff1a; &#xff08;1&#xff09; 内核空间&#xff1a;存放内核代码和环境变量。 &#xff08;2&#xff09;栈区&#xff1a;向下增长&#xff08;存放非静态局部变量&#xff0c;函数参数&#xff0c;返回值等等&#xff09; …

OCPP 1.6 接入实现文档

一、简介 OCPP&#xff08;Open Charge Point Protocol&#xff09;是一个开放的通信协议&#xff0c;用于充电站&#xff08;Charge Point&#xff09;与中央系统&#xff08;Central System&#xff0c;如充电站管理系统或服务提供商平台&#xff09;之间的通讯。本篇文档将…

纽约纳斯达克大屏投放受众群体有哪些-大舍传媒

纽约纳斯达克大屏投放受众群体有哪些-大舍传媒 1. 纳斯达克大屏的概述 纳斯达克大屏是全球金融市场中最出名的电子交易平台之一。作为一个重要的金融信息传递渠道&#xff0c;纳斯达克大屏吸引了来自全球的投资者的目光。在这个巨大的投放平台上&#xff0c;大舍传媒希望为客…

【Java】线程池总结——干货满满!!!

目录 一 使用线程池的好处 二 Executor 框架 2.1 简介 2.2 Executor 框架结构(主要由三大部分组成) 1) 任务(Runnable /Callable) 2) 任务的执行(Executor) 3) 异步计算的结果(Future) 2.3 Executor 框架的使用示意图 三 (重要)ThreadPoolExecutor 类简单介绍 3.1 Thr…

如何使用Axure RP制作web页面并实现无公网ip远程访问——“cpolar内网穿透”

文章目录 前言1.在AxureRP中生成HTML文件2.配置IIS服务3.添加防火墙安全策略4.使用cpolar内网穿透实现公网访问4.1 登录cpolar web ui管理界面4.2 启动website隧道4.3 获取公网URL地址4.4. 公网远程访问内网web站点4.5 配置固定二级子域名公网访问内网web站点4.5.1创建一条固定…

Vue知识学习

Vue 是什么&#xff1f; 概念&#xff1a;Vue 是一个用于构建用户界面的渐进式框架 Vue 的两种使用方式: ① Vue 核心包开发 场景:局部 模块改造 ② Vue 核心包& Vue插件工程化开发 场景:整站开发 创建Vue 实例&#xff0c;初始化渲染的核心步骤: 1.准备容器 2.引包(官…

基于java在线调查表单系统

基于java在线调查表单系统 一、演示效果二、特性汇总三、下载链接 一、演示效果 二、特性汇总 多种技术方案&#xff0c;满足不同的技术选型需求完善的浏览器兼容、保证传统客户也能正常使用部署简单&#xff0c;一行命令完成部署更新方便&#xff0c;直接替换原安装文件不用担…

F2图例封装 - BarAndLine

基于vue3 和 F2 3.5.0 <template><div :style"{minHeight: ${height}px,width: 100% }" ref"container"><canvas v-show"showChart" ref"canvas" :id"chartId" class"chart-canval"></canva…

【stm32】hal库-双通道ADC采集

【stm32】hal库-双通道ADC采集 CubeMX图形化配置 程序编写 /* USER CODE BEGIN PV */ #define BATCH_DATA_LEN 1 uint32_t dmaDataBuffer[BATCH_DATA_LEN]; /* USER CODE END PV *//* USER CODE BEGIN 2 */lcd_init();lcd_show_str(10, 10, 24, "Demo14_4:ADC1 ADC2 S…

Python 实现 BRAR 指标计算(情绪指标):股票技术分析的利器系列(11)

Python 实现 BRAR 指标计算&#xff08;情绪指标&#xff09;&#xff1a;股票技术分析的利器系列&#xff08;11&#xff09; 介绍算法公式 代码rolling函数介绍核心代码计算BR计算AR 完整代码 介绍 BRAR 是一种情绪指标&#xff0c;用于衡量特定金融市场中的买卖情绪。它代表…

试一下newb,还是有错误呀

解题&#xff1a;原式&#xff1d; 2. 在递增的等比数列 ( a n ) (a_n) (an​)中&#xff0c;若 ( a 3 − a 1 5 2 ) (a_3 - a_1 \frac{5}{2}) (a3​−a1​25​), ( a 2 3 ) (a_2 3) (a2​3), 则公比 (q) A. ( 4 3 ) ( \frac{4}{3} ) (34​) B. ( 3 2 ) ( \frac{3}{2} …

旧物回收小程序开发,开启绿色生活新篇章

随着科技的发展和人们生活水平的提高&#xff0c;物质生活的丰富带来了大量的废弃物。如何合理处理这些废弃物&#xff0c;实现资源的再利用&#xff0c;已成为社会关注的焦点。旧物回收小程序的开发与应用&#xff0c;为这一问题提供了有效的解决方案。本文将探讨旧物回收小程…

软考47-上午题-【数据库】-数据查询语言DQL2

一、聚合函数 聚合函数实现数据统计的功能&#xff0c;返回一个单一的值。聚合函数一般与select语句的group by子句一起使用。 示例&#xff1a; 二、数据分组-group by 聚合函数加上group by子句进行分组。 通常一个聚合函数的作用范围是满足where子句中指定条件的记录&…