vue中template的三种写法示例

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

vue中template的三种写法⽰例
第⼀种(字符串模板写法):
直接写在vue构造器⾥,这种写法⽐较直观,适⽤于html代码不多的场景,但是如果模板⾥html代码太多,不便于维护,不建议这么写.
<!DOCTYPE html>
<html>

<head>

<linkhref="https:///wp-content/uploads/2020/06/**********.4.css"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="stylesheet"type="text/css"> </head>
<body>
<div id="q-app">
</div>


<scriptsrc="https:///wp-content/uploads/2020/06/*******.0.js"></script>
<scriptsrc="https:///wp-content/uploads/2020/06/**************.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>

<linkhref="https:///wp-content/uploads/2020/06/**********.4.css"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"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>


<scriptsrc="https:///wp-content/uploads/2020/06/*******.0.js"></script>
<scriptsrc="https:///wp-content/uploads/2020/06/**************.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>

<linkhref="https:///wp-content/uploads/2020/06/**********.4.css"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"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>


<scriptsrc="https:///wp-content/uploads/2020/06/*******.0.js"></script>
<scriptsrc="https:///wp-content/uploads/2020/06/**************.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的资料请关注其它相关⽂章！。