Javascript 让DOM模板在VueJS 2.0中工作的确切要求是什么?
我尝试过用几种方法定义模板,但都失败了,出现了不同的错误。我在每个示例中都使用了一个rootJavascript 让DOM模板在VueJS 2.0中工作的确切要求是什么?,javascript,html,dom,vuejs2,Javascript,Html,Dom,Vuejs2,我尝试过用几种方法定义模板,但都失败了,出现了不同的错误。我在每个示例中都使用了一个root标记,正如控制台不断建议的那样。对于测试,它只是一个简单的: <div>hello it's me</div> 你好,是我 以下是我尝试过的: 脚本标记:组件模板需要根元素,而不仅仅是文本:您好,是我 <script type="text/x-template" id="my-template"> <div>hello it's me</di
标记,正如控制台不断建议的那样。对于测试,它只是一个简单的:
<div>hello it's me</div>
你好,是我
以下是我尝试过的:
- 脚本标记:组件模板需要根元素,而不仅仅是文本:您好,是我
<script type="text/x-template" id="my-template"> <div>hello it's me</div> </script>
<template id="my-template"> <div>hello it's me</div> </template>`
<script type="text/x-template"> <template id="my-template"> <div>hello it's me</div> </template> </script>
你好,是我
- 模板标记找不到元素:#我的模板
<script type="text/x-template" id="my-template"> <div>hello it's me</div> </script>
<template id="my-template"> <div>hello it's me</div> </template>`
<script type="text/x-template"> <template id="my-template"> <div>hello it's me</div> </template> </script>
你好,是我 `
- 带有模板标记的脚本:(没有控制台错误,但也不可见!)
你好,是我
- 带有模板(ID'ed)标记的脚本:找不到模板:#我的模板
<script type="text/x-template" id="my-template"> <div>hello it's me</div> </script>
<template id="my-template"> <div>hello it's me</div> </template>`
<script type="text/x-template"> <template id="my-template"> <div>hello it's me</div> </template> </script>
你好,是我
、
的开头、
的结尾或其他特定位置
谢谢 嘿,不要把你所有的js代码都写下来,但是vue应用程序有两个部分
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id='app'></div>
</body>
<script type="application/javascript">
new Vue({
el: '#app'
})
</script>
新Vue({
el:“#应用程序”
})
这会告诉vue创建实例并将其附加到dom
第二部分是向vue添加组件。使用webpack可以更好地执行此操作,但您可以像这样手动执行
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
</div>
<script>
foo = Vue.component('foo',{
template: '<div>I am a real component!</div>'
});
new Vue({
el: '#app',
template: '<div><foo></foo></div>',
components: [foo]
})
</script>
foo=Vue.component('foo'{
模板:“我是一个真正的组件!”
});
新Vue({
el:“#应用程序”,
模板:“”,
组成部分:[foo]
})
在项目符号列表和编号列表中,您必须将代码片段缩进8个空格,以使其正确显示在此处。感谢您的编辑,这是我发布后才意识到的!啊!好吧,也许我误解了它是如何与DOM上的模板ID引用一起使用的——它是否一定要使用webpack之类的东西来捆绑模板?没有办法通过标准HTML文件来实现吗?不过很奇怪,我学习webpack可能更有意义,因为我正在运行一个自定义节点应用程序,但我确信Vue可以识别普通HTML。如果你把它放在HTML文件中,我上面说的应该只运行,不需要webpack。如果您最终要做更复杂的事情,并且想要呈现上面提到的单个文件组件,那么Webpack就是其中之一。如果您这样做,我建议使用vue cli生成网页包模板。