快捷導(dǎo)航

淺析Vue下的components模板使用及應(yīng)用

更新時(shí)間：2019年11月27日 14:07:06 作者：程序猿的日常1

這篇文章主要介紹了Vue下的components模板的使用及應(yīng)用，本文通過代碼介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

在我們越來越深入Vue時(shí)，我們會發(fā)現(xiàn)我們對HTML代碼的工程量會越來越少，今天我們來談?wù)刅ue下的 components模板的初步使用方法與應(yīng)用

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

(局部方法創(chuàng)造模板)

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

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

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

其他方法：

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

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

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

總結(jié)

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

您可能感興趣的文章: