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…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...
在rocky linux 9.5上在线安装 docker
前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理
引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...