第十九章 Vue组件之data函数
目录
一、引言
二、示例代码
2.1. 工程结构图
2.2. main.js
2.3. App.vue
2.4. BaseCount.vue
三、运行效果
一、引言
在Vue CLI脚手架中一个组件的data选项必须是一个函数,以此保证每个组件实例,维护独立的一份数据对象。每次创建新的组件实例,都会新执行一次data 函数,得到一个新对象。对于Java后端开发的同学相信一定很熟悉,这就是面向对象的概念。data函数的使用与我们前面章节讲到的data对象的使用方法是一样的。

二、示例代码
2.1. 工程结构图

2.2. main.js
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
2.3. App.vue
<template><div class="App"><BaseCount></BaseCount><BaseCount></BaseCount><BaseCount></BaseCount></div>
</template><script>
import BaseCount from './components/BaseCount.vue'
export default {components: {BaseCount}
}
</script><style>
.base-count {margin: 20px;
}
</style>
2.4. BaseCount.vue
<template><div class="base-count"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</template><script>
export default {// data必须是一个函数,以此保证每个组件实例维护独立的一个数据对象data () {console.log('调用data函数创建新的一个数据实例对象')return {count: 1314}}
}
</script><style>
</style>
三、运行效果
我们可以看到,控制面板输出了三次日志,即App.vue中的三个BaseCount.vue组件分别通过data函数创建了独立的数据对象:
相关文章:
第十九章 Vue组件之data函数
目录 一、引言 二、示例代码 2.1. 工程结构图 2.2. main.js 2.3. App.vue 2.4. BaseCount.vue 三、运行效果 一、引言 在Vue CLI脚手架中一个组件的data选项必须是一个函数,以此保证每个组件实例,维护独立的一份数据对象。每次创建新的组件实…...
【jvm】什么时候对象进入老年代
目录 1. 对象年龄达到阈值2. 大对象直接进入老年代3. 动态晋升条件 1. 对象年龄达到阈值 1.基本机制:当一个对象在新生代(包括Eden区和Survivor区)中经历了多次垃圾回收(GC)后仍然存活,其年龄会逐渐增加。…...
Vue.nextTick 使用指南:数据更新与 DOM 同步利器
前言 在使用 Vue.js 开发单页面应用时,我们常常需要在数据更新后执行一些操作,比如更新 DOM 或者进行一些依赖于最新数据的计算。这时候,Vue.nextTick 就显得尤为重要,本文将详细介绍 Vue.nextTick 的作用与使用方法。 什么是 V…...
第三百零一节 Lucene教程 - Lucene索引文件
Lucene教程 - Lucene索引文件 索引是识别文档并为搜索准备文档的过程。 下表列出了索引过程中常用的类。 类描述IndexWriter在索引过程中创建/更新索引。Directory表示索引的存储位置。Analyzer分析文档并从文本中获取标记/单词。Document带有字段的虚拟文档。分析仪可以处理…...
动态规划 01背包(算法)
现有四个物品,小偷的背包容量为8,怎么可以偷得价值较多的物品 如: 物品编号: 1 2 3 4 物品容量: 2 3 4 5 物品价值: 3 4 5 8 记f(k,w) ,当背包容量为w,可以偷k件物品…...
使用常数指针作为函数参数
在main.cpp里输入程序如下: #include <iostream> //使能cin(),cout(); #include <iomanip> //使能setbase(),setfill(),setw(),setprecision(),setiosflags()和resetiosflags(); //setbase( char x )是设置输出数字的基数,如输出进制数则用setbas…...
wps宏代码学习
推荐学习视频:https://space.bilibili.com/363834767/channel/collectiondetail?sid1139008&spm_id_from333.788.0.0 打开宏编辑器和JS代码调试 工具-》开发工具-》WPS宏编辑器 左边是工程区,当打开多个excel时会有多个,要注意不要把…...
libavdevice.so.58: cannot open shared object file: No such file ordirectory踩坑
博主是将大图切分成小图时遇到 问题一、linux编译后,找不到ffmpeg中的一个文件 产生原因,各种包集成,然后安装以后乱七八糟,甚至官方的教程也不规范导致没有添加路径到系统文件导致系统执行的时候找不到 1.下载 博主进行的离线…...
Rust:Vec<u8> 与 [u8] 之间的转换
在 Rust 中,Vec<u8> 是一个动态数组,而 &[u8] 是一个指向字节切片的不可变引用。这两者之间经常需要进行转换,因为它们在处理字节数据时非常常见。 从 &[u8] 转换为 Vec<u8> 要将一个字节切片 &[u8] 转换为一个 Ve…...
Leetcode 课程表
这段代码的算法思想是基于**深度优先搜索(DFS)**来检测图中的环路,从而判断是否可以完成所有课程。具体来说,我们将每门课程和它的先修关系视为一个有向图,问题的核心就是判断这个有向图中是否存在环路。如果有环路&am…...
Java面试经典 150 题.P55. 跳跃游戏(009)
本题来自:力扣-面试经典 150 题 面试经典 150 题 - 学习计划 - 力扣(LeetCode)全球极客挚爱的技术成长平台https://leetcode.cn/studyplan/top-interview-150/ 题解: class Solution {public boolean canJump(int[] nums) {int…...
登录的时候密码使用crypto-js加密解密
首先要下载插件 npm install crypto-js 然后新建一个js文件 crypto.js // 导入 CryptoJS 模块 import CryptoJS from crypto-js; const secretKey"pZsgDSvzaeHWDkhLDxvrrrYvBlAsIHmZ";//一般是后端提供的 /*** description: 加解密函数* param {*} data 需要加密的数…...
LLM大模型部署实战指南:部署简化流程
LLM大模型部署实战指南:Ollama简化流程,OpenLLM灵活部署,LocalAI本地优化,Dify赋能应用开发 1. Ollama 部署的本地模型(🔺) Ollama 是一个开源框架,专为在本地机器上便捷部署和运行大型语言模型(LLM)而设计。,这是 Ollama 的官网地址:https://ollama.com/ 以下是其…...
24年10月Google Play政策更新通知
今天gmail邮箱里收到了google play最新的政策更新通知,这次的通知对于我来说,影响不大,邮件内容主要分为三部分。 一、政策更新部分 这里更新的政策只有医疗功能相关的。针对健康和医疗应用增加了最新的医疗指南和免责声明要求,并…...
玄机-应急响应- Linux入侵排查
一、web目录存在木马,请找到木马的密码提交 到web目录进行搜索 find ./ type f -name "*.php" | xargs grep "eval(" 发现有三个可疑文件 1.php看到密码 1 flag{1} 二、服务器疑似存在不死马,请找到不死马的密码提交 被md5加密的…...
数据驱动业务中的BDS对账班牛返款表集成方案
数据驱动业务中的BDS对账班牛返款表集成方案 BDS对账班牛返款表_update:班牛数据集成到MySQL的技术实现 在数据驱动的业务环境中,如何高效、准确地将分散在不同系统中的数据进行整合,是每个企业面临的重要挑战。本文将分享一个具体的技术案例…...
【Kubernetes实战】三、资源组件Namespace、Pod、Label、Deployment、Service概述。
目录 1. Namespace1) namespace作用2) namespace资源的具体操作 2. Pod1) Pod概述2) Pod资源的具体操作 3. Label1) Label概述2) Label资源的具体操作 4. Deployment1) Deployment概述2) Deployment控制器的具体操作 5. Service1) Service概述2) Service资源的具体操作 1. Name…...
去中心化的模型训练
去中心化的模型训练(Decentralized Model Training)是一种不依赖单一中心服务器或数据存储中心,而是在多个节点(如设备或数据拥有者)上进行联合训练的方法。这种训练模式可以更好地保护数据隐私、降低数据传输成本&…...
Arthas调试线上代码技巧
1、Arthas概述 官网地址:https://arthas.aliyun.com/ 下载地址:https://arthas.aliyun.com/arthas-boot.jar 使用教程:https://arthas.aliyun.com/doc/quick-start.html Arthas(阿尔萨斯)是 Alibaba 开源的一款Java诊断…...
QT访问数据库:应用提示Driver not loaded
在QT中运行完全正确错误截图 解决办法1 我用的是MySQL。我把libmysql.dll复制到应用程序的目录下,即可正常访问数据库。 解决办法2 bool open_work_db() {QString info "support drivers:";for (int i0; i<QSqlDatabase::drivers().size(); i){inf…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
MMaDA: Multimodal Large Diffusion Language Models
CODE : https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA,它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
python执行测试用例,allure报乱码且未成功生成报告
allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...
