当前位置: 首页 > news >正文

为什么template必须有且只能有一个div呢?

单文件组件
  当我们在vue-cli脚手架搭建的vue开发环境下使用单文件组件时,一般会这么写:

<template><div class="box">这里是页面内容</div>
</template>

如果我们尝试在template标签下写两个div,那么编辑器会提示我们***The template root requires exactly one element。***那这里为什么template下也必须有且只能有一个div呢?

这里我们要先看一看template这个标签,这个标签是HTML5出来的新标签,它有三个特性:

隐藏性:该标签不会显示在页面的任何地方,即便里面有多少内容,它永远都是隐藏的状态;
任意性:该标签可以写在页面的任何地方,甚至是head、body、sciprt标签内;
无效性:该标签里的任何HTML内容都是无效的,不会起任何作用;
但是我们可以通过innerHTML来获取到里面的内容。

知道了这个,我们再来看.vue的单文件组件。其实本质上,一个单文件组件会被各种各样的loader处理成为.js文件(因为当你import一个单文件组件并打印出来的时候,是一个vue实例),通过template的任意性我们知道,template包裹的HTML可以写在任何地方,那么对于一个.vue来讲,这个template里面的内容就是会被vue处理为虚拟dom并渲染的内容,导致结果又回到了开始 :既然一个.vue单文件组件是一个vue实例,那么这个实例的入口在哪里?

如果在template下有多个div,那么该如何指定这个vue实例的根入口?
为了让组件能够正常的生成一个vue实例,那么这个div会被自然的处理成程序的入口。

通过这个**‘根节点’,**来递归遍历整个vue‘树’下的所有节点,并处理为vdom,最后再渲染成真正的HTML,插入在正确的位置。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

Layui快速入门(2021.06.15)

第一步&#xff1a;下载layui文件 第二步&#xff1a;新建项目&#xff0c;导入下载的文件夹 第三步&#xff1a;参考文档开发 1.layui入门html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>la…...

客户端负载均衡Ribbon

文章目录Ribbon1&#xff09;、Ribbon模块2&#xff09;、RestTemplate结合Ribbon使用I、使用RestTemplateII、整合Ribbon3&#xff09;、负载均衡策略介绍4&#xff09;、自定义负载策略5&#xff09;、配置详情I、常用配置II、代码配置RibbonIII、配置文件方式配置Ribbon6&am…...

Mysql异常之Communications link failure

前天线上出现数据数据抖动&#xff0c;收到大量异常告警&#xff0c;都要疯了&#xff0c;数据库出现大量异常&#xff0c;肯定第一件事就是看下数据库监控数据&#xff0c;发现有一个从分片执行时间有一个50多秒的操作&#xff0c;这里肯定有问题了&#xff0c;第一时间找了db…...

Linux --- shell位置参数变量

一、位置参数变量 当我们执行一个shell脚本时 ,如果希望获取到命令行的参数信息&#xff0c;就可以使用到位置参数变量比如: /myshell.sh 100 200&#xff0c;这个就是一个执行shell的命令行 &#xff0c;可以在myshell脚本中获取到参数信息 基本语法&#xff1a; 1.$n (功能…...

储备未完待续

储备 如何精准熬一人份的粥 如何快速晾凉一碗粥 3M手套和钢铁侠 洗手盆三件套 三种门锁、两个门锁 制作书签的一种方法 摩托车和汽车的排气筒 变形金刚和巴巴爸爸 横向冲击和纵向冲击 我和图书馆 影响我的三本书 曲黎敏、亨利我们会追上你的、穷理查历书...

git知识点查阅

若自己在自己的电脑上修改了某一代码&#xff0c;而此时远程分支上对应的代码别人也做了修改&#xff0c;现在需要把远程分支的代码和自己本地的代码合并到本地电脑&#xff0c;操作&#xff1a; git stash git pull git stash pop...

Eclipse打开源码失败

解决&#xff1a;找不到源码&#xff0c;需要链接源码附件。...

如何成为一个成功的 Java 开发人员?

【此文章转自乐字节】 如果你是一名成功的Java程序员&#xff0c;那么在任何公司中的Java开发人员中&#xff0c;你都有机会获取一席之地。 前言 在当今时代&#xff0c;有很多编程语言可能会塑造我们的未来。然而&#xff0c;当我们开始学习编程时&#xff0c;我们总是从C语…...

代理和负载均衡的详细说明是什么

对客户端提供的代理服务&#xff0c;在客户端无法直接访问服务端的情况下&#xff0c;星池StarPool通过配置代理服务器的方式访问服务端。在整个过程中&#xff0c;客户端请求首先发送到代理服务器&#xff0c;代理服务器再将请求发送到服务端后将结果返回给客户端。从服务端角…...

2021年安全员-C证复审考试及安全员-C证模拟考试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全生产模拟考试一点通&#xff1a;安全员-C证复审考试参考答案及安全员-C证考试试题解析是安全生产模拟考试一点通题库老师及安全员-C证操作证已考过的学员汇总&#xff0c;相对有效帮助安全员-C证模拟考试题学员顺…...

pytest的mark标记用例功能

用例标记&#xff0c;便于我们更好归类测试用例 pytest.mark.skip跳过此用例:使用跳过装饰器标记它&#xff0c;可以传递一个可选的原因pytest.mark.xxx标记用例为xxx # 执行的时候执行webtest的用例。pytest -v -m xxx # 执行的时候不执行webtest的用例。pytest -v -m not xx…...

使用DNSObserver检测DNS安全漏洞

关于DNSObserver DNSObserver是个功能强大的DNS服务&#xff0c;该工具使用Go语言开发&#xff0c;可以帮助广大研究人员轻松检测各种类型的盲注漏洞。它可以监控渗透测试人员所搭建服务器的带外DNS交互信息&#xff0c;并通过Slack发送查询通知。DNSObserver可以帮助我们寻找的…...

Zookeeper源码查看: 七. 客户端启动源码

客户端启动源码 查看启动脚本 查看 zkCli.sh, 在 zkCli.sh 启动 Zookeeper 时, 会调用 ZooKeeperMain.java 创建 ZookeeperAdmin 查看启动类 ZookeeperMain 查看 ZookeeperMain 构造方法 查看 connectToZK() 方法 初始化监听器 查看 ZookeeperAdmin 类 解析连接地址…...

数组--Leetcode 27. 移除元素

1、题目 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出…...

计组第五章:中央处理器

文章目录CPU的功能和基本结构1.运算器的基本结构①专用数据通路方式②CPU内部单总线方式2.控制器的基本结构小结CPU的功能和基本结构 1.运算器的基本结构 ①专用数据通路方式 AX、BX……这些就和图里的R0、R1……对应 三态门每一路都接上&#xff08;一端接输出一端接输入&am…...

整理了 34 个 Python 自动化办公库

本次内容涵盖了Excel、Word、PPT、ODF、PDF、邮件、微信、文件处理等所有能在办公场景实现自动化的库,希望能够对大家有所帮助。 Python Excel自动化库 // 1.xlwings 库 官网: https://www.xlwings.org/ 特点:xlwings 是开源且免费的,预装了 Anaconda 和 WinPython,可…...

【Jenkins插件】之Multiple SCMs

在Jenkins配置中&#xff0c;有的时候我们需要依次拉取多个代码仓库&#xff0c;有时候还会需要既拉取svn代码库&#xff0c;又拉取git代码库&#xff0c;但Jenkins默认的配置是不支持这样操作的。因此&#xff0c;我们需要使用到Jenkins的Multiple SCMs插件。 Multiple SCMs这…...

Vue子组件调用父组件的方法

转载至:https://blog.csdn.net/zgrkaka/article/details/100528714 PS:需要说明的一点是关于this.$parent的时候使用方式,我之前一直以为只要父组件里定义了比如下面这样的情况: components:{childNode } 然后在子组件里面就可以直接通过this.$parent获取到父组件的属性和方…...

为什么自己干了这么多活,最后功劳都是别人的?

【本文只针对IT行业技术岗】 一、粉丝留言 自己每天加班到10点&#xff0c;有时候都到凌晨&#xff0c;周6基本全勤&#xff0c;公司项目忙的时候周日还去加班&#xff0c; 做过的项目无数&#xff0c;很多项目都给公司带来了丰厚的利润。 年底年终奖比别人少了一个月&…...

