用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成
在vue.js定義模板時(shí)，可以定義多個(gè)模板，然后在components組件中調(diào)用模板，顯示在界面上，注意components后面是一個(gè)對(duì)象，而不是數(shù)組。下面利用實(shí)例說(shuō)明，操作如下：
第一步，在HBuilderX設(shè)計(jì)工具中，在指定的文件目錄下新建一個(gè)靜態(tài)頁(yè)面，并引入vue.js核心文件，如下圖所示：
第二步，在<body></body>標(biāo)簽內(nèi)，插入一個(gè)div標(biāo)簽，并設(shè)置對(duì)應(yīng)的ID屬性，如下圖所示：
第三步，接著在div標(biāo)簽中插入一個(gè)script標(biāo)簽，定義三個(gè)模板User、Student和Teacher，如下圖所示：
第四步，使用vue.js對(duì)象實(shí)例化，添加一個(gè)el掛載節(jié)點(diǎn)，再添加一個(gè)components，如下圖所示：
第五步，保存代碼并打開(kāi)瀏覽器控制臺(tái)，結(jié)果出現(xiàn)了報(bào)錯(cuò)，components后面不能是數(shù)組，如下圖所示：
第六步，返回到HBuilderX工具，修改components后面的對(duì)象，使用大括號(hào)，如下圖所示：
總結(jié)：以上就是關(guān)于用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成的全部知識(shí)點(diǎn)，感謝大家的閱讀和對(duì)腳本之家的支持。
相關(guān)文章
當(dāng)針對(duì)不同客戶(hù)需要提供不同的圖標(biāo)時(shí),頁(yè)面其他圖標(biāo)好替換,但是網(wǎng)頁(yè)圖標(biāo)就不太一樣了,下面這篇文章主要給大家介紹了關(guān)于vue中修改瀏覽器圖標(biāo)和名字的幾種方式,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了解決Vue watch里調(diào)用方法的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
VUE3子表格嵌套分頁(yè)查詢(xún)互相干擾的問(wèn)題解決方案
這篇文章主要介紹了VUE3子表格嵌套分頁(yè)查詢(xún)互相干擾的問(wèn)題解決方案,如果不需要做子表格的分頁(yè)查詢(xún)，那么可以直接在主表格中嵌套子表格，本文給大家介紹兩種方式，需要的朋友可以參考下2024-01-01
vue如何監(jiān)聽(tīng)某個(gè)元素的大小變化
這篇文章主要介紹了vue如何監(jiān)聽(tīng)某個(gè)元素的大小變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue.js表單驗(yàn)證插件(vee-validate)的使用教程詳解
這篇文章主要介紹了vue.js表單驗(yàn)證插件(vee-validate)的使用，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue項(xiàng)目部署自動(dòng)清除緩存方式,包括清除文件緩存，清除瀏覽器 localStorage 緩存方式，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue 中使用 CSS Modules優(yōu)雅方法,本文文字結(jié)合實(shí)例代碼的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-04-04
利用vue實(shí)現(xiàn)密碼輸入框/驗(yàn)證碼輸入框
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)密碼輸入框或驗(yàn)證碼輸入框的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-08-08
@change 是 Vue.js 中用于監(jiān)聽(tīng)表單元素值變化的事件處理器，這篇文章主要介紹了vue的@change的用法,需要的朋友可以參考下2023-10-10
緩存清除成為克服瀏覽器緩存中過(guò)時(shí)內(nèi)容挑戰(zhàn)的關(guān)鍵技術(shù),術(shù)語(yǔ)“緩存清除”是指故意使靜態(tài)資源失效或進(jìn)行版本控制,迫使瀏覽器在發(fā)生更改時(shí)獲取新資源,本文給大家介紹了Vue如何清除緩存,需要的朋友可以參考下2023-12-12