Vue3【四】使用Vue2的写法写一个新的组件子组件和根组件

Vue3【四】使用Vue2的写法写一个新的组件

Vue3【四】使用Vue2的写法写一个新的组件
Vue3是向下兼容的,所有可以使用Vue的选项式写法

运行截图

在这里插入图片描述

目录结构

目录结构

文件源码

App.vue

<template><div class="app"><h1>你好世界! 我是App根组件</h1><Person /></div>
</template><script lang="ts">
import Person from './components/Person.vue'
export default {name: 'App', //组件名字// 注册组件components: {Person}
}</script><style>
.app {background-color: #4fffbb;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>

Persion.vue

<template><div class="person"><h1>我是Person组件</h1><h2>姓名:{{ name }}</h2><h2>年龄:{{ age }} </h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showAdd">查看信息</button></div>
</template><script lang="ts">
export default {name: 'Person', //组件名字// Vue2 方式写的数据data() {return {name: "太上老君",age: 18000,add: '太上老君是公认的道教始祖,即道教中具有开天创世与救赎教化的太上道祖。'}},methods: {showAdd() {alert(this.add)},changeName(){this.name = this.name == "太白金星"?'太上老君':'太白金星'},changeAge(){this.age += 1}}
}</script><style>
.person {background-color: #ff9e4f;box-shadow: 0 0 10px;border-radius: 30px;padding: 30px;
}
button{margin:0 10px;padding: 0 5px;box-shadow: 0 0 5px;;
}
</style>

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

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

相关文章

数据分析常用模型合集(二)RARRA模型、RFM模型

随着互联网的发展&#xff0c;前期平台的砸钱拉新、抢占市场&#xff0c;大家都叫AARRR小甜甜&#xff1b; 现在市场基本抢占得差不多&#xff0c;形成了一个平衡&#xff0c;新人基本拉不到多少&#xff0c;用户都知道干什么事有哪些平台&#xff0c;比如买东西主流淘宝、京东…

动态IP基础解析:为什么我们需要它?

在深入探讨互联网世界的运作机制时&#xff0c;IP地址无疑是其核心要素之一。IP地址&#xff0c;作为网络设备的唯一标识&#xff0c;不仅确保了数据的准确传输&#xff0c;更是网络安全和管理的基石。本文将深入解析动态IP的基础知识&#xff0c;并探讨其重要性及在多种场景下…

Go_context包

是什么?为什么? context时goroutine之间传递上下文消息&#xff0c;包括信号取消&#xff0c;储存数据。 为什么&#xff1f; Go通常写后端服务&#xff0c;启动一个HTTP请求会启动多个goroutine&#xff0c;可以共享token数据。 或者处理时间长&#xff0c;通过停止信号关联…

大语言模型应用与传统程序的不同

大语言模型&#xff08;LLM&#xff09; 被描述的神乎其神&#xff0c;无所不能&#xff0c;其实&#xff0c;大语言模型只是一个模型&#xff0c;它能够理解和生成自然语言&#xff0c;唯有依靠应用程序才能够发挥作用。例如&#xff0c;基于大模型可以构建一个最简单的会话机…

安装jdk-8u411-windows-x64.exe,点击下一步不出安装界面

微信输入法的坑。点击下一步&#xff0c;安装界面消失&#xff0c;没有任何提示。 之前把默认微软拼音输入法删除了。免得多个输入法来回切换 谁能想到是微信输入法的事 切换为微软输入法&#xff0c;再安装jdk-8u411-windows-x64.exe&#xff0c;进行出现下一步的界面 以下…

神经网络 torch.nn---Non-Linear Activations (ReLU)

ReLU — PyTorch 2.3 documentation torch.nn - PyTorch中文文档 (pytorch-cn.readthedocs.io) 非线性变换的目的 非线性变换的目的是为神经网络引入一些非线性特征&#xff0c;使其训练出一些符合各种曲线或各种特征的模型。 换句话来说&#xff0c;如果模型都是直线特征的…

拼多多面试:Netty如何解决粘包问题?

粘包和拆包问题也叫做粘包和半包问题&#xff0c;它是指在数据传输时&#xff0c;接收方未能正常读取到一条完整数据的情况&#xff08;只读取了部分数据&#xff0c;或多读取到了另一条数据的情况&#xff09;就叫做粘包或拆包问题。 从严格意义上来说&#xff0c;粘包问题和…

全球AI新闻速递6.5

全球AI新闻速递 1.昆仑万维&#xff1a;开源2 千亿稀疏大模型天工Skywork-MoE&#xff0c;首个支持单台RTX 4090服务器。 2.字节豆包推出桌面客户端&#xff1a;支持 Windows / macOS&#xff0c;快捷启动、AI 划词、 AI 搜索。 3.东风柳汽与优必选科技签署人形机器人汽车制造…

FreeRTOS手表项目多级菜单的实现

一、首先介绍一下智能手表项目的背景&#xff1a; 如图&#xff0c;关注焦点是任务&#xff1a; 1、在一个确定时刻&#xff0c;在那一圈任务中&#xff08;写有只有一个任务解挂&#xff09;只有一个任务处在运行&#xff0c;界面显示的是该任务应该显示的内容&#xff1b; …

vscode运行Java utf-8文件中文乱码报错

问题现象 vscode 运行utf-8 java文,爆出如下错误 hello.java:5: &#xfffd;&#xfffd;&#xfffd;&#xfffd;: &#xfffd;&#xfffd;&#xfffd;&#xfffd;GBK&#xfffd;IJ&#xfffd;&#xfffd;&#xfffd;ӳ&#xfffd;&#xfffd;&#xfffd;ַ&a…

0010__html5和html有什么区别?这篇文章告诉你

html5和html有什么区别&#xff1f;这篇文章告诉你_html5和html的区别-CSDN博客

如何增加网站外链?

想增加网站外链&#xff0c;无非就是去其他别的网站不停去发带自己网站链接的内容&#xff0c;这取决于你去什么平台发&#xff0c;一般来说发外链无非就是几种方式 博客以及论坛&#xff0c;要能提供评论功能的&#xff0c;在这种平台积极发表评论&#xff0c;并在允许的情况…

DevOps在数字化转型中的作用——实现数字化可视性

DevOps 的出现是为了满足不断增长的市场和消费者对技术应用程序的需求。它旨在在不牺牲软件质量的情况下创建更快的开发环境。DevOps 还专注于在快速开发生命周期中提高软件的整体质量。它依赖于多种技术、平台和工具的组合来实现所有这些目标。 容器化是一项彻底改变了我们开发…

人眼是如何选择成像的二

我之前对如何选择成像&#xff0c;做了一些分析&#xff0c;但是有一些瑕疵的地方是相位&#xff0c;无法确定&#xff0c;这需要测量电矢量的瞬时值&#xff0c;但是在测量间隔远大于周期函数的周期T的情况下&#xff0c;需要做一些分析。 首先我最开始想到的是采样的时间点其…

如何在桌面添加多个便签 怎样在桌面创建便签

每当我坐在电脑前&#xff0c;总会被各种琐事和灵感所困扰&#xff0c;需要一个随手可记、随时可查的工具。直到我发现了敬业签便签软件彻底改变了我的工作习惯。 她不仅可以在桌面上轻松创建多个便签&#xff0c;而且它的“云游”功能简直让我爱不释手。想象一下&#xff0c;…

http://account.battlenet.com.cn

http://account.battlenet.com.cn 魔兽战网 短信验证 查了下&#xff0c;我老早以前账号还在&#xff0c;纪念下&#xff0c;少玩游戏。

计算机网络学习记录 应用层 Day6

你好,我是Qiuner. 为记录自己编程学习过程和帮助别人少走弯路而写博客 这是我的 github https://github.com/Qiuner ⭐️ ​ gitee https://gitee.com/Qiuner &#x1f339; 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 &#x1f604; (^ ~ ^) 想看更多 那就点个关注吧 我…

无法加载类‘org.gradle.api.publication.maven.internal.MavenPomMetaInfoProvider‘

造成报错原因 升级Gradle 后Build项目报错 报错根源 build.gradle 中包含&#xff1a; apply plugin: com.github.dcendents.android-mavenclasspath com.github.dcendents:android-maven-gradle-plugin:2.1解决方法 删除上述两行代码 参考 https://cloud.tencent.com/d…

国产方案|轮胎气压胎压计方案

气压胎压计的基本原理是利用气压传感器将气体气压转换为电信号&#xff0c;再通过电子芯片电路进行处理传输&#xff0c;再将这些信息转发给显示屏显示。常见的传感器包括模拟气压传感器和数字气压传感器。其中&#xff0c;模拟气压传感器是目前应用最广泛的传感器之一&#xf…

2020 6.s081——Lab5:Lazy page allocation

再来是千年的千年 不变是眷恋的眷恋 飞越宇宙无极限 我们永不说再见 ——超兽武装 完整代码见&#xff1a;SnowLegend-star/6.s081 at lazy (github.com) Eliminate allocation from sbrk() (easy) 顾名思义&#xff0c;就是去掉sbrk()中调用growproc()的部分。1s完事儿。 Laz…