解读涉密资质新旧标准承接范围的变化

涉密信息系统集成资质认证证书是非常具有含金量的&#xff0c;自今年3月开始&#xff0c;涉密信息系统集成资质新标准就正式施行了&#xff0c;涉及到承接范围的改变的内容&#xff0c;是大家十分关注的内容&#xff0c;今天武汉好地科技小编就来给大家分享一下涉密信息系统集成…...

数据结构---二叉线索树

数据结构—二叉线索树 原理&#xff1a;参考趣学数据结构 代码&#xff1a; #include<stdio.h> #include<stdlib.h> typedef struct bmTree {int data;struct bmTree* lchild, *rchild;int ltag, rtag; }bmTree; bmTree * preNULL;//中序遍历的前驱指针 void cr…...

使用RAK7268网关与RAK3172节点连接至TTN最新的服务器TTS上

一、背景 当需要连接网关到TTN的时候我们突然发现&#xff1a;在TTN V2版本上已经无法创建新的网关了。另外&#xff0c;V2版本对于当前已创建的网关支持在今年年底也要失效了。所以&#xff0c;我们需要了解如何将网关连接到TTN最新的服务器TTS上。 二、目的 本文将会使用到RA…...

Xshell无法连接,centos7 network.service 网络服务无法启动或启动自动关闭

在虚拟中下载安装mysql之后&#xff0c;对NetworkManager进行操作&#xff0c;导致与Network服务可能起了冲突&#xff0c;使得导致network.service启动自动关闭&#xff0c;Xshell对虚拟机无法进行链接。 需要对NetworkManager进行调整 # 停止 NetworkManager 系统服务 syste…...

求一款能够批量采集新浪微博相册图片的软件,适合电脑小白使用

新浪微博是我们生活中非常常见的一款社交软件&#xff0c;我们常常会在这上面获取到很多当下热门的信息&#xff0c;大家还会在上面分享自己的日常&#xff0c;很多明星都会使用的一个平台&#xff0c;那如果我们想要下载保存某一个喜欢的博主、明星的相册图片&#xff0c;要怎…...

【JS011】ES6的学习笔记之原始数据类型Symbol

日期&#xff1a;2021年8月23日 作者&#xff1a;Commas 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xff0c;还望各位大佬不吝赐教&#xff0c;谢谢^ - ^ (ง •_•)ง 积跬…...

VMware 仅主机模式虚拟机无法 ping 通物理机的问题

前言 最近做了另外一个项目&#xff0c;用的数据库软件版本比较新&#xff0c;我本机装的旧的&#xff0c;因版本原因无法还原数据库&#xff0c;考虑到以最快速度部署开发环境&#xff0c;决定在虚拟机里安装新版数据库软件&#xff0c;使用 VMware 网络类型的仅主机模式&…...

Seurat学习:如何将自定义的聚类标签添加到Seurat对象当中

假如要添加k-means聚类标签&#xff1a; objectmeta.data$k.means.clusters <- k.means.result 绘制自定义标签的UMAP图&#xff1a; DimPlot(object , reduction‘umap’,group.by “k.means.clusters”) 同时显示自定义标签和UMAP图和Seurat中louvain聚类的UMAP图 plot…...

Spring框架的入门知识点

一、概念 1.一款轻量级的JAVAEE解决方案&#xff0c;众多优秀设计模式的组合&#xff1b; 2.作用&#xff08;目的&#xff09;&#xff1a;解耦合&#xff0c;目的是为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题。 3. Spring 的核心思想是&#xff1a; IOC:控制…...

【数据库系统概论(王珊)】第4章——数据库安全性

1、安全性级别 TCSEC将系统划分为四组&#xff08;ABCD&#xff09;七个等级&#xff0c;依次是D、C1、C2、B1、B2、B3、A1。 D级&#xff1a;是最低级别。将一切不符合更高标准的系统均归于D组。如DOS实操作系统中安全标准为D级的典型例子。 C1级&#xff1a;非…...

一句话让spring-boot帮我开启浏览器参数内容协商策略

