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

Vue3--数据和方法

news 2025/11/6 7:16:44

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选项通常返回一个对象&#xff0c;然后 Vue 会通过响应性系统将其包裹起来&#xff0c;并以 $data 的形式存储在组件实例中。 <!DOCTYPE html> <html lang"en"&g…...

编程日记 2024/3/16 3:25:40

网络编程面试题

一、什么是IP地址 1.IP地址是主机在网路中的唯一标识&#xff0c;&#xff0c;当主机从一个网络切换到另一个网络时&#xff0c;会更改IP地址&#xff0c;同样的IP地址也是路由器进行路由选择的标识 2.IP地址的分类 IPV4&#xff1a;采用4字节无符号整数存储 IPV6&#xff…...

编程日记 2024/3/16 3:24:38

移动端区分点击和长按

为了适配移动端&#xff0c;图片加入touchstart&#xff0c;touchend&#xff0c;并加了 e.preventDefault() 屏蔽默认菜单。 然而突然发现移动端图片的链接无响应了&#xff0c;PC端没问题。 而且功能需要区分点击和长按。 原生js如何判断移动端的tap,dbltap&#xff0c;lo…...

编程日记 2024/3/16 3:21:36

虚拟环境的激活

(此博客仅用于我记录虚拟环境的激活方法) 虚拟环境的激活命令: venv/Scripts/activate 在F:\git repo\Database-Course-Design 这个文件夹中启动命令行 这个文件夹中含有虚拟环境venv 输入命令venv/Scripts/activate&#xff0c;就得到下面的结果: 此时就激活了虚拟环境&…...

编程日记 2024/3/16 3:18:32

宏集案例 | 风电滑动轴承齿轮箱内多点温度采集与处理

前言 风力发电机组中的滑动轴承齿轮箱作为关键的传动装置&#xff0c;承担着将风能转化为电能的重要角色。齿轮箱内多点温度的实时监测可以有效地预防设备故障和性能下降。实时监测齿轮箱内多点温度可以有效地预防设备故障和性能下降。 为了确保风力发电机组的安全稳定运行&a…...

编程日记 2024/3/16 3:16:30

linux 16进制写入

1.简单用法[推荐] echo 001122334455 | xxd -r -ps > test // 6 个字节xxd // xxd 命令用于用二进制或十六进制显示文件的内容 -r // 把xxd的十六进制输出内容转换回原文件的二进制内容 -ps // 以 postscript的连续十六进制转储输出&#xff0c;这也叫做纯十六进…...

编程日记 2024/3/16 3:14:27

代码随想录算法训练营第60天| Leetcode 84.柱状图中最大的矩形

文章目录 Leetcode 84.柱状图中最大的矩形 Leetcode 84.柱状图中最大的矩形 题目链接&#xff1a;Leetcode 84.柱状图中最大的矩形 题目描述&#xff1a; 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。求在该柱状…...

编程日记 2024/3/16 3:10:23

编写一个简单的cmakelist.txt

文章目录 代码main.cpp头文件和子模块CMakeLists.txtsubModule/CMakeLists.txt顶层CMakeLists.txtCMakeList中的内容说明生成跨平台到Visual studio下上一篇提到了cmake的设计目的与作用，这一篇就来手动编写一个基本的cmakelist.txt，并演示一下如何生成不同平台的构建文件。 …...

编程日记 2024/3/16 3:05:18

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的零售柜商品检测软件（Python+PySide6界面+训练代码）

摘要&#xff1a;开发高效的零售柜商品识别系统对于智能零售领域的进步至关重要。本文深入介绍了如何运用深度学习技术开发此类系统&#xff0c;并分享了全套实现代码。系统采用了领先的YOLOv8算法&#xff0c;并与YOLOv7、YOLOv6、YOLOv5进行了性能比较&#xff0c;呈现了诸如…...

编程日记 2024/3/16 3:03:16

数据库的学习

数据库软件&#xff1a; 关系型数据库&#xff1a;Mysql Oracle SqlServer Sqlite 非关系型数据库&#xff1a;Redis NoSQL 1.数组&#xff0c;链表&#xff0c;文件&#xff0c;数据库 数组&#xff0c;链表&#xff1a;内存存放数据的方式&…...

编程日记 2024/3/16 3:01:14

matlab去除图片上的噪声

本问题来自CSDN-问答板块，题主提问。 如何利用matlab去除图片上的噪声？ 一、运行效果图 左边是原图，右边是去掉噪音后的图片。 二、中文说明 中值滤波是一种常见的图像处理技术，用于去除图像中的噪声。其原理如下： 1. 滤波器移动：中值滤波器是一个小的窗口，在图像上移…...

编程日记 2024/3/16 2:53:08

C++超详细知识点（五）：类的友元函数和友元类

目录 标题&#xff1a; 友元函数和友元类1. 友元函数2. 友元类 标题&#xff1a; 友元函数和友元类 友元函数和友元类是C中的概念&#xff0c;它们允许某些函数或类访问另一个类的私有成员。这样的访问权限超过了通常的私有和保护访问级别。请注意&#xff0c;友元类的使用应该…...

编程日记 2024/3/16 2:52:07

SOC设计：关于reset的细节

有如下几个信号 1、时钟&#xff1a;clk_top 2、总的reset信号&#xff1a;rstn_top 3、scan的reset信号&#xff1a;scan_rstn 4、软件复位信号&#xff1a;rstn_soft_sub 5、scan模式信号&#xff1a;scan_mode 6、reset bypass 信号&#xff1a;scan_rstn_sel 功能&a…...

编程日记 2024/3/16 2:46:01

支小蜜AI校园防欺凌系统可以使用在宿舍吗？

随着人工智能技术的快速发展&#xff0c;AI校园防欺凌系统已成为维护校园安全的重要手段。然而&#xff0c;关于这一系统是否适用于宿舍环境&#xff0c;仍存在一些争议和讨论。本文将探讨AI校园防欺凌系统在宿舍中的适用性&#xff0c;分析其潜在的优势与挑战&#xff0c;并提…...

编程日记 2024/3/16 2:38:54

外卖平台订餐流程架构的实践

当我们想要在外卖平台上订餐时&#xff0c;背后其实涉及到复杂的技术架构和流程设计。本文将就外卖平台订餐流程的架构进行介绍&#xff0c;并探讨其中涉及的关键技术和流程。 ## 第一步&#xff1a;用户端体验 用户通过手机应用或网页访问外卖平台&#xff0c;浏览菜单、选择…...

编程日记 2024/3/16 2:35:52

[AIGC] Spring Boot中的切面编程和实例演示

切面编程&#xff08;Aspect Oriented Programming&#xff0c;AOP&#xff09;是Spring框架的关键功能之一。通过AOP&#xff0c;我们可以将代码下沉到多个模块中&#xff0c;有助于解决业务逻辑和非业务逻辑耦合的问题。本文将详细介绍Spring Boot中的切面编程&#xff0c;并…...

编程日记 2024/3/16 2:34:51

各个类型和Json类型的相互转换

ObjectMapper类(com.fasterxml.jackson.databind.ObjectMapper)是Jackson的主要类&#xff0c;它可以帮助我们快速的进行各个类型和Json类型的相互转换。 对应maven&#xff1a; <dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId&…...

编程日记 2024/3/16 2:30:48

C语言：操作符详解（下）

目录 一、逗号表达式二、下标访问[ ]、函数调用()1. [ ]下标引用操作符2.函数调用操作符 三、结构成员访问操作符1.结构体(1) 结构的声明(2) 结构体变量的定义和初始化 2.结构成员访问操作符(1)结构体成员的直接访问(2)结构体成员的间接访问 四、操作符的属性&#xff1a;优先级…...

编程日记 2024/3/16 2:27:45

电商场景下 ES 搜索引擎的稳定性治理实践

继上文在完成了第一阶段 ES 搜索引擎的搭建后&#xff0c;已经能够实现对千万级别的商品索引的读写请求的支持。目前&#xff0c;单机房读流量在 500&#xff5e;1000 QPS 之间&#xff0c;写流量在 500 QPS 左右。 但随着业务的发展&#xff0c;问题也逐渐开始暴露&#xff0…...

编程日记 2024/3/16 2:22:41

jdk8与jdk17的区别。springboot2.x与springboot3.x的区别

1. jdk8与jdk17的区别 Java JDK 8 和 JDK 17 之间存在许多区别&#xff0c;包括功能、性能、语言特性和工具等方面。以下是它们之间的一些主要区别&#xff1a; 功能和语言特性&#xff1a; JDK 8引入了许多重要的语言特性&#xff0c;包括Lambda表达式、方法引用、Stream API、…...

编程日记 2024/3/16 2:21:41

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/11/3 16:41:29

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/11/5 17:12:12

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2025/11/3 19:15:14

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/11/5 17:04:40

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/11/2 7:41:43

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2025/10/31 11:06:40

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

编程新知 2025/11/3 10:38:20

Python 高级应用10：在python 大型项目中 FastAPI 和 Django 的相互配合

无论是python&#xff0c;或者java 的大型项目中&#xff0c;都会涉及到 自身平台微服务之间的相互调用&#xff0c;以及和第三发平台的 接口对接&#xff0c;那在python 中是怎么实现的呢&#xff1f; 在 Python Web 开发中&#xff0c;FastAPI 和 Django 是两个重要但定位不…...

编程新知 2025/10/26 4:25:02