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