一句话&#xff1a; 背后的原理&#xff1a; 当我们开启参数协商以后在RequestResponseBodyMethodProcessor里 有个方法 有个writeWithMessageConverter 这里包含消息的读和写操作 进入查看发现&#xff1a; 里面有个获取request的可以接受的类型 继续进入 调用了一个内容协…...

dbc2000 注册机|dbc2000 注册码注册机下载

点击下载来源&#xff1a;dbc2000 注册机 dbc2000 注册机是同名源程序软件的注册机软件&#xff0c;该源程序软件是一款应用于数据库搭建以及数据写入的数据库架设工具&#xff0c;它拥有强大的数据写入功能&#xff0c;在作为应用程序使用时&#xff0c;它不仅可以充当数据属性…...

秋招面经第八弹:网易二面-数据开发工程师

秋招第八弹&#xff1a;网易二面-数据开发工程师 写在最前&#xff1a;秋招以来一直在冲&#xff0c;因为事情比较多&#xff0c;对于笔试面试一直没有复盘&#xff0c;现在靠仅存的记忆把面试的一些问题记录下来&#xff0c;尽可能记录出能回忆到的问题&#xff0c;但可能记的…...

安卓课程格子APP

https://download.csdn.net/download/weixin_57836618/73810452 功能演示&#xff1a; 查看所有课程 点击主页面空白处即可添加课程 添加课程之后查看课程 查看双周课程 查看单周课程 6.查看课程详情...

强化学习——格子世界

强化学习——格子世界 项目源码地址&#xff1a;https://gitee.com/infiniteStars/machine-learning-experiment 1. 实验内容 2. 实验代码 import numpy as np import matplotlib.pyplot as plt from matplotlib.table import Table from xml.dom.minidom import Document #手…...

华为机试 - 跳格子游戏

目录 题目描述 输入描述 输出描述 用例 题目解析 算法源码 题目描述 地上共有N个格子&#xff0c;你需要跳完地上所有的格子&#xff0c;但是格子间是有强依赖关系的&#xff0c;跳完前一个格子后&#xff0c;后续的格子才会被开启&#xff0c;格子间的依赖关系由多组st…...

php 爬课程表信息,Ruby爬取教务系统生成课程表

我为什么要虐自己最近觉得课程格子广告越来越多&#xff0c;乱七八糟的东西越来越多&#xff0c;完全失去了一开始的存在价值&#xff0c;并且没有电脑端app&#xff0c;想查看课程必须拿出手机&#xff0c;而我使用电脑频率要比手机高&#xff0c;所以才有了折腾的动力。于是我…...

android 课程表 ui,UICollectionViewLayout实现课程表布局

因为项目中有课程表的相关模块&#xff0c;第一时间想到用UICollectionView。然而后期的需求越来越复杂&#xff0c;每个格子需要展示的内容越来越多&#xff0c;所以不得不寻找合适的解决方案。最后发现自定义UICollectionViewLayout可以实现我的需求。先放效果图&#xff1a;…...

Android自定义View课程表,Android 自定义View课程表表格

自己闲下来时间写的一个课表控件使用的自定义LinearLayout 里面View都是用代码实现的 最终效果如下图 写的可能有问题希望多多指点创建一个自定义LinearLayout 控件用来装载课程的信息和课程的周数 和节数大概的布局三这样的根据上面的看来觉得总体布局我分了两个 上面的星期是…...

java课程设计设计_java课程设计

1. 团队课程设计博客链接https://www.cnblogs.com/choco1ate/p/12172223.html2.本组课题及本人任务本组课题&#xff1a;泡泡堂(炸弹人)游戏本人任务&#xff1a;Box类(游戏地图中的每个方格)Bomb类(游戏过程中的)游戏玩家输赢信息的文件储存3.需求分析Box类&#xff1a;该类为…...

《课程格子》的一个笔试题目

题目如下&#xff0c;感觉很适合喜欢琢磨的程序员&#xff0c;也是考验你编码风格的时候。 Lets make a tower defense game&#xff08;塔防游戏):1. You have 1 tower, with H health and D dps(damage per second).2. There are n attackers, each with h_i health and d_i …...

Android仿照超级课程表 or 课程格子 一键提取课表功能(方正系统)

