VUE中template的三種寫(xiě)法
更新時(shí)間：2022年04月23日 14:36:09 作者：農(nóng)碼一生
這篇文章介紹了VUE中template的三種寫(xiě)法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、直接寫(xiě)在構(gòu)造器中
<!-- 第一種寫(xiě)法：直接寫(xiě)在構(gòu)造器里 -->
<div id ="app1"> </div>
<script>
var vm1 = new Vue({
el: '#app1',
data: {},
methods: {},
template:`<h3>在構(gòu)造器中的文字</h3>`
});
</script>二、寫(xiě)在HTML自帶的<template>標(biāo)簽中
<!-- 第二種寫(xiě)法：寫(xiě)在HTML自帶的標(biāo)簽里 -->
<div id ="app2">
<template id="item1">
<h3>Template標(biāo)簽的文字</h3>
</template>
</div>
<script>
var vm2 = new Vue({
el: '#app2',
data: {},
methods: {},
template:'#item1'
});
</script>三、寫(xiě)在<script>標(biāo)簽中
<!-- 第三種寫(xiě)法：寫(xiě)在script標(biāo)簽里 -->
<div id ="app3">
</div>
<script type="x-template" id="item3">
<h3>寫(xiě)在script的文字</h3>
</script>
<script>
let vm3 = new Vue({
el: '#app3',
data: {},
methods: {},
template:'#item3'
});
</script>到此這篇關(guān)于VUE中template寫(xiě)法的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue里面的el-select綁定默認(rèn)值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue的nextTick方法是用來(lái)在下次DOM更新周期中執(zhí)行回調(diào)函數(shù)的方法，用于DOM操作后獲取DOM更新后的狀態(tài)，使用場(chǎng)景包括異步更新DOM、獲取更新后元素的位置等情況，一般結(jié)合Vue的異步更新機(jī)制和watch監(jiān)聽(tīng)器使用，實(shí)現(xiàn)方式可使用Promise、setTimeout等異步方法2023-04-04
下面小編就為大家?guī)?lái)一篇Vue自定義事件(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要介紹了vue 中的 render 函數(shù)作用，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue通過(guò)過(guò)濾器實(shí)現(xiàn)數(shù)據(jù)格式化
這篇文章主要介紹了vue通過(guò)過(guò)濾器實(shí)現(xiàn)數(shù)據(jù)格式化的方法，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
vue項(xiàng)目打包部署后默認(rèn)路由不正確的解決方案
這篇文章主要介紹了vue項(xiàng)目打包部署后默認(rèn)路由不正確的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)時(shí)間軸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Vue.js@2.6.10更新內(nèi)置錯(cuò)誤處機(jī)制Fundebug同步支持相應(yīng)錯(cuò)誤監(jiān)控
這篇文章主要介紹了Vue.js@2.6.10更新內(nèi)置錯(cuò)誤處機(jī)制，F(xiàn)undebug同步支持相應(yīng)錯(cuò)誤監(jiān)控 ,需要的朋友可以參考下2019-05-05
vue項(xiàng)目使用axios發(fā)送請(qǐng)求讓ajax請(qǐng)求頭部攜帶cookie的方法
今天小編就為大家分享一篇vue項(xiàng)目使用axios發(fā)送請(qǐng)求讓ajax請(qǐng)求頭部攜帶cookie的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09