Vue单文件组件

一、.vue文件

我们使用Vue的单文件组件的时候,一个.vue文件就是一个组件。

例如我们创建一个School组件:

二、组件的结构

我们编写网页代码的时候有HTML结构、CSS样式、JS交互。

组件里也是同样存在这三种结构的:

<template><div><!-- 模板 --></div>
</template><script>// 交互
</script><style>/* 样式 */
</style>

模板中必须要用一个div标签包住所有的模板,不然会报错。

然后将模板的内容写在template中,Vue的内容写在script中,style正常写样式即可。

<template><div><div>学校名称:{{ name }}</div><div>学校地址:{{ address }}</div><button @click="showHello">点我弹窗</button></div>
</template><script>
export default {name:"School",data() {return {name: "家里蹲大学",address: "家",}},methods: {showHello() {alert("Hello!");},}
};
</script><style>button{background-color: skyblue;}
</style>

这里的VueComponent必须暴露出去外界才能引用到这个组件。

三、App.vue

当我们创建完所有的组件的后,全部都交由App.vue进行统一管理。

先对组件进行引入,然后配置components,最后在模板中使用组件:

<template><div><School/><Student/></div>
</template><script>
import School from './School.vue';
import Student from './Student.vue';export default {name: "App",components: {School,Student}
}
</script>

四、main.js

main.js为入口文件,主要管理App.vue文件。

需要创建Vue实例对象和挂载Vue:

import App from "App.vue";new Vue({el: "#root",template: `<App></App>`,components: {App}
})

五、index.html

配置root根元素和引入入口文件:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="root"></div><script src="/js/vue.js"></script><script src="/单文件组件/main.js"></script>
</body>
</html>

所以最终文件结构如下:

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

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

相关文章

甘特图组件DHTMLX Gantt示例 - 如何有效管理团队工作时间?(二)

如果没有有效的时间管理工具&#xff0c;如工作时间日历&#xff0c;很难想象一个项目如何成功运转。这就是为什么我们的开发团队非常重视项目管理&#xff0c;并提供了多种选择来安排DHTMLX Gantt的工作时间。使用DHTMLX Gantt这个JavaScript库&#xff0c;您可以创建一个强大…

2024SCI经验心得分享---如何在零基础、导师基本放养的情况下---发表自己的第一篇SCI(三区)经验分享篇

本期的经验分享&#xff0c;采访到了我的一位非常非常非常优秀的师妹&#xff0c;师妹于今年6月份投稿&#xff0c;10月份录用&#xff0c;历时四个月录用了自己的第一篇SCI&#xff08;三区&#xff09;的文章图像处理类的&#xff0c;同时师妹也取得了很多其他优秀的荣誉。 众…

软考系列(系统架构师)- 2020年系统架构师软考案例分析考点

试题一 软件架构&#xff08;架构风格、质量属性&#xff09; 【问题1】&#xff08;13分&#xff09; 针对该系统的功能&#xff0c;李工建议采用管道-过滤器&#xff08;pipe and filter)的架构风格&#xff0c;而王工则建议采用仓库&#xff08;reposilory)架构风格。请指出…

mysql图片存取初探

mysql数据库中使用blob存储使用base64加密图片数据 前言 这个方法并不好&#xff0c;因为传输的数据量还是蛮大的&#xff0c;可以存一些诸如头像的小图片&#xff0c;但是如果要存较大的图片会很慢。 不过只是课程作业中简单的功能&#xff0c;这样子简单又快捷&#xff0c;…

CICD 流程学习(五)Jenkins后端工程构建

案例1&#xff1a;数据库服务部署 MySQL部署 #安装MySQL服务 [rootServices ~]# yum clean all; yum repolist -v ... Total packages: 8,265 [rootServices ~]# yum -y install mysql.x86_64 mysql-server.x86_64 mysql-devel.x86_64 ... Complete! [rootServices ~]# #启动…

【JavaEE】网络编程---TCP数据报套接字编程

一、TCP数据报套接字编程 1.1 ServerSocket API ServerSocket 是创建TCP服务端Socket的API ServerSocket 构造方法&#xff1a; ServerSocket 方法&#xff1a; 1.2 Socket API Socket 是客户端Socket&#xff0c;或服务端中接收到客户端建立连接&#xff08;accept方法&…

WordPress SMTP邮件发送插件 Easy WP SMTP

Easy WP SMTP是一款 WordPress 邮件发送插件&#xff0c;WordPress 中经常用到邮件发送&#xff0c;包括新注册用户的邮件通知、找回密码通知、评论回复通知等。因为云服务器默认不启用 SMTP功能&#xff0c;所以需要安装 SMTP插件来解决这个问题。 SMTP 主机&#xff1a;smtp.…

Kurento多对多webrtc会议搭建测试