参考文章http://blog.csdn.net/sbsujjbcy ,本文仿照‘ 安卓弟 提供的android 项目实战——打造超级课程表一键提取课表功能文章&#xff0c;对他的代码进行了修改和补充&#xff0c;为什么要修改呢&#xff1f;原因是安卓弟的那个源码版本过于老旧&#xff0c;很多方法已经过…...

qt 顺序播放媒体声音

QObject::connect(myPlayer,&QMediaPlayer::stateChanged,sltStateChanged); #include <QCoreApplication> #include <QFileInfo> #include <QMediaPlayer>QMediaPlayer *myPlayer; QList<QString> m_lstMediaFile;void playMedia() {if(m_lstM...

linux系统么播放音乐,在linux环境下播放MP3

在linux环境下播放MP31:解压的顺序 (1)zlib-1[1].1.4.tar.tar (2)libid3tag-0.5.1b.tar.gz (3)libmad-0.15.1b.tar.gz (4)madplay-0[1].15.2b.tar.gz(不用make install) 注意&#xff1a;之后将音乐(She.mp3放到madplay的文件下面) 2:安装的步骤(每个的安装步骤都一样&#xff…...

php 音频顺序播放,MP3播放器音频文件不按顺序播放的解决方法,简单实用

MP3播放器对于现在的我们来说很多已经是过去了&#xff0c;但是我们总会有用到它的时候&#xff1a;当你听一些录音课程或者评书故事&#xff0c;亦或者使用迷你音响播放歌曲时常会发现拷贝进MP3播放器中的音频文件根本不按照你自己的想象进行播放。对于使用那些没有显示屏播放…...

使用计算机音箱进行音乐播放的过程,插卡音箱音乐播放顺序调整及歌单式1

插卡音箱音乐播放顺序调整及歌单式插卡音箱音乐播放顺序是根据从电脑复制(拷贝)至优盘或 TF 卡的 先后顺序&#xff0c;先复制出来的先播放&#xff0c;后复制出来的后播放。这个播放顺序与 电脑上的顺序形式(按名称、大小、类型、修改日期)均不一样。那么怎 样清楚它的播放顺序…...

MP3中设置播放顺序的软件《闪存式MP3伴侣》

给姥爷买了一个插卡音箱&#xff0c;里面拷贝了几百段评书&#xff0c;每一段评书都是一个mp3文件&#xff0c;虽然插卡音箱会自动一个文件一个文件自动播放&#xff0c;可是比较郁闷的是评书的播放顺序完全是乱的&#xff0c;毫无规律可寻&#xff0c;本来我的mp3文件的文件名…...

HTML5 如何实现播放多个MP3音频

方法一&#xff1a;audio标签 <audio>标签是HTML5中的新标签&#xff0c;定义声音用于嵌入音频内容&#xff0c;比如音乐或其他音频流。用的比较多音频格式是.mp3。 <audio>标签常用属性如下表 属性值描述autoplayautoplay添加该属性后&#xff0c;音频会自动播…...

如何让歌曲顺序播放html中,怎样让你内存卡里歌曲按照自己顺序播放.doc

怎样让你内存卡里歌曲按照自己顺序播放怎样让你内存卡里的歌曲按照自己顺序播放好多朋友开始晨练携带移动插卡音箱听戏曲和歌曲&#xff0c;还有朋友用插卡音箱作为广场舞蹈的伴奏设备&#xff01;可是好多朋友发现不管是加序号也好&#xff0c; 还是按照序号复制到内存卡也好。…...

html如何播放多个mp3,HTML5_audio_如何实现播放多个MP3音频

&lt不的期是范添事大部会基近说小间进围砖本的;audio>标签是HTML5中的新标签&#xff0c;定义声音用于嵌入音频内容&#xff0c;比如音乐或其他音频流。用的比较多音频格式支器事的后功发久这含层请间业在屏有随些气和域&#xff0c;实按控幻近持的前时来能过后些的处求…...

【代码】Python播放MP3音频文件

按推荐顺序排列 ①使用playsound库 from playsound import playsoundplaysound(xx.mp3)②使用pygame库 from pygame import mixer import timemixer.init() mixer.music.load(xx.mp3) mixer.music.play() time.sleep(5) mixer.music.stop()③使用mp3play库&#xff08;仅支…...