文章詳情頁(yè)

vue中template的三種寫法示例

瀏覽：150日期：2022-11-15 17:34:16

第一種(字符串模板寫法):

直接寫在vue構(gòu)造器里,這種寫法比較直觀,適用于html代碼不多的場(chǎng)景,但是如果模板里html代碼太多,不便于維護(hù),不建議這么寫.

<!DOCTYPE html><html>  <head>  <link rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='stylesheet' type='text/css'> </head> <body> <div id='q-app'> </div>   <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js'></script> <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js'></script> <script> /* Example kicking off the UI. Obviously, adapt this to your specific needs. Assumes you have a <div id='q-app'></div> in your <body> above */ new Vue({ el: ’#q-app’, data: function () { return { version: Quasar.version } }, template: `<div class='q-ma-md'> Running Quasar v{{ version }}</div>` // ...etc }) </script> </body></html>

第二種:

直接寫在template標(biāo)簽里,這種寫法跟寫html很像。

<!DOCTYPE html><html>  <head>  <link rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='stylesheet' type='text/css'> </head> <body> <div id='q-app'> <template id=’template1’> <div class='q-ma-md'> Running Quasar v{{ version }} </div> </template> </div>   <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js'></script> <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js'></script> <script> /* Example kicking off the UI. Obviously, adapt this to your specific needs. Assumes you have a <div id='q-app'></div> in your <body> above */ new Vue({ el: ’#q-app’, data: function () { return { version: Quasar.version } }, template: ’#template1’ // ...etc }) </script> </body></html>

第三種:

寫在script標(biāo)簽里,這種寫法官方推薦,vue官方推薦script中type屬性加上'x-template',即:

<!DOCTYPE html><html>  <head>  <link rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='stylesheet' type='text/css'> </head> <body> <div id='q-app'></div><script type='x-template' id='template1'> <div class='q-ma-md'> Running Quasar v{{ version }} </div> </script>   <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js'></script> <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js'></script> <script> /* Example kicking off the UI. Obviously, adapt this to your specific needs. Assumes you have a <div id='q-app'></div> in your <body> above */ new Vue({ el: ’#q-app’, data: function () { return { version: Quasar.version } }, template: ’#template1’ // ...etc }) </script> </body></html>

以上就是vue中template的三種寫法示例的詳細(xì)內(nèi)容，更多關(guān)于vue template的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！

Vue

上一條：vue+springboot+element+vue-resource實(shí)現(xiàn)文件上傳教程下一條：Vue使用v-viewer實(shí)現(xiàn)圖片預(yù)覽

相關(guān)文章：

1. jsp文件下載功能實(shí)現(xiàn)代碼2. 新手學(xué)python應(yīng)該下哪個(gè)版本3. 詳細(xì)總結(jié)Java for循環(huán)的那些坑4. python 使用Tensorflow訓(xùn)練BP神經(jīng)網(wǎng)絡(luò)實(shí)現(xiàn)鳶尾花分類5. .net中string類型可以作為lock的鎖對(duì)象嗎6. Java進(jìn)行Appium自動(dòng)化測(cè)試的實(shí)現(xiàn)7. uni-app結(jié)合PHP實(shí)現(xiàn)單用戶登陸demo及解析8. python對(duì)批量WAV音頻進(jìn)行等長(zhǎng)分割的方法實(shí)現(xiàn)9. 如何利用Python matplotlib繪制雷達(dá)圖10. ajax實(shí)現(xiàn)頁(yè)面的局部加載

排行榜

					
					IntelliJ IDEA基于SpringBoot如何搭建SSM開發(fā)環(huán)境的步驟詳解
ajax實(shí)現(xiàn)頁(yè)面的局部加載
黑馬程序員-java基礎(chǔ)知識(shí)+環(huán)境搭建和變量配置
python對(duì)批量WAV音頻進(jìn)行等長(zhǎng)分割的方法實(shí)現(xiàn)
jsp文件下載功能實(shí)現(xiàn)代碼
docker 部署 Elasticsearch kibana及ik分詞器詳解
JAVA教程：解析Java的多線程機(jī)制(3)
原生JS利用transform實(shí)現(xiàn)banner的無(wú)限滾動(dòng)示例代碼
PHP安全-過(guò)濾輸入
php中PHPUnit框架實(shí)例用法
用PHP讀取和編寫XML DOM
				