gpt4 book ai didi

javascript - 让 DOM 模板在 VueJS 2.0 中工作的确切要求是什么?

转载 作者:行者123 更新时间:2023-12-03 05:01:20 25 4
gpt4 key购买 nike

我尝试以多种方式定义我的模板,但它们都因不同的错误而失败。我使用了单根 <div>正如控制台不断建议的那样,在每个示例中添加标签。对于测试来说,这只是一个简单的:

<div>hello it's me</div>

这是我尝试过的:

  • 脚本标记:组件模板需要根元素,而不仅仅是文本:你好,是我

    <script type="text/x-template" id="my-template">
    <div>hello it's me</div>
    </script>
  • 模板标签找不到元素:#my-template

    <template id="my-template">
    <div>hello it's me</div>
    </template>`
  • 带有模板标签的脚本:(没有控制台错误,但也不可见!)

    <script type="text/x-template" id="my-template">
    <template>
    <div>hello it's me</div>
    </template>
    </script>
  • 带有模板(ID'ed)标签的脚本:找不到模板:#my-template

    <script type="text/x-template">
    <template id="my-template">
    <div>hello it's me</div>
    </template>
    </script>

使用 DOM 模板的正确方法是什么?另外,模板标签是否必须出现在 DOM 中 <head> ,从 <body> 开始, <body> 结束,或者其他特别的地方?

谢谢!

最佳答案

嘿,没有所有的 js 代码,但 vue 应用程序有两个部分。

  1. Vue 实例,它被安装到 dom 节点上。 id 出现在 html 中的某个 html 元素上
  2. 属于 vue 实例应用程序一部分的组件

例如,假设您有一个index.html文件,您可以通过这种方式挂载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 创建一个实例并将其附加到您的 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>

关于javascript - 让 DOM 模板在 VueJS 2.0 中工作的确切要求是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42215844/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com