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)">

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

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

相关文章

8分SCI | 揭示随机森林的解释奥秘:探讨LIME技术如何提高模型的可解释性与可信度!

一、引言 Local Interpretable Model-agnostic Explanations (LIME) 技术作为一种局部可解释性方法&#xff0c;能够解释机器学习模型的预测结果&#xff0c;并提供针对单个样本的解释。通过生成局部线性模型来近似原始模型的预测&#xff0c;LIME技术可以帮助用户理解模型在特…

react批量引入svg图标

PS&#xff1a;也不只在react中用&#xff0c;其他框架也可&#xff0c;生态圈不一样配置会不同&#xff0c;但是能提供整体的思路&#xff0c;可以参考。 在批量引入之前&#xff0c;我们需要安装一个包并配置到typescript.json文件中。 1. 安装&#xff1a;yarn add -D type…

私域流量转化干货,揭秘四大关键因素!

在这个得私域者得天下的互联网时代&#xff0c;如何有效地实现私域流量的转化成为了很多企业或是个人的必修课。 接下来&#xff0c;就给大家分享私域转化的四大关键因素&#xff0c;帮助大家更好地实现私域流量的转化。 1、兴趣了解 在私域流量转化的过程中&#xff0c;我们…

js中的原型(原型对象,对象原型,原型继承,原型链)

js中的原型 一.原型二.constructor 属性三.对象原型四.原型继承五.原型链 一.原型 构造函数通过原型分配的函数是所有实例化对象所共享的。 JavaScript 规定&#xff0c;每一个构造函数都有一个 prototype 属性&#xff0c;指向另一个对象&#xff0c;所以我们也称为原型对象 …

C#中求余算法的用法及区别:Math.DivRem()方法 vs 运算符%

目录 1.Math.DivRem() 2.运算符% 3.区别 Math.DivRem()和运算符%都是用于求余运算&#xff0c;但它们在使用和功能上有一些区别&#xff1a; 1.Math.DivRem() Math.DivRem()是.NET框架中的一个静态方法&#xff0c;它将除法和求余运算的结果同时返回。它有两个版本&#xf…

Linux编译器gcc/g++的功能与使用

一、程序的生成 首先&#xff0c;我们知道程序的编译分为四步&#xff1a; 1、预处理 2、编译 3、汇编 4、链接 1.1预处理 预处理功能主要包括头文件展开、宏定义、文件包含、条件编译、去注释等。 所谓的头文件展开就是在预处理时候&#xff0c;将头文件内容拷贝至源文…

Android平台架构和Android Framework的区别

Android平台架构是指Android操作系统的整体架构&#xff0c;主要由四个层级组成&#xff1a;应用层、应用框架层、系统运行库层和Linux内核层。 应用层&#xff1a;包括用户界面、应用程序和系统应用等。用户界面层负责呈现图形化界面&#xff0c;应用程序层包括各种应用程序&a…

C语言从入门到熟悉------第四阶段

指针 地址和指针的概念 要明白什么是指针&#xff0c;必须先要弄清楚数据在内存中是如何存储的&#xff0c;又是如何被读取的。如果在程序中定义了一个变量&#xff0c;在对程序进行编译时&#xff0c;系统就会为这个变量分配内存单元。编译系统根据程序中定义的变量类型分配…

Linux中防火墙相关操作

一、查看防火墙状态 可通过两种方式查看防火墙状态&#xff0c;一种通过systemctl命令&#xff0c;另一种是通过firewall-cmd命令。 1、systemctl status firewalld 2、firewall-cmd --state 二、关闭防火墙 1、暂时关闭&#xff1a;设置暂时关闭防火墙将会在下次重启系统后失…

[LVGL]:MACOS下使用LVGL模拟器

如何在MACOS下使用lvgl模拟器 1.安装必要环境 brew install sdl2查看sdl2安装位置&#xff1a; (base) ➜ ~ brew list sdl2 /opt/homebrew/Cellar/sdl2/2.30.1/bin/sdl2-config /opt/homebrew/Cellar/sdl2/2.30.1/include/SDL2/ (78 files) /opt/homebrew/Cellar/sdl2/2.3…

