template下不可以有多个标签(template标签用法)

vue为什么只有一个实例——周分享

因为"树"状数据结构，肯定要有个"根"。

el 的指定是一个 id 为 app 的 div 元素，Vue 实例接管了对它的控制，减少了我们的 DOM 操作，需要被 vm 控制的元素全部加在它的内部。

指定 el 选项是给 Vue 实例指定一个 SPA 入口。

Vue 实例其实并不知道哪一个是入口，它应该接管哪一个部分，所以你要给它指定一个唯一的元素作为入口。每一个入口可以看作是一个 Vue 的类，Vue 要把这个入口进去的所有东西都取出来进行轮循渲染一遍，再把它重新挂载回页面中的 DOM 里面去。打给比方来说，一个 Vue 实例只拥有一个钥匙，一个钥匙只能开一把锁，但是页面上有很多把锁，如果你不说清楚它是哪把锁的钥匙，Vue 实例就不知道接下来要怎么做了。

当然，这只是一个比较浅显的理解。你可能会说，我指定几个入口让 Vue 实例去一个一个试就好了，我们往下看。

可以看到这里的DOM是一个树的结构，每个元素、文字、注释都是一个节点，虚拟 DOM 遵循的也是这样的一个树的数据结构。

我们的指定的 el 也就是整个 DOM 结构的根。只有通过指定了唯一的 el 根元素，Vue 实例才能在内部通过 createElement 方法生成一个对应的虚拟 DOM 结构映射真实的 DOM 元素进行操作渲染成真正的 HTML。

在基本的 HTML 结构中，顶级标签是 html/html，只能有一个这样的标签存在。对应到 Vue 中也是这样，如果你给它两个顶级标签，那么对应的 DOM 结构就无法生成了。

每个 .vue 文件都会是一个 Vue 的实例，而 template 标签中的内容就是 Vue 实例接管形成虚拟 DOM 的那部分内容。所以如果在 template 下有多个 div，那么虚拟 DOM 树就没办法生成了。因此template也只能有一个元素包裹 。

为什么vuejs里面定义的template里面定义的多个元素只显示一个

组件模板内还要一个元素包含你的代码于是修改一下就成了

div

h1/h1

div/div

/div

不能是用关键字delete，于是我临时修改了一个deleteFun

最后就代码就是

computed的问题，不能使用静态属性值

vuetemplate视图里可以写多个div容器吗

如果是vue1.0是允许这么写的，但是官方推荐在外面包一个父元素，到了vue2.0就是必须在外面包一个父元素了，不然检查过不去的，只能存在一个根节点。

vue3对比vue2

1.vue3中template支持多个根标签

2.main.js

3. setup （取代data methods） ref

4. v-model在组件中的运用

5.新组件 Teleport

虽然，但是

在用ant-design-vue搭的架子中，如果使用了多个根标签，跳转页面之后会出现白板，重新刷新页面之后才正常显示。（也不知道是哪的问题，就。。还是用一个根标签吧。

createApp( 组件 )与new Vue( {template,render} )

setup函数返回一个对象，这个对象中包含方法和数据，生命周期钩子函数也在setup中运行，取代的是vue2中的data，methods。

ref类型的数据，是一种响应式的数据,待续

vue2组件通信

vue3使用v-model组件通信

相当于子组件中的pVisible与父组件中的isVisible双向绑定了，比vue2传统方法简化很多。

Teleport

有两个div分别是box1和box2，据经验所知，即使box1的孩子el1的z-index为10，el1的层级也没有box2高，一些情况下el1也会被box2遮住（因为即使el1的层级再高，也是在box1的层级下生存），这时候就可以用teleport组件包住el1，使其脱离box1层级的掌控,to表示重新找的爸爸

//待更新。。。