Javascript 使用模板字符串作为Vue模板

我正在学习Vue。据我所知，我应该能够使用一个简单的模板字符串作为Vue中的模板。但由于某些原因，Vue仅呈现第一个html标记

Vue.config.devtools=true；
让template=`Hi{{name}}{{age}`
const vm=新的Vue({
el:“#应用程序”，
数据（）{
返回{
姓名：'姓名'，
年龄:23,，
留言：“你好”
}
},
模板，
方法：{
问候（e）{
返回this.message=e.target.value
},
esc（e）{
e、 target.value=“”
}
}
})

---

Vue模板应该只有一个根节点。我想你应该在你的控制台里放一条警告信息

尝试：

let template=`Hi{{{name}{{{age}}`

有几个问题：

例如，必须有一个根节点，而不是两个

Vue的模板不同于JavaScript的模板文本。您使用了Vue的语法（

{{{name}}

），但使用的是JavaScript模板文本。您可能想要一个简单的字符串。（虽然如果需要，您当然可以使用未标记的模板文字，因为它们的计算结果是字符串。但这并不是说，

{{name}}

和此类占位符由Vue处理，

${name}

和这些占位符将由JavaScript模板本身处理。）

解决这些问题，似乎是可行的：

Vue.config.devtools=true；
让template=“Hi{{name}}{{age}”；
const vm=新的Vue({
el:“#应用程序”，
数据（）{
返回{
姓名：'姓名'，
年龄:23,，
留言：“你好”
}
},
模板，
方法：{
问候（e）{
返回this.message=e.target.value
},
esc（e）{
e、 target.value=“”
}
}
})

---

旁注：它是“模板”（或“模板文字”），而不是“模板字符串”。如果它是未标记的，则计算为字符串，但如果它与标记函数一起使用，则不一定如此。包括代码段在内的很好的代码！！仅供参考，Stack Snippets中的HTML窗格会自动放在

body

元素中，因此您不会在其中包含

HTML

、

head

或

body

。我已经更新了代码片段来修复这个问题。有关创建代码段的详细信息：

let template = `<div><h2>Hi {{name}}</h2><h1>{{age}}</h1></div>`