文章詳情頁

vue中template的三種寫法示例

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

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

直接寫在vue構造器里,這種寫法比較直觀,適用于html代碼不多的場景,但是如果模板里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'> </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標簽里,這種寫法跟寫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標簽里,這種寫法官方推薦,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的三種寫法示例的詳細內容，更多關于vue template的資料請關注好吧啦網其它相關文章！

Vue

上一條：vue+springboot+element+vue-resource實現文件上傳教程下一條：Vue使用v-viewer實現圖片預覽

相關文章：

1. React+umi+typeScript創建項目的過程2. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執行過程解析3. SharePoint Server 2019新特性介紹4. ASP中常用的22個FSO文件操作函數整理5. 三個不常見的 HTML5 實用新特性簡介6. ASP調用WebService轉化成JSON數據，附json.min.asp7. .Net core 的熱插拔機制的深入探索及卸載問題求救指南8. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁9. 讀大數據量的XML文件的讀取問題10. 解決ASP中http狀態跳轉返回錯誤頁的問題

排行榜

					
					Python+logging輸出到屏幕將log日志寫入文件
淺談Django QuerySet對象(模型.objects)的常用方法
django實現模型字段動態choice的操作
Python如何讀寫CSV文件
Python使用jupyter notebook查看ipynb文件過程解析
用JavaScript實現簡單網頁時鐘
解決Python 進程池Pool中一些坑
IntelliJ IDEA調整字體大小的方法
docker容器調用yum報錯的解決辦法
使用UML編寫Java應用程序 (1)
ASP.NET Core 5.0中的Host.CreateDefaultBuilder執行過程解析
				