疑惑：vue 为什么只能有一个根元素

最新推荐文章于 2024-04-18 08:29:24 发布
最新推荐文章于 2024-04-18 08:29:24 发布
阅读量833 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40406929/article/details/119420596
版权

今天在学习vue时注意到一个问题：如下如所示 

有没有这个div标签，导致的不一致结果，第二行元素渲染不出来

 

 并且控制台报错

 经过思考发现是vue.2的问题：只能渲染一个根元素，至于原因，要从源码开始分析了

        vue2源码分析是因为query Selector选择器的第一个元素，以第一个元素为根标签切入口，开始渲染整个模版。

        详见原因：https://www.cnblogs.com/shababy/p/13517396.html

@司马懿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
给一个div innerhtml 后 没有内容显示的问题_Vue2.0 为什么只能有一个根节点
weixin_36480977的博客
01-27 955
前言：因为生活一些琐事，好久没有更新公众号文章了，打算从今天起慢慢拾起来。 众所周知，期待已久的Vue3.0已经发布了，更新了很多特性，其中有一条：支持多个子节点 fragment。那我们就来探讨下为什么2.0只能有一个根节点。 看了vue源码后，我的理解是我们在new Vue时候需要传入一个el(不传的话vue实例不知道该替换那个div),这个如果我们参数没有传入t...
详解vue为什么要求组件模板只能有一个根元素
12-12
我是在知乎上看到的这个问题，转念一想，用了大半年的vue，好像真的没有了解过： ‘为什么只能有且只有一个根元素’ 于是我花了二十多分钟去找了一下答案……竟然没有找到答案…. 好的现在我来说说我的理解，如果有不对的地方欢迎指出。 我觉得这个问题需要从两个方面来说起： 1.new Vue({el:’#app’}) 2.单文件组件中，template下的元素div 一、当我们实例化Vue的时候，填写一个el选项，来指定我们的SPA入口： let vm = new Vue({ el:'#app' }) 同时我们也会在body里面新增一个id为app的div <body> <div id='ap
vue2为什么只能有一个根节点，而vue3可以是多根节点
weixin_42178670的博客
11-19 2466
因为vdom是一个单根树形结构描述当前视图结构，patch方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也是会转换成vdom，所以也必须满足单根节点要求。
Vue2学习笔记，阿里 几轮面试
最新发布
m0_60635609的博客
04-18 962
引入VueVue监视数据的原理：1. vue会监视data中所有层次的数据。2. 如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据。(1).对象中后追加的属性，Vue默认不做响应式处理(2).如需给后添加的属性做响应式，请使用如下API：Vue.set(target，propertyName/index，value) 或3. 如何监测数组中的数据？
vue为什么要求组件模板只能有一个根元素
Leatitia的博客
08-02 6816
从两方面考虑： new Vue({el:’#app’}) 单文件组件中，template下的元素div 一、当我们实例化Vue的时候，填写一个el选项，来指定我们的SPA入口： var vm = new Vue({ el:'#app' }) 同时我们也会在body里面新增一个id为app的div <body> <div id='app'></div&...
vue-frag:ue Vue 2片段指令返回多个根元素
04-28
在Vue 2中使用返回多个根元素 < div> :left_arrow: This root element is unwrapped and removed on render! < li>Element 1 < li>Element 2 < li>Element 3 :backhand_index_pointing_right: 试用！ ...
门捷列夫：一个Vue.js元素周期表
02-06
门捷列夫Vue.js元素周期表构建设置# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and ...
Vue 中 template 有且只能一个 root的原因解析(源码分析)
10-15
在Vue中，每个组件的`template`必须且只能有一个根元素，这是为了保证模板结构的正确性和渲染的效率。下面我们将深入源码，探讨这一限制的原因以及Vue是如何处理这种情况的。 首先，Vue中的模板最终会被编译为`...
Vue实例为什么只能有一个根元素？
你若盛开，清风自来
06-04 1069
我们试图在template标签下写两个div， Vue提醒我们只能写一个元素 因为vue在给html元素更新内容时需要通过元素去查找每一个根元素都是一个实例的入口 vue初始化之后最终会得到一个vdom树， 而树结构必须要求只有一个root节点 树结构:数据结构的一种 虚拟dom就是用一个对象来描述dom节点 ...
Vue面试系列之七：为什么vue组件模板只有一个根元素？
jmsLU的博客
08-13 2733
对于这个问题，我们从以下三个方面来考虑： new Vue({el:'#app'}) 单文件组件中，template下的元素div。其实就是“树”状数据结构中的“根” diff算法要求的，源码中，patch.js里patchVnode() 首先，实例化Vue时： <body> <div id="app"></div> </body> <script> var app=new Vue({ el:"#app"
遇到的bug，vue的模版中只能有一个根节点
m0_52611940的博客
02-16 338
遇到一个bug，跳转可以进去，当返回router.back,页面空白，其他页面点击也是空白，发现路由没问题，那应该就是当前这个页面有问题， <template> <div> 1111 </div> //引入的组件 <About /> </template> 发现问题了吧 只能有一个最大的母元素div,然后我又把组件下载div外面，所以出现了问题。 因为vue的模版中只能有一个根节点 <template> <div&
vue错误 组件模板 只能有一个根节点
weixin_46907923的博客
04-01 269
报错原因： 组件模板 只能有一个根节点 报错代码： <div id="app"> <v-two></v-two> <!-- <v-one></v-one> --> </div> <script> // 实例化vue new Vue({ el:'#app', data:{},
vue为什么要求组件模板只能有一个根元素？
yu_yu_lll的博客
06-10 611
vue为什么要求组件模板只能有一个根元素？
Vue模板为什么必须是单根的？
热门推荐
nyasm的博客
02-05 1万+
Vue模板为什么必须是单根的？ 因为虚拟DOM节点树必须是单根的，而虚拟DOM树必须是单根的是因为diff算法比较的时候虚拟DOM树必须是单根的。
为什么Vue要求组件模板中只能由一个根元素
yyh231366的博客
04-23 1762
看这样一个代码 <div id="app"> <span>你好</span> </div> <div id="app"> <span>你好</span> </div> 这样的代码我们在html编译器中会被成功执行,其实我们知道这样写肯定也是不规范的. 我们再来看Vue是啥情况,Vue是这样的一个情况,例如 let app = new Vue({ el:'#app' }) 如果说,我们在V
辩题：为什么在vue组件开发中必须有根元素？
qq_43188181的博客
10-09 993
导言：最近在研究Vue设计，特发此博客在此分享我目前所研究到的并且得到验证的关于标题内容的笔记。 博客目的：1.分享经验，共同进步。2.得到指点，改进知识体系。 答：因为在Vue渲染时,渲染函数必须要依据根（顶层）元素以便创建整个vDOM树。甚至根元素可以是另一个组件(案例:vue-cli——app.vue)！ 拓展1：浅析Vue构建HTML Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接
Vue模板要求必须有一个根元素，怎么加根元素？
07-15
在Vue中，每个模板都需要有一个根元素。如果你的模板不包含一个根元素，你可以使用一个包裹元素来解决这个问题。下面有几种方法可以添加一个根元素： 1. 使用`<template>`标签：`<template>`标签是Vue中用于包裹多...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值