环境ubuntu18.04 KMS版本6.13.0 多对多通信demo7.0.0 KMS运行起来后&#xff0c;通过运行它的一个个demo&#xff0c;来实现不同的功能&#xff0c;它的demo很多如下&#xff1a; https://github.com/Kurento 里面有一对一&#xff0c;多对多&#xff0c;还有一些特效的demo。…

汽车屏类产品(三):抬头显示Head-Up Display(HUD)

前言 你的下一台车,一定要考虑加装一个HUD。 汽车抬头显示器或汽车抬头显示器(也称为汽车HUD)是任何透明的显示器,它可以在汽车中显示数据,而不需要用户将视线从平时的视角移开。这个名字的由来源于飞行员能够在头部“向上”并向前看的情况下查看信息,而不是向下倾斜查…

ARM可用的可信固件项目简介

安全之安全(security)博客目录导读 目录 一、TrustedFirmware-A (TF-A) 二、MCUboot 三、TrustedFirmware-M (TF-M) 四、TF-RMM 五、OP-TEE 六、Mbed TLS 七、Hafnium 八、Trusted Services 九、Open CI 可信固件为Armv8-A、Armv9-A和Armv8-M提供了安全软件的参考实现…

强化学习代码实战(2) --- 多臂赌博机

目录 前言 1.Python基础 2.Numpy基础 3.多臂赌博机 参考文献 前言 本文内容来自于南京大学郭宪老师在博文视点学院录制的视频&#xff0c;课程仅9元地址&#xff0c;配套书籍为深入浅出强化学习 编程实战 郭宪地址。 1.Python基础 1. print() 可以用该语句查看当前数据的情…

基于食肉植物优化的BP神经网络(分类应用) - 附代码

基于食肉植物优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于食肉植物优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.食肉植物优化BP神经网络3.1 BP神经网络参数设置3.2 食肉植物算法应用 4.测试结果…

MSP430F5529时钟系统配置

1、为什么要进行时钟管理&#xff1f;   时钟系统是一个数字器件的命脉&#xff0c;对于普通的51单片机来说&#xff0c;它的时钟来源只有外部晶振&#xff0c;然后每12个振荡周期完成一个基本操作&#xff0c;所以也叫做12T单片机&#xff0c;但对于当前高级一点的单片机来…

一文解读 SmartX 超融合虚拟化下的网络 I/O 虚拟化技术

随着技术的不断发展&#xff0c;不少行业应用都对网络性能和隔离性有着越来越高的要求。例如&#xff1a; 低延迟&#xff1a;一些期货行业用户选择在期货公司机房托管服务器并自行编写交易程序&#xff0c;以实现对市场波动的快速&#xff08;微秒级&#xff09;反应。尤其是在…

并查集讲解

并查集讲解 一、算法描述二、图示讲解三、代码示例四、例题练习 一、算法描述 并查集算法是一种用于处理不相交集合数据结构的算法。它经常被用来解决网络流问题、图的最小生成树问题等。在这篇博客中&#xff0c;我们将深入理解并查集算法&#xff0c;以及如何在实际编程中使…

设计模式思维导图

ProcessOn思维导图链接

睿趣科技:抖音小店申请流程

随着移动互联网的发展&#xff0c;越来越多的人开始尝试通过开设网店来创业。抖音作为国内最受欢迎的短视频平台之一&#xff0c;也推出了自己的电商功能——抖音小店。那么&#xff0c;如何申请抖音小店呢?下面就为大家详细介绍一下抖音小店的申请流程。 首先&#xff0c;打开…

基于springboot实现CSGO赛事管理系统【项目源码+论文说明】计算机毕业设计

基于SpringBoot实现CSGO赛事管理系统演示 摘要 CSGO赛事管理系统是针对CSGO赛事管理方面必不可少的一个部分。在CSGO赛事管理的整个过程中&#xff0c;CSGO赛事管理系统担负着最重要的角色。为满足如今日益复杂的管理需求&#xff0c;各类的管理系统也在不断改进。本课题所设计…

Redis的五种常用(基本)数据类型

目录 1、Redis简介 2、五种常用&#xff08;基本&#xff09;数据类型 2.1 String 数据结构 ⭐常用用法 举例&#xff08;Linux版本&#xff09; 2.2 List 数据结构 ⭐常用用法 举例&#xff08;Linux版本&#xff09; 2.3 Set 数据结构 ⭐常用用法 举例&#xf…

youyeetoo R1卡片电脑(rk3588s)

简介&#xff1a; youyeetoo R1 是风火轮科技专为AIOT市场设计的嵌入式主板(SBC)&#xff0c;体积小但功能强大&#xff0c;搭载瑞芯微旗舰级RK3588s 八核64位处理器&#xff0c;8nm 制程&#xff0c;主频高达2.4GHz&#xff0c;集成ARM Mali-G610 MP4 GPU&#xff0c;内置6 To…