第十九章 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;还大幅提升了易用性&…

重构代码之提取子类

提取子类主要用于精简类结构和增强代码的灵活性。这个方法适用于当类中的某些字段或方法只适用于特定对象的情况。通过提取子类&#xff0c;可以将这些特定的字段和方法分离到一个新的子类中&#xff0c;使代码结构更清晰。 一、为什么要使用提取子类 提高代码的可读性&#…

pycharm设定代码模板

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

代码训练营 day50|LeetCode 115,LeetCode 583,LeetCode 72

前言 这里记录一下陈菜菜的刷题记录&#xff0c;主要应对25秋招、春招 个人背景 211CS本CUHK计算机相关硕&#xff0c;一年车企软件开发经验 代码能力&#xff1a;有待提高 常用语言&#xff1a;C 系列文章目录 第50天 &#xff1a;第九章 动态规划part12 文章目录 前言系列…

蘑菇书(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…

Spring Cloud OpenFeign:基于Ribbon和Hystrix的声明式服务调用

Spring Cloud OpenFeign&#xff1a;基于Ribbon和Hystrix的声明式服务调用 Spring Cloud OpenFeign是一个声明式的服务调用框架&#xff0c;基于Feign并整合了Ribbon和Hystrix&#xff1b;目标是简化分布式系统中编写服务间调用的代码&#xff0c;并提供一种更加优雅和便捷的方…

Vue项目打包部署与路由配置深度解析

在Vue.js项目的开发和部署过程中&#xff0c;配置打包路径和路由模式是两个至关重要的环节。下面&#xff0c;我们将详细探讨如何根据需求将Vue项目打包部署到域名的根路径或二级路径&#xff0c;并深入解析hash路由与history路由的配置方法。 一、Vue项目打包部署 1. 配置vue.…

无人机之自动控制原理篇

一、飞控系统 无人机飞控是指无人机的飞行控制系统&#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…

如何理解Js中闭包

闭包&#xff08;Closure&#xff09;是JavaScript中的一个重要概念&#xff0c;它指的是函数能够记住并访问它的词法作用域&#xff08;lexical scope&#xff09;&#xff0c;即使这个函数在其词法作用域之外执行。简而言之&#xff0c;闭包允许你从内部函数访问外部函数的变…

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…

Android -- 调用系统相册之图片裁剪保存

前言 最近线上反馈&#xff0c;部分vivo手机更换头像时调用系统相册保存图片失败&#xff0c;经本人测试&#xff0c;确实有问题。 经修复后&#xff0c;贴出这块的代码供小伙伴们参考使用。 功能 更换头像选择图片&#xff1a; 调用系统相机拍照&#xff0c;调用系统图片…

【Linux刷题练习】

题目 1 题目&#xff1a;Linux 文件权限 -rwxr-xr-x 是什么意思&#xff0c;怎样变更文件夹以及下面所有文件的拥有者&#xff1f; 正确答案&#xff1a;A 知识点&#xff1a; 文件权限&#xff1a; -rwxr-xr-x 表示文件权限&#xff1a; 第一个 - 表示文件类型&#xff0c;…