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