<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<temp></temp>
</div>
<template id="cpnc">
<div> <!--这行-->
<h1>{
{ok}}</h1>
<h1>ZTY</h1>
</div> <!--到这行-->
</template>
<script src="../../js/vue.js"></script>
<script>
const temp={
template: '#cpnc',
data: function () {
return {
ok: "nihao"
}
}
}
const app = new Vue({
el: '#app',
components:{
temp
}
})
</script>
</body>
</html>代码的正确的运行结果如图
关键在于要将模板放入<div></div>中，即
<template>
<div>
。。内容.。。。
</div>
</template>
错误案例：
<template id="cpnc">
<h1>{
{ok}}</h1>
<h1>ZTY</h1>
</template>