第一种(使用模板字符串)早期字符串拼接年代
<div id="app"></div>
new Vue({
el: "#app",
template: '<div> <h1>{{message}}</h1> <div>',
data: {
message: '字符串拼接'
}
})
第二种(使用script元素)HTML5标准之前的写法
<div id="app"></div>
<script type="text/x-template" id="tem">
<div>
<h1>{{message}}</h1>
</div>
</script>
new Vue({
el: "#app",
template: '#tem',
data: {
message: 'HTML5标准之前的写法,存在一定弊端(可自行google) 之后HTML5发布的template元素弥补了此方式的缺点'
}
})
第三种(使用template元素)HTML5标准之后的写法【第二种的升级版】
<div id="app"></div>
<template id="tem">
<div>
<h1>{{message}}</h1>
</div>
</template>
new Vue({
el: "#app",
template: '#tem',
data: {
message: 'HTML5中的template标签 ,注意: template是HTML5中的标签, 不是自定义标签, 也不是Vue中的组件 MDN-docs:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template '
}
})
原文地址:https://www.cnblogs.com/liu-di/p/11437553.html
时间: 2024-11-05 15:58:53