[vue] vue为什么要求组件模板只能有一个根元素？
生活随笔
收集整理的這篇文章主要介紹了
[vue] vue为什么要求组件模板只能有一个根元素？
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[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为什么要求组件模板只能有一个根元素？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学生信息管理系统优化问题汇总
- 下一篇： perl脚本 linux,linux –