vue中關(guān)于template報(bào)錯(cuò)等問題的解決
template報(bào)錯(cuò)
寫這個(gè)純粹是為了紀(jì)念有多蠢
template:` <div class='app'> ?? ?<button ref = 'btn'>我是按鈕1</button> ?? ?<subCom ref = 'subc'></subCom> </div> ?? ?`,
關(guān)于template里面寫的HTML，經(jīng)歷了報(bào)錯(cuò)，控制臺(tái)反映字符串不齊，語(yǔ)法錯(cuò)誤等一系列問題后，查遍了各種博客，在查看別的框架的源碼后，才發(fā)現(xiàn)語(yǔ)法沒有問題，js導(dǎo)入沒有問題，有問題的是
template里面，用的是``
就是數(shù)字1旁邊的`，不是單引號(hào)?。?！
就這個(gè)我嘗試查詢了一個(gè)多小時(shí)的bug。。。
vue報(bào)錯(cuò)問題
The template root requires exactly one element
這段話的意思是：根模板必須有一個(gè)準(zhǔn)確的元素。
在vue組件中會(huì)使用template標(biāo)簽，在template中，還需要一個(gè)標(biāo)簽元素將其他標(biāo)簽元素包裹起來，因?yàn)閠emplate標(biāo)簽是不會(huì)被DOM解析，生成DOM元素的時(shí)候會(huì)被隱藏，而組件又必須只能有一個(gè)根節(jié)點(diǎn)。
//helloWorld.vue //正確寫法 <template> ?? ?<div> ?? ??? ?<h1>我是h1</h1> ?? ??? ?<h1>我是h1</h1> ?? ??? ?<h1>我是helloWorld</h1> ?? ?</div> </template> //錯(cuò)誤寫法,會(huì)報(bào)錯(cuò)。 <template> ?? ?<h1>我是h1</h1> ?? ?<h1>我是h1</h1> ?? ?<h1>我是helloWorld</h1> </template>
這種最外層標(biāo)簽元素只能有一個(gè)的方式跟React中的組件用法一致。
React中render函數(shù)return組件的時(shí)候，最外層也必須只能有一個(gè)標(biāo)簽元素，將其他標(biāo)簽嚴(yán)肅包裹起來，否則會(huì)報(bào)錯(cuò)。
//helloWorld.jsx
render(){
?? ?return(
?? ??? ?<div>
?? ??? ??? ?<h1>我是h1</h1>
?? ??? ??? ?<h1>我是h1</h1>
?? ??? ??? ?<h1>我是helloWorld</h1>
?? ? ??? ?</div>
?? ?)
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue中引入stylus及報(bào)錯(cuò)解決方法
這篇文章主要介紹了詳解vue中引入stylus及報(bào)錯(cuò)解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
本篇文章主要介紹了vue 2.0封裝model組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
解決vue加scoped后就無(wú)法修改vant的UI組件的樣式問題
這篇文章主要介紹了解決vue加scoped后就無(wú)法修改vant的UI組件的樣式問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣
這篇文章主要為大家詳細(xì)介紹了Vue如何利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作
這篇文章主要介紹了vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示功能代碼詳解
這篇文章主要介紹了Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示,本文給大家分享一段簡(jiǎn)短的代碼通過效果圖展示給大家介紹的非常明白，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue兩個(gè)組件間值的傳遞或修改的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼
這篇文章主要介紹了element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue2路由中router-view不顯示的原因及踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文件上傳讀取及下載功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09