坑提示："The template root requires exactly one element"

　　　　Src下面有个App.vue文件，在index里引用了这个文件以后，我在.vue文件里添加了html，但是加完一个div以后，再加div就没效果了，百思不得其解。

　　　　

　　　　如图：

　　　　

　　　　div1能显示，但是div2死活不出来。知道今天我看见了一句提示：

　　　　

　　　  这句话的意思是模板只能有一个根节点！就是说.vue文件里，要有一个根节点div，里面再去包含1和2，就可以了。

　　　　

　　　　“试试效果”这个div和之前写的一个div被我放到一个根div里，然后页面就显示出来了。

　　　　这块vue之所以这样设计，应该是出于vue的特性，每个template都有一个单独的id，同时里面对应一个单独的、唯一的、根级别的div

　　　　

vue填坑指南之模板的使用的更多相关文章

  1. Kubernetes Fluentd＋Elasticsearch＋Kibana统一日志管理平台搭建的填坑指南

    在初步完成Kubernetes集群架构的建立后,通过搭建一些监控组件,我们已经能够实现 图形化的监控每个node,pod的状态信息和资源情况 通过scale进行replicateSet的扩展和伸缩 通 ...

  2. Flutter 开发填坑指南

    引言 第一次在使用Flutter是在Ubuntu机器上,但是因为Android Studio还有Sdk配置问题,flutter doctor总是在这一步报错...最近又在win10上配了一下环境(真香 ...

  3. Hive 填坑指南

    Hive 填坑指南 目录 Hive 填坑指南 数据表备份 数据表备份 方法1:create table 表名_new as select * from 原表 create table 表名_new a ...

  4. Vue填坑(1)----通过vue-cli，认识vue-router

    开始 首先,确保之前已经安装过 npm 和 nodejs(为了避免版本的问题,最好使用较新的版本). 全局安装 vue-cli : npm install -g vue-cli 新建文件夹 my-pr ...

  5. 微信支付中分账功能 填坑指南V1

    公司是做电商的,近期开发了一款小程序,准备线上线下同步销售玩具.这里就涉及到微信支付的功能,网上有很多教程,官方也有文档和Demo,因此微信支付还是比较容易实现的. 由于我们公司是和其他公司合作运营的 ...

  6. Hexo博客skapp主题部署填坑指南

    相信大家都很喜欢 hexo skapp 的主题,由于作者采用结巴分词,加上需要依赖各种各样的环境 所以可能大家踩过很多坑,也许每个人踩得坑不一样,这里使用 Docker 容器 centos 来部署, ...

  7. Python 装饰器填坑指南 | 最常见的报错信息、原因和解决方案

    本文为霍格沃兹测试学院学员学习笔记. Python 装饰器简介 装饰器(Decorator)是 Python 非常实用的一个语法糖功能.装饰器本质是一种返回值也是函数的函数,可以称之为“函数的函数”. ...

  8. Windows10系统下Hadoop和Hive开发环境搭建填坑指南

    前提 笔者目前需要搭建数据平台,发现了Windows系统下,Hadoop和Hive等组件的安装和运行存在大量的坑,而本着有坑必填的目标,笔者还是花了几个晚上的下班时候在多个互联网参考资料的帮助下完成了 ...

  9. 首个threejs项目-前端填坑指南

    第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水好深,满满的都是坑,填都填不过来.经过老板20天惨无人道的摧残,终于小有成就. 因为第一次搞 ...

随机推荐

  1. PERL学习笔记---正则表达式的应用

    使用m//匹配 //这是m//(模式匹配)的一种简写.同qw//操作一样,可以使用任何成对的分隔符.因此,可以使用m(fred), m<fred>, m{fred}, m[fred],或者 ...

  2. Swagger如何访问Ocelot中带权限验证的API

    先亮源代码:https://github.com/axzxs2001/Asp.NetCoreExperiment/tree/master/Asp.NetCoreExperiment/SwaggerDe ...

  3. js实现二分查找算法

    二分查找:是一种搜索某个值的索引的算法. 基本条件:有序的数组. 思路:1.将数组折半,分成左右两个数组. 2.判断要查找的数和中间位置数值的大小,来判断要查找的数实在哪一半. 3.之后继续折半查找, ...

  4. 在嵌入式设备中使用 JavaScript 的前景

    by Conmajia PC上的JavaScript已经发展到ECMAScript 6(ES6),马上ES10都快出来了(虽然还是草案),但是硬件上的JS却很少听说.这几年手持设备/可穿戴设备的发展非 ...

  5. c#中缓存的使用

    缓存的使用: 缓存是分布式系统中的重要组件,主要解决高并发,大数据场景下,热点数据访问的性能问题.提供高性能的数据快速访问,提高数据的读取速度.因为服务器和应用客户端之间存在着流量的瓶颈,所以读取大容 ...

  6. PHP正则表达式二分法实现mysql盲注脚本

    $sUrl = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; $sPost = 'inject=Inject&injection='; $sCharset = 'AB ...

  7. Java开发笔记（序）章节目录

    现将本博客的Java学习文章整理成以下笔记目录,方便查阅. 第一章 初识JavaJava开发笔记(一)第一个Java程序Java开发笔记(二)Java工程的帝国区划Java开发笔记(三)Java帝国的 ...

  8. 如何在Linux服务器和windows系统之间上传与下载文件

    Do not let dream just be your dream. 背景:Linux服务器文件上传下载. XShell+Xftp安装包(解压即用)百度网盘链接:https://pan.baidu ...

  9. 使用curl制作简易百度搜索

    这几天研究了一下php中的curl类库,做了一个简单的百度搜索,先上代码 <div style="width:200px;height:100px;"> <div ...

  10. img transform:scale 放大在ios下变模糊

    /*img标签放大再缩小*/ img { width: 400%; transform: translate3d(-50%, -50%, 0) scale(0.25, 0.25); -webkit-t ...