Vue.js 使用了基于 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 解析器解析。

在我們越來越深入Vue時，我們會發現我們對HTML代碼的工程量會越來越少，今天我們來談談Vue下的 components模板的 初步使用方法與 應用

我們先來簡單的寫一段components代碼

(局部方法創造模板)

<div ><haha></haha></div>/*這是最簡單常用的一種創造模板方法，局部方法創造模板要注意,局部模板 的作用范圍 只在 相對的vue對象 范圍內 比如 這個例子, <haha></haha>的范圍 只在 <div > </div>內因為 haha 掛載在 vm的components下 而 vm掛載的 對應節點是 id=app的 div上*/let vm = new Vue({el:"#app",data:{},components:{"haha":{template:"<div>哈哈哈<div>"}}});

(共有模板/全局模板)，全局模板 顧名思義 肯定是 放在哪里都能用

<div ><hehe></hehe></div>//這里使用Vue.component原型方法來創造Vue.component("hehe",template:"<div>呵呵呵<div>");let vm = new Vue({el:"#app",data:{},components:{//這里則不需要添加,因為 互不影響}});

其他方法：

<div ><xixi></xixi></div>let xixi={template:"<div>嘻嘻嘻<div>"}let vm = new Vue({el : "#app",data{},components:{xixi}});

(模板的繼承)，全局模板 顧名思義 肯定是 放在哪里都能用

/*我們來講個最簡單的 父親，兒子 ，孫子的 例子要注意以下幾點：1.先實例化對象vm2.造出parent模板,并掛載在 vm的 conponents 下3.造出 son 模板 并 掛載 在 父級 parent 的conponents下，并在 父級template屬性中 包裹住自己的 模板名標簽 ；同理 造出孫子標簽4.在HTML節點中添加 目標 根節點（節點的順序一定要書寫正確）*/<div ><parent></parent></div>//創建 孫子 模板let grendson = { template:"<div>孫子</div>"}//創建 兒子 模板let son= { template:"<son>兒子<grendson >孫子</grendson ></son>"components:{grendson }}//創建 父親 模板let parent = { template:"<div>父親<son></son></div>"components:{son}}//實例化vm對象let vm = new Vue({el:"#app",data:{},components:{parent}});

總結

以上所述是小編給大家介紹的Vue下的components模板使用及應用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！