第十九章 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函数创建了独立的数据对象:

 

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

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

相关文章

mabtisx突然不起作用:mapper跳转不到xml

解决&#xff1a;进入官方下载&#xff1a;JetBrains Marketplace 选择和你idea对应的版本号 切内网下载

ComfyUI正式版来袭!一键安装无需手动部署!支持所有电脑系统

ComfyUI V1重磅发布&#xff1a;迈向AI图像处理新时代 近日&#xff0c;ComfyUI团队正式推出了备受期待的ComfyUI V1版本&#xff0c;为图像生成和处理的AI用户带来了全新的生态体验。这一版本不仅彻底解决了以往版本中繁琐的安装和兼容问题&#xff0c;还大幅提升了易用性&…

pycharm设定代码模板

1、在文件点击设置 ​​​​​​​ ​​​​​​​ 2、点击编辑器--实时模板--找到需要插入模板的位置如我要插入HTML的模板---选择--点击实时模板 3、如图&#xff1a; 4、添加模板内容&#xff0c;如果模板有变量可以在编辑变量处点击编辑 5、编辑变量 6、点…

蘑菇书(EasyRL)学习笔记(2)

1、序列决策 1.1、智能体和环境 如下图所示&#xff0c;序列决策过程是智能体与环境之间的交互&#xff0c;智能体通过动作影响环境&#xff0c;环境则返回观测和奖励。智能体的目标是从这些反馈中学习出能最大化长期奖励的策略&#xff0c;这一过程通过不断试错和调整实现强化…

SQL进阶技巧:如何利用三次指数平滑模型预测商品零售额?

目录 0 问题背景 1 数据准备 2 问题解决 2.1 模型构建 &#xff08;1&#xff09;符号规定 &#xff08;2&#xff09;基本假设 &#xff08;3&#xff09;模型的分析与建立 2.2 模型求解 3 小结 0 问题背景 1960年—1985年全国社会商品零售额如图1 所示 表1全国社…

Rsync远程同步详细介绍

一、rsync介绍 rsync是一款开源的、快速的、多功能的、可实现全量及增量的本地或远程数据同步备份的优秀工具。并且可以不进行改变原有数据的属性信息&#xff0c;实现数据的备份迁移特性。 rsync软件支持跨平台&#xff0c;适用于unix/ linux/windows等多种操作系统平台。rsyn…

无人机之自动控制原理篇

一、飞控系统 无人机飞控是指无人机的飞行控制系统&#xff0c;是无人机的大脑。飞控系统通过传感器、控制器和执行机构三部分实现对无人机的自动控制。 传感器&#xff1a;传感器负责收集无人机的姿态、速度、高度等信息。常见的传感器包括陀螺仪、加速度计、磁力计、气压计、…

得物App获评新奖项,正品保障夯实供应链创新水平

近日&#xff0c;得物App再度获评新奖项——“2024上海市供应链创新与应用优秀案例”。 本次奖项为上海市供应链领域最高奖项&#xff0c;旨在评选出在供应链创新成效上处于领先地位、拥有成功模式和经验的企业。今年以来&#xff0c;得物App已接连获得“上海市质量金奖”、“科…

STM32F103C8T6学习笔记3--按键控制LED灯

1、实验内容 S4、S5分别接PB12和PB13&#xff0c;实验要求&#xff0c;按下S4&#xff0c;D1亮&#xff0c;D2灭&#xff1b;按下S5&#xff0c;D2亮&#xff0c;D1灭。 由于按键学习的是GPIO口的输入功能&#xff0c;和输出功能的配置略有区别。本次通过按键触发相应功能没有…

10.27复习day —— 药销系统分页前(上)

登陆界面 1.auto 水平方向 —— 占据尽量多的空间 margin:auto —— 水平居中 2.块状&#xff1a;block main、div、p 特点&#xff1a; 独占一行 水平方向占满父元素可用空间&#xff08;所以得设置宽度&#xff09; 垂直方向占据空间由其内容大小决定 行内&#xff1a;inlin…

clickhouse运维篇(三):生产环境一键生成配置并快速部署ck集群

前提条件&#xff1a;先了解集群搭建流程是什么样&#xff0c;需要改哪些配置&#xff0c;有哪些环境&#xff0c;这个文章目的是简化部署。 clickhouse运维篇&#xff08;一&#xff09;&#xff1a;docker-compose 快速部署clickhouse集群 clickhouse运维篇&#xff08;二&am…

快速入门kotlin编程(精简但全面版)

注&#xff1a;本文章为个人学习记录&#xff0c;如有错误&#xff0c;欢迎留言指正。 目录 1. 变量 1.1 变量声明 1.2 数据类型 2. 函数 3. 判断语句 3.1 if 3.2 when语句 4. 循环语句 4.1 while 4.2 for-in 5. 类和对象 5.1 类的创建和对象的初始化 5.2 继承 5…

云原生Istio基础

一&#xff0e;Service Mesh 架构 Service Mesh&#xff08;服务网格&#xff09;是一种用于处理服务到服务通信的专用基础设施层。它的主要目的是将微服务之间复杂的通信和治理逻辑从微服务代码中分离出来&#xff0c;放到一个独立的层中进行管理。传统的微服务架构中&#x…

【网页布局技术】项目五 使用CSS设置导航栏

《CSSDIV网页样式与布局案例教程》 徐琴 目录 任务一 制作简单纵向导航栏支撑知识点1&#xff0e;合理利用display:block属性2&#xff0e;利用margin-bottom设置间隔效果3&#xff0e;利用border设置特殊边框 任务二 制作简单横向导航栏任务三 制作带图片效果的横向导航栏任务…

银河麒麟v10 xrdp安装

为了解决科技被卡脖子的问题&#xff0c;国家正在大力推进软硬件系统的信创替代&#xff0c;对于一些平时对Linux操作系统不太熟练的用户来讲提出了更高的挑战和要求。本文以银河麒麟v10 24.03为例带领大家配置kylin v10的远程桌面。 最近公司为了配置信创开发新购了几台银河麒…

什么是x86架构,什么是arm架构

什么是 x86 架构&#xff1f; x86 架构是一种经典的指令集架构&#xff08;ISA&#xff09;&#xff0c;最早由英特尔在 1978 年推出&#xff0c;主要用于 PC、服务器等领域。 它是一种复杂指令集计算&#xff08;CISC&#xff09;架构&#xff0c;支持大量的复杂指令和操作&…

客户的奇葩要求—在CAN网络的基础上加入了CAN_FD的节点

1&#xff1a;客户的奇葩要求 最近的工作中&#xff0c;遇到了一个有点奇葩的事&#xff0c;客户需要开发一个系统&#xff0c;我们负责其中的一个ECU&#xff0c;这个系统采取的是经典11bit ID的CAN网络。 今天突然提了一个要求&#xff0c;说要在网络中&#xff0c;加入支持…

4G 模组的 FTP 应用:技术科普

众所周知FTP协议包括两个组成部分&#xff0c;其一为FTP服务器&#xff0c;其二为FTP客户端&#xff0c;今天我将为大家带来一场4G 模组的 FTP 应用技术科普&#xff1a; 以低功耗模组Air780E核心板为例。 1、FTP 概述 FTP&#xff08;File Transfer Protocol&#xff0c;文件…

PAT甲级-1074 Reversing Linked List

题目 题目大意 给一个链表的头结点和总节点个数&#xff0c;以及k。每k个节点的链表都要翻转。 思路 链表可以用一个结构体数组来存储&#xff0c;先遍历一遍&#xff0c;过滤掉不在链表中的节点。然后将过滤好的节点放入res数组中&#xff0c;每k个元素用一次reverse()&…

44-RK3588s调试 camera-engine-rkaiq(rkaiq_3A_server)

在RK3588s平台上调试imx415 camera sensor 过程中&#xff0c;已经识别到了camera sensor ID&#xff0c;并且可以拿到raw图和isp处理后的图像&#xff0c;但是isp处理后的图像偏绿&#xff0c;来看查看后台服务发现rkaiq_3A_server没有运行&#xff0c;然后单独运行rkaiq_3A_s…