vue中template的三種寫法示例
第一種(字符串模板寫法):
直接寫在vue構造器里,這種寫法比較直觀,適用于html代碼不多的場景,但是如果模板里html代碼太多,不便于維護,不建議這么寫.
<!DOCTYPE html><html> <!-- WARNING! Make sure that you match all Quasar related tags to the same version! (Below it’s '@1.7.4') --> <head> <!-- <link rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='stylesheet' type='text/css'> --> <link rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='stylesheet' type='text/css'> </head> <body> <div id='q-app'> </div> <!-- Add the following at the end of your body tag --> <!-- <script src='https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js'></script> --> <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/[email protected]'></script> <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/[email protected]'></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> <!-- WARNING! Make sure that you match all Quasar related tags to the same version! (Below it’s '@1.7.4') --> <head> <!-- <link rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='stylesheet' type='text/css'> --> <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> <!-- Add the following at the end of your body tag --> <!-- <script src='https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js'></script> --> <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/[email protected]'></script> <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/[email protected]'></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> <!-- WARNING! Make sure that you match all Quasar related tags to the same version! (Below it’s '@1.7.4') --> <head> <!-- <link rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='stylesheet' type='text/css'> --> <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> <!-- Add the following at the end of your body tag --> <!-- <script src='https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js'></script> --> <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/[email protected]'></script> <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/[email protected]'></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的資料請關注好吧啦網其它相關文章！
相關文章：
網公網安備