Vue-30、Vue非单文件组件。
非单文件组件：
一个组件包含n个组件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>非单文件组件</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript" src="./js/dayjs.min.js"></script><style></style>
</head>
<body>
<div id="root"><!--第三步：编写组件标签--><xuexiao></xuexiao><hr><!--第三步：编写组件标签--><xuesheng></xuesheng>
</div><script type="text/javascript">Vue.config.productionTip=false;//第一步创建school组件const school = Vue.extend({//el:'#root' //一定不要写el 配置项，因为最终所有的组件都要被一个vm 管理，由vm决定服务于那个容器。template:`<div><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button></div>`,data(){return{schoolName:'清华大学',address:'北京',}},methods:{showName(){alert(this.schoolName)}}});//第一步创建student组件const student = Vue.extend({template:`<div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data(){return{studentName:'张仨',age:18,}}});//创建hello组件const hello = vue.extend({template:`<div><h2>你好啊：{{name}}</h2></div>`,data(){return{name:'李四',}}});//全局注册Vue.component('hello',hello);new Vue({el:"#root",data:{msg:'消息'},//第二步:注册组件（局部注册）components:{xuexiao:school,xuesheng:student}})
</script>
</body>
</html>
总结：
注意点
组件的嵌套：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组件嵌套</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript" src="./js/dayjs.min.js"></script><style></style>
</head>
<body>
<div id="root"><app></app>
</div>
<script type="text/javascript">Vue.config.productionTip=false;//第一步student组件const student = Vue.extend({template:`<div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data(){return{studentName:'张仨',age:18,}}});//第一步创建school组件const school = Vue.extend({//el:'#root' //一定不要写el 配置项，因为最终所有的组件都要被一个vm 管理，由vm决定服务于那个容器。template:`<div><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><hr><student></student></div>`,data(){return{schoolName:'清华大学',address:'北京',}},components:{student}});//第一步创建hello组件const hello = {name:'hello',template:`<div><h1>{{msg}}</h1></div>`,data(){return{msg:'欢迎你',}}};//定义app组件const app = Vue.extend({template:`<div><hello></hello><school></school></div>`,components:{hello,school}});new Vue({el:"#root",data:{msg:'消息'},components:{app}})
</script>
</body>
</html>
相关文章：
Vue-30、Vue非单文件组件。
非单文件组件： 一个组件包含n个组件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>非单文件组件</title><script type"text/javascript" src"https://cdn.jsde…...
7-6 实验2_1_判断两数的大小
7-6 实验2_1_判断两数的大小 分数 100 全屏浏览题目 切换布局 作者 scs 单位 北京邮电大学 已知有两个整数，请使用if-else选择结构将它们中的较大数选择出来，存到max变量中；将较小数选择出来，存到min变量中，并将选…...
POKT Network (POKT) ：进军百亿美元市场规模的人工智能推理市场
POKT Network（又称 Pocket Network）是一个去中心化的物理基础设施网络（DePIN），它能够协调并激励对任何开放数据源的访问，最初专注于向应用程序和服务提供商提供区块链数据。 自 2020 年主网上线以来&#x…...
【STM32】STM32学习笔记-I2C通信外设(34)
00. 目录 文章目录 00. 目录01. I2C简介02. I2C外设简介03. I2C框图04. I2C基本结构05. 主机发送06. 主机接收07. 软件/硬件波形对比08. 预留09. 附录 01. I2C简介 I2C(Inter－Integrated Circuit)总线是一种由NXP（原PHILIPS）公司开发的两线式…...
从数据角度分析年龄与NBA球员赛场表现的关系【数据分析项目分享】
好久不见朋友们，今天给大家分享一个我自己很感兴趣的话题分析——NBA球员表现跟年龄关系到底大不大？数据来源于Kaggle，感兴趣的朋友可以点赞评论留言，我会将数据同代码一起发送给你。 目录 NBA球员表现的探索性数据分析导入Python…...
深入浅出Spring AOP
第1章：引言 大家好，我是小黑，咱们今天要聊的是Java中Spring框架的AOP（面向切面编程）。对于程序员来说，理解AOP对于掌握Spring框架来说是超级关键的。它像是魔法一样，能让咱们在不改变原有代码的…...
火速收藏！2024 新年微信红包封面领取全攻略
2024“龙”重登场！今年有哪些令人期待的红包封面？ 前方大批精美红包封面来袭，全新品牌氛围红包封面上线，支持品牌定制特色氛围元素，沉浸感受浓浓年味儿，收获满满惊喜！ 新年开好运，微…...
【RabbitMQ】RabbitMQ安装与使用详解以及Spring集成
🎉🎉欢迎来到我的CSDN主页！🎉🎉 🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《RabbitMQ实战》。🎯🎯 &am…...
企业多云组网怎么办？
在当今数字化时代，企业普遍采用多云策略，同时利用不同云平台的优势以实现成本优化和整体性能提升。根据Futuriom于2022年发布的“安全多云网络调查”报告，80%的受访者表示他们使用来自两个或更多公共云提供商的PaaS或IaaS产品。 多云策略的迅…...
背包问题（贪心） 二维01背包问题 Java
背包问题（贪心） 最优装载问题 题目描述 有n件物品和一个最大承重为w 的背包。第i件物品的重量是weight[i]，每件只能用一次，求装入背包的最多物品数量。 题目分析 因为我们只要求装入物品的数量，所以装重的显然没有…...
2019年认证杯SPSSPRO杯数学建模D题(第二阶段)5G时代引发的道路规划革命全过程文档及程序
2019年认证杯SPSSPRO杯数学建模 D题 5G时代引发的道路规划革命 原题再现： 忙着回家或上班的司机们都知道交通堵塞既浪费时间又浪费燃料，甚至有的时候会带来情绪上的巨大影响，引发一系列的交通问题。据报道，每年交通拥堵使得美国…...
可视化k8s页面（Kubepi）
Kubepi是一个简单高效的k8s集群图形化管理工具，方便日常管理K8S集群，高效快速的查询日志定位问题的工具 随便在哪个节点部署，我这里在主节点部署 docker pull kubeoperator/kubepi-server docker run --privileged -itd --restartunless-st…...
1434. 数池塘（四方向）-深度优先搜索-DFS
代码： #include<iostream> using namespace std; char a[200][200]; int fx[4]{0,1,0,-1}; int fy[4]{1,0,-1,0}; int k0; int n,m; void dfs(int x,int y){a[x][y].;int tx,ty;for(int i0;i<4;i){txxfx[i];tyyfy[i];if(tx>1&&tx<n&&am…...
Mysql：重点且常用的操作和理论知识整理 ^_^
目录 1 基础的命令操作 2 DDL 数据库定义语言 2.1 数据库操作 2.2 数据表操作 2.2.1 创建数据表 2.2.2 修改和删除数据表 2.2.3 添加外键 3 DML 数据库操作语言 3.1 插入语句(INSERT) 3.2 修改语句(UPDATE) 3.3 删除语句 3.3.1 DELETE命令 3.3.2 TRUNCATE命令 4 …...
小车辅助脚本编写
小车辅助脚本编写 在远程控制中需要启动非常多的 Launch 文件，在终端启动很麻烦，编写一些脚本可以简化操作 robot_client.sh #!/bin/bashecho "开始执行Bash脚本"# 启动zedm roslaunch zed_wrapper zedm.launch & sleep 5# 启动realsen…...
Modern C++ 一个例子学习条件变量
目录 问题程序 施魔法让BUG浮出水面 条件变量注意事项 修改程序 问题程序 今天无意中看到一篇帖子，关于条件变量的，不过仔细看看发现它并达不到原本的目的。 程序如下，读者可以先想想他的本意，以及有没有问题： #…...
ora-12154无法解析指定的连接标识符
用户反映查询的时候报错ora-12154 这个系统只做历史数据查询使用，使用并不平凡，该数据库曾做过一次服务器间的迁移。 用户描述，所有oracle客户端查询该视图都报tns错误，一般ora-12154会发生在连接数据库时，因为tns配…...
rust跟我学三:文件时间属性获得方法
图为RUST吉祥物 大家好，我是get_local_info作者带剑书生，这里用一篇文章讲解get_local_info是怎样获得杀毒软件的病毒库时间的。 首先，先要了解get_local_info是什么？ get_local_info是一个获取linux系统信息的rust三方库，并提供一些常用功能，目前版本0.2.4。详细介绍地址…...
解决一个mysql的更新属性长度问题
需求背景： 线上有一个 platform属性，原有长度为 varchar(10)，但是突然需要填入一个11位长度的值；而偏偏这个属性在线上100张表中有50张都存在，并且名字各式各样，庆幸都包含 platform；例如 platf…...
[网络安全]DHCP 部署与安全
一 、DHCP作用 (Dynamic HOst Configure Protocol ) 动态IP配置协议 作用:动态自动分配IP地址 二、DHCP相关概念 地址池/作用域: (IP、子网掩码、网关、DNS、周期) 三、DHCP优点 减少工程量 避免IP避免 提高地址利用率 四、DHCP原理 成为DHCP租约过程 步骤: 1.发送 DHC…...
除了阿里云，还有哪些靠谱的身份证实名认证方案？SpringBoot整合横向评测
SpringBoot整合主流身份证实名认证API横向评测：从阿里云到多服务商技术选型指南 当你的应用需要接入身份证实名认证功能时，阿里云可能只是众多选项中的一个起点。作为技术决策者，如何在腾讯云、百度智能云、聚合数据等众多服务商中做出最优选…...
抖音批量下载终极指南：一键获取无水印视频与创作者全部作品
抖音批量下载终极指南：一键获取无水印视频与创作者全部作品 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback …...
2026降AI工具实测：性价比/效果/安全选品指南
花了整整一周时间把市面5款主流降AI工具全维度测了一遍，从处理效果、定价、安全性三个核心维度做了横向对比。结论放在最前面：综合实力最强、毕业生首选的是SpeedAI科研小助手，性价比拉满，新手还能免费试用，完全适配绝…...
pybind11进阶指南：如何高效封装C++类供Python调用（附常见问题解决方案）
pybind11进阶指南：如何高效封装C类供Python调用（附常见问题解决方案） 在当今高性能计算和科学计算领域，C与Python的结合已成为开发者工具箱中不可或缺的组合。C提供底层性能优势，而Python则以其简洁语法和丰富生态著称…...
宠物店主的福音：用LongCat一键生成宠物服装电商主图，省时省力
宠物店主的福音：用LongCat一键生成宠物服装电商主图，省时省力 1. 为什么宠物店主需要AI图片编辑工具 开宠物店的朋友们都知道，商品主图的质量直接影响销量。一件宠物小衣服，如果只是平铺拍摄或者随便套在模特身上，很…...
在MATLAB中调用与可视化Lingbot-Depth-Pretrain-ViTL-14的深度估计结果
在MATLAB中调用与可视化Lingbot-Depth-Pretrain-ViTL-14的深度估计结果 对于很多从事计算机视觉、机器人或者测绘相关研究的工程师和学者来说，深度估计是一个基础又关键的任务。它能从一张普通的二维图片中，推测出每个像素点距离相机的远近，…...
初识Git，带你深入学习Git相关的知识
在之前的博客中，我都会在博客的开头放一个gitee的链接。Gitee是什么呢？它是一个远程的代码托管库。在我们学习和项目管理的时候起着非常重要的作用。 本期我就带领着大家一起学习Git相关的知识内容。学习它的操作，了解其在企业级开发中的作用…...
Kandinsky-5.0-I2V-Lite-5s效果展示：建筑图纸→镜头平移漫游视频生成案例
Kandinsky-5.0-I2V-Lite-5s效果展示：建筑图纸→镜头平移漫游视频生成案例 1. 惊艳效果预览 Kandinsky-5.0-I2V-Lite-5s带来的建筑漫游视频生成效果令人印象深刻。想象一下，你有一张静态的建筑设计图纸，通过这个模型，只需简单描述…...
5步清理60GB重复视频：Krokiet视频查重工具全攻略
5步清理60GB重复视频：Krokiet视频查重工具全攻略 【免费下载链接】czkawka 一款跨平台的重复文件查找工具，可用于清理硬盘中的重复文件、相似图片、零字节文件等。它以高效、易用为特点，帮助用户释放存储空间。 项目地址: https://gitcode.…...
封神级C++设计：用3个成员实现可清空、可恢复、零开销的容器（颠覆传统思维）
封神级C设计：用3个成员实现可清空、可恢复、零开销的容器（颠覆传统思维） 文章目录封神级C\\设计：用3个成员实现可清空、可恢复、零开销的容器（颠覆传统思维）一、传统方案的“坑”：要么笨重&…...