低代码大屏设计器使用入门级图文教程

文章目录 前言一、什么是低代码大屏二、技术选型三、使用过程1.准备环境2. 下载源码3. 启动配置后端初始化数据库修改配置信息启动后端服务4. 前端启动配置问题总结项目初始化失败node|npm版本自由切换python版本自由切换初始化命令启动查看打包

BMP280学习

1.Forced mode模式&#xff0c;单次采集后进入休眠&#xff0c;适用于低采样率。 2.normal mode模式&#xff0c;持续采集&#xff0c;我们使用这种 采集事件基本都是ms级&#xff0c;所以我们1s更新一次。 温度和压力的计算 #include <SPI.h> //定义数据类型 #define s3…

27.函数指针数组

函数指针数组 概念 函数指针的数组本质是一个数组&#xff0c;它允许你存储多个函数指针&#xff0c;并且可以通过索引来调用这些函数。 定义 int (*pfunc[3])(int,int){getMax,getMin,getAdd};应用 #include <stdio.h>int getMax(int a,int b) {return a>b?a:b…

vs2022安装番茄助手后无法使用

1.安装番茄助手 兼容性-win7-管理员启动 2.破解 下载附件“VA_X64.dll”、“PiaoYun64.dll”破解文件&#xff0c;使用Everything找到C盘对应的“VA_X64.dll”路径&#xff0c;将两个破解文件拷贝到此路径。 3.命令行键入类似命令&#xff1a;D:\OfficeSoftware\VisualStudi…

计算机视觉+人工智能碰撞出新的火花

计算机视觉&#xff08;CV&#xff09;技术的优势是其能够处理大量的图像和视频数据&#xff0c;并快速准确地提取出有用的信息。 1. 自动化&#xff1a;CV技术可以自动化地执行各种图像处理任务&#xff0c;例如目标检测、图像分类和图像分割。这样可以提高工作效率并降低人工…

SfM——八点法计算F矩阵(基础矩阵)与三角测量

1 八点法计算F矩阵&#xff08;基础矩阵&#xff09; 基础矩阵用于描述两个视图之间的几何关系 基础矩阵&#xff1a;基础矩阵 F F F 是描述两个视图之间相机投影关系的矩阵。对于两个对应的图像坐标点 ( x , y , 1 ) (x, y, 1) (x,y,1) 和 ( u , v , 1 ) (u, v, 1) (u,v,1…

前端:设置覆盖图片的层叠顺序

html <div class"image-container"><img src"image1.jpg" class"image1" alt"Image 1"><img src"image2.jpg" class"image2" alt"Image 2"> </div> css代码 .image-contai…

Elasticsearch(8) random_score的使用

elasticsearch version&#xff1a; 7.10.1 random_score的使用 在Elasticsearch中&#xff0c;random_score查询可以用来随机排序搜索结果&#xff0c;这对于实现诸如轮播、随机推荐等功能非常有用。 random_score的语法 GET /<索引名>/_search {"query":…

Upload-labs靶场

文件漏洞上传进行复现 环境搭建--->搭建好环境如下&#xff1a; 打开第一关&#xff0c;尝试文件上传漏洞 根据界面提示&#xff0c;选择一个文件&#xff08;.php文件&#xff09;进行上传&#xff0c;发现无法上传 根据提示是指使用js对不合法文件进行了检查&#xff0c;…

Modbus -tcp协议使用第二版

1.1 协议描述 1.1.1 总体通信结构 MODBUS TCP/IP 的通信系统可以包括不同类型的设备&#xff1a; &#xff08;1&#xff09;连接至 TCP/IP 网络的 MODBUS TCP/IP 客户机和服务器设备&#xff1b; &#xff08;2&#xff09;互连设备&#xff0c;例如&#xff1a;在 TCP/IP…