[vue] 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='app'></div>
</body>这很好理解，就是为vue开启一个入口，那我们不妨来想想，如果我在body下这样<body><div id='app1'></div><div id='app2'></div>
</body>Vue其实并不知道哪一个才是我们的入口，因为对于一个入口来讲，这个入口就是一个‘Vue类’，Vue需要把这个入口里面的所有东西拿来渲染，处理，最后再重新插入到dom中。
如果同时设置了多个入口，那么vue就不知道哪一个才是这个‘类’。二、当我们在webpack搭建的vue开发环境下，使用单文件组件时，你可能会这样：<template><div class='component'></div>
</template>那这里为什么template下也必须有且只能有一个div呢？这里我们要先看一看template这个标签，这个标签是HTML5出来的新标签，它有三个特性：1.隐藏性：该标签不会显示在页面的任何地方，即便里面有多少内容，它永远都是隐藏的状态；2.任意性：该标签可以写在页面的任何地方，甚至是head、body、sciprt标签内；3.无效性：该标签里的任何HTML内容都是无效的，不会起任何作用；但是呢，你可以通过innerHTML来获取到里面的内容。知道了这个，我们再来看.vue的单文件组件。其实本质上，一个单文件组件，本质上（我认为）会被各种各样的loader处理成为.js文件（因为当你import一个单文件组件并打印出来的时候，是一个vue实例），通过template的任意性我们知道，template包裹的HTML可以写在任何地方，那么对于一个.vue来讲，这个template里面的内容就是会被vue处理为虚拟dom并渲染的内容，导致结果又回到了开始 ：既然一个.vue单文件组件是一个vue实例，那么这个实例的入口在哪里？如果在template下有多个div，那么该如何指定这个vue实例的根入口？
为了让组件能够正常的生成一个vue实例，那么这个div会被自然的处理成程序的入口。通过这个‘根节点’，来递归遍历整个vue‘树’下的所有节点，并处理为vdom，最后再渲染成真正的HTML，插入在正确的位置

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[vue] vue为什么要求组件模板只能有一个根元素？相关推荐

一个vue文件应该有的成分_详解vue为什么要求组件模板只能有一个根元素
我是在知乎上看到的这个问题,转念一想,用了大半年的vue,好像真的没有了解过: '为什么只能有且只有一个根元素' 于是我花了二十多分钟去找了一下答案......竟然没有找到答案.... 好的现在我来说 ...
vue为什么要求组件模板只能有一个根元素
查看全文 http://www.taodudu.cc/news/show-805357.html 相关文章: 微信小程序一定要用https的理由,小程序使用HTTPS链接分析微信小程序登录 getU ...
vue学习-v-if v-for优先级、data、key、diff算法、vue组件化、vue设计原则、组件模板只有一个根元素、MVC.MVP,MVVM
1:v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能? //在vue页面中同时使用v-for与v-if后,打印渲染函数. console.log(app.$optio ...
动态添加组件_使用vue.js的动态组件模板
最近刚做完建站工具,准备总结里面使用到的一些技巧,同时会做一版简化的放在 github上. 先来一篇翻译的文章,和我在项目中使用的动态组件思路一样,不过缺少了演化的过程,直接给出了最终的解决方案.这篇 ...
vue拖拽组件生成页面代码,vue可视化拖拽组件模板
怎么使用vuedraggable实现简单的拖拽,只拖拽一个内容(div) . 仔细观察发现,今日头条导航部分编辑效果,有以下几个效果1:点击编辑开启可以编辑的效果(也就是是否开启拖拽)2:拖拽前选中效 ...
vue可视化拖拽组件模板,vue自定义下拉框组件
怎样利用Vue动态生成form表单 . $formCreate参数rules 表单生成规则[inputRule,selectRule,...]options 初始化配置参数(详细见底部createOp ...
vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort
今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...
vue：单文件组件模板
注意点:组件定义完如果想要被外界引入,需要使用export default对外暴露,name属性规定组件的名字,一般和文件名一致. 详细介绍请参考尚硅谷Vue2.0+Vue3.0全套教程丨vuej ...
vue可视化拖拽组件模板,vue组件拖拽自定义界面
前端可视化开发平台哪个好用? ThingJS 基于 HTML5 和 WebGL 技术,可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备. ThingJS 为可视化应用提供了简单.丰富的功能 ...

[vue] vue为什么要求组件模板只能有一个根元素？

[vue] vue为什么要求组件模板只能有一个根元素？

个人简介

主目录

[vue] vue为什么要求组件模板只能有一个根元素？相关推荐

最新文章

热门文章