Vue学习—Vue模板的写法

最新推荐文章于 2025-06-24 21:58:43 发布

我家小薇薇

最新推荐文章于 2025-06-24 21:58:43 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue学习—基础篇文章标签： Vue模板写法

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/qq_41581499/article/details/79898846

Vue学习—基础篇专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue.js中选项模板的三种不同实现方式：直接在选项中定义模板字符串、使用<template>标签以及借助<script>标签配合特定类型属性。通过具体的代码示例，展示了如何将这些模板应用到Vue实例中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选项模板：不需要外部构造器，直接渲染到作用域视图中，使用与比较少的内容量可以使用它，可以利用ES6模板字符串``的方式来实现，也可以直接用字符串即"<h1 style="color:red">我是选项模板</h1>"，这时template和data、el一样都是Vue实例的一个选项，所以叫做选项模板。
<body>
<h1>模板的写法—01</h1>
<div id="app">

</div>
<script>
var app = new Vue({
el: "#app",
data: {

},
template: `
<h1 style="color:red">我是选项模板</h1>
`
});
</script>
</body>
使用模板标签<template></template>来实现内容的填充,最终通过id或者其他的选择器挂载到template上面
<body>
<h1>模板的写法—02</h1>
<div id="app">

</div>
<template id="demoTpl">
<h1 style="color:green;">我是template模板标签</h1>
</template>
<script>
var app = new Vue({
el: "#app",
data: {

},
template: "#demoTpl"
});
</script>
</body>
使用x-template，script标签需要添加text/x-template类型作为标记，并且在在Vue实例中通过id来引用。
<body>
<h1>模板的写法—03</h1>
<div id="app"> </div>
<script type="text/x-template" id="demoXtpl">
<h1 style="color:yellow;">我是script标签模板</h1>
</script>
<script>
var app = new Vue({
el: "#app",
data: {

},
template: "#demoXtpl"
});
</script>
</body>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。