Vue3--数据和方法
data
组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中会自动调用此函数。
data选项通常返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"></script>
<body><div id="counter"><p>Counter: {{counter}}</p><p>number: {{number}}</p><p>content: {{content}}</p> </div>
</body><script>const Counter = {data(){return {counter: 45, number: 78,content: 100,}}}Vue.createApp(Counter).mount("#counter");
</script>
</html>
效果:
说明;
声明式地, 将数据填充到 dom 页面内.
data(){} return的数据是响应到 html 里面的数据.
数据和 DOM 建立了双向关联, 并且所有的改变都是响应式的.
生命周期函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"></script>
<body><div id="counter"><p>Counter: {{counter}}</p><p>number: {{number}}</p><p>content: {{content}}</p> </div>
</body><script>const Counter = {data() {return {counter: 1,number: 45,content: "我去",}},mounted() {setInterval(() => {this.counter++this.number += 2;this.content += "可爱";}, 1000)}}Vue.createApp(Counter).mount("#counter");
</script>
</html>
说明:
mounted 下设置的 setInterval, 每秒对 counter + 1, number +2, content后拼接字符.
v-bind
类似 v-bind 的东西称为指令. 指令带有前缀 v-, 表示是 Vue 提供的特殊功能.
methods
Vue通过methods 选项为组件实例添加方法，选项对应的值是一个“字典”对象，对象中的每个元素是你自定义的一系列方法:
const app = Vue.createApp({data() {return { count: 4 }},methods: {increment() {// `this` 指向该组件实例this.count++}}
})const vm = app.mount('#app')
console.log(vm.count) // => 4vm.increment()
console.log(vm.count) // => 5
Vue 会自动为 methods 绑定 this，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。所以在定义 methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向。
methods 和组件实例的其它所有属性一样可以在组件的模板中被访问。在模板中，它们通常被当做事件监听使用，比如：
<button @click="increment">Up vote</button>
在上面的例子中，点击 时，会调用 increment 方法。
也可以直接在模板支持 JavaScript 表达式的任何地方调用方法：
<span :title="toTitleDate(date)">{{ formatDate(date) }}
</span>// 思考一下，如果是这样，会不会调用toTitleDate方法呢？
// <span title="toTitleDate(date)">
相关文章：
Vue3--数据和方法
data 组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中会自动调用此函数。 data选项通常返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。 <!DOCTYPE html> <html lang"en"&g…...
网络编程面试题
一、什么是IP地址 1.IP地址是主机在网路中的唯一标识，，当主机从一个网络切换到另一个网络时，会更改IP地址，同样的IP地址也是路由器进行路由选择的标识 2.IP地址的分类 IPV4：采用4字节无符号整数存储 IPV6ÿ…...
移动端区分点击和长按
为了适配移动端，图片加入touchstart，touchend，并加了 e.preventDefault() 屏蔽默认菜单。 然而突然发现移动端图片的链接无响应了，PC端没问题。 而且功能需要区分点击和长按。 原生js如何判断移动端的tap,dbltap，lo…...
虚拟环境的激活
(此博客仅用于我记录虚拟环境的激活方法) 虚拟环境的激活命令: venv/Scripts/activate 在F:\git repo\Database-Course-Design 这个文件夹中启动命令行 这个文件夹中含有虚拟环境venv 输入命令venv/Scripts/activate，就得到下面的结果: 此时就激活了虚拟环境&…...
宏集案例 | 风电滑动轴承齿轮箱内多点温度采集与处理
前言 风力发电机组中的滑动轴承齿轮箱作为关键的传动装置，承担着将风能转化为电能的重要角色。齿轮箱内多点温度的实时监测可以有效地预防设备故障和性能下降。实时监测齿轮箱内多点温度可以有效地预防设备故障和性能下降。 为了确保风力发电机组的安全稳定运行&a…...
linux 16进制写入
1.简单用法[推荐] echo 001122334455 | xxd -r -ps > test // 6 个字节xxd // xxd 命令用于用二进制或十六进制显示文件的内容 -r // 把xxd的十六进制输出内容转换回原文件的二进制内容 -ps // 以 postscript的连续十六进制转储输出，这也叫做纯十六进…...
代码随想录算法训练营第60天| Leetcode 84.柱状图中最大的矩形
文章目录 Leetcode 84.柱状图中最大的矩形 Leetcode 84.柱状图中最大的矩形 题目链接：Leetcode 84.柱状图中最大的矩形 题目描述： 给定 n 个非负整数，用来表示柱状图中各个柱子的高度。每个柱子彼此相邻，且宽度为 1 。求在该柱状…...
编写一个简单的cmakelist.txt
文章目录 代码main.cpp头文件和子模块CMakeLists.txtsubModule/CMakeLists.txt顶层CMakeLists.txtCMakeList中的内容说明生成跨平台到Visual studio下上一篇提到了cmake的设计目的与作用，这一篇就来手动编写一个基本的cmakelist.txt，并演示一下如何生成不同平台的构建文件。 …...
基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的零售柜商品检测软件（Python+PySide6界面+训练代码）
摘要：开发高效的零售柜商品识别系统对于智能零售领域的进步至关重要。本文深入介绍了如何运用深度学习技术开发此类系统，并分享了全套实现代码。系统采用了领先的YOLOv8算法，并与YOLOv7、YOLOv6、YOLOv5进行了性能比较，呈现了诸如…...
数据库的学习
数据库软件： 关系型数据库：Mysql Oracle SqlServer Sqlite 非关系型数据库：Redis NoSQL 1.数组，链表，文件，数据库 数组，链表：内存存放数据的方式&…...
matlab去除图片上的噪声
本问题来自CSDN-问答板块，题主提问。 如何利用matlab去除图片上的噪声？ 一、运行效果图 左边是原图，右边是去掉噪音后的图片。 二、中文说明 中值滤波是一种常见的图像处理技术，用于去除图像中的噪声。其原理如下： 1. 滤波器移动：中值滤波器是一个小的窗口，在图像上移…...
C++超详细知识点（五）：类的友元函数和友元类
目录 标题： 友元函数和友元类1. 友元函数2. 友元类 标题： 友元函数和友元类 友元函数和友元类是C中的概念，它们允许某些函数或类访问另一个类的私有成员。这样的访问权限超过了通常的私有和保护访问级别。请注意，友元类的使用应该…...
SOC设计：关于reset的细节
有如下几个信号 1、时钟：clk_top 2、总的reset信号：rstn_top 3、scan的reset信号：scan_rstn 4、软件复位信号：rstn_soft_sub 5、scan模式信号：scan_mode 6、reset bypass 信号：scan_rstn_sel 功能&a…...
支小蜜AI校园防欺凌系统可以使用在宿舍吗？
随着人工智能技术的快速发展，AI校园防欺凌系统已成为维护校园安全的重要手段。然而，关于这一系统是否适用于宿舍环境，仍存在一些争议和讨论。本文将探讨AI校园防欺凌系统在宿舍中的适用性，分析其潜在的优势与挑战，并提…...
外卖平台订餐流程架构的实践
当我们想要在外卖平台上订餐时，背后其实涉及到复杂的技术架构和流程设计。本文将就外卖平台订餐流程的架构进行介绍，并探讨其中涉及的关键技术和流程。 ## 第一步：用户端体验 用户通过手机应用或网页访问外卖平台，浏览菜单、选择…...
[AIGC] Spring Boot中的切面编程和实例演示
切面编程（Aspect Oriented Programming，AOP）是Spring框架的关键功能之一。通过AOP，我们可以将代码下沉到多个模块中，有助于解决业务逻辑和非业务逻辑耦合的问题。本文将详细介绍Spring Boot中的切面编程，并…...
各个类型和Json类型的相互转换
ObjectMapper类(com.fasterxml.jackson.databind.ObjectMapper)是Jackson的主要类，它可以帮助我们快速的进行各个类型和Json类型的相互转换。 对应maven： <dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId&…...
C语言：操作符详解（下）
目录 一、逗号表达式二、下标访问[ ]、函数调用()1. [ ]下标引用操作符2.函数调用操作符 三、结构成员访问操作符1.结构体(1) 结构的声明(2) 结构体变量的定义和初始化 2.结构成员访问操作符(1)结构体成员的直接访问(2)结构体成员的间接访问 四、操作符的属性：优先级…...
电商场景下 ES 搜索引擎的稳定性治理实践
继上文在完成了第一阶段 ES 搜索引擎的搭建后，已经能够实现对千万级别的商品索引的读写请求的支持。目前，单机房读流量在 500～1000 QPS 之间，写流量在 500 QPS 左右。 但随着业务的发展，问题也逐渐开始暴露࿰…...
jdk8与jdk17的区别。springboot2.x与springboot3.x的区别
1. jdk8与jdk17的区别 Java JDK 8 和 JDK 17 之间存在许多区别，包括功能、性能、语言特性和工具等方面。以下是它们之间的一些主要区别： 功能和语言特性： JDK 8引入了许多重要的语言特性，包括Lambda表达式、方法引用、Stream API、…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
微信小程序云开发平台MySQL的连接方式
注：微信小程序云开发平台指的是腾讯云开发 先给结论：微信小程序云开发平台的MySQL，无法通过获取数据库连接信息的方式进行连接，连接只能通过云开发的SDK连接，具体要参考官方文档： 为什么？ 因为…...
RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型（Vision-Language Models, VLMs），为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展，机器人仍难以胜任复杂的长时程任务（如家具装配），主要受限于人…...
嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）
目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 编辑编辑 UDP的特征 socke函数 bind函数 recvfrom函数（接收函数） sendto函数（发送函数） 五、网络编程之 UDP 用…...
【UE5 C++】通过文件对话框获取选择文件的路径
目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ，这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器，右键点击 .uproject 文件，选择 "Generate Visual Studio project files"，重…...
Pydantic + Function Calling的结合
1、Pydantic Pydantic 是一个 Python 库，用于数据验证和设置管理，通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发（如 FastAPI）、配置管理和数据解析，核心功能包括： 数据验证：通过…...