免责声明

易百易数码科技

为什么使用div(为什么使用div)

vue为什么必须包含div

Vue语法规定组件下只能有一个根元素,如果有template下有多个元素时,需要使用一个div包裹所有的元素。因此,如果有template下有多个元素时,需要使用一个div包裹了。如果没有div,则需要使用div包裹。

我们在初学Vue时,第一个上手的例子基本都是 new Vue({el:’#app’}),但是为什么Vue实例只能挂载在一个div上呢?同样的当我们开始写第一个Vue页面的时候,我们试图在template标签下写两个div,Vue提醒我们只能写一个元素,但是为什么只能有一个元素呢?很多时候我们都已经习以为常,但是却说不上来为什么。

为什么使用div(为什么使用div)-图1

  笔者入坑Vue也有一段时间了,对Vue也算了解,Vuex、Vue-Router也用了不少;但是前几天一看到这个面试问题却感觉一下子回答不上了,想来每次写代码也都是拿来就用,也没有仔细的思考过里面的原因;每每报错了就换一种写法,能用就行,仅此而已。

这个问题要从两个方面来说:

当我们实例化Vue的时候,填写一个el选项,来指定我们的SPA入口:  如果我们把代码改造一下,变成两个入口。

为什么使用div(为什么使用div)-图2

这时候会发现只有第一个div被渲染出来,而第二个div还是原封不动。我们简单来看一下Vue的源码是如何实现的可以看到挂载函数传了一个el参数,这个参数可以是string类型,也可以是一个element元素,也就是dom节点。最重要的是el = el && query(el)这一行代码,那就继续看一下query函数是做什么的:首先query函数判断是否是string类型,如果是string类型,就通过querySelector函数获取页面中的元素,但是querySelector仅仅返回匹配指定选择器的第一个元素,所以这就解释了为什么第二个div会原封不动。

  Vue其实并不知道哪一个才是我们的入口,因为对于一个入口来讲,这个入口就是一个Vue类,Vue需要把这个入口里面的所有东西拿来渲染、处理,最后再重新插入到dom中。如果同时设置了多个入口,那么vue就不知道哪一个才是这个类。

在Vue.js中,为什么需要包含一个 div 元素呢?实际上,Vue.js 并不要求必须使用 div 元素,你可以使用任何有效的 HTML 元素来包裹 Vue 的模板。

为什么使用div(为什么使用div)-图3

然而,在实践中,常常会使用 div 元素来包装 Vue 组件的模板。这是因为 Vue 组件通常会生成一个根元素,用于容纳组件内部的内容。这个根元素可以是任何有效的 HTML 元素,但为了遵循 HTML 规范并方便添加样式和布局,一般情况下会选择使用 div 元素。

另外,使用 div 元素也有助于保持模板的结构清晰,并且在编写 CSS 样式时更加方便。通过将组件的模板放置在一个 div 元素中,我们可以轻松地应用样式并对其进行布局。

总结起来,虽然 Vue.js 并不强制要求使用 div 元素,但在实际开发中,使用 div 元素来包装 Vue 组件的模板是一种常见且方便的做法。

到此,以上就是小编对于为什么使用div+css布局的问题就介绍到这了,希望介绍的1点解答对大家有用,有任何问题和不懂的,欢迎各位老师在评论区讨论,给我留言。

分享:
扫描分享到社交APP
上一篇
下一篇