vue.js helloworld无法在现有的bootstrap站点中运行

gopyfrb3 于 2023-05-29 发布在 Vue.js

关注(0)|答案(3)|浏览(143)

我想用vue替换我项目的第一个vanilla JS。
我试着让hello world的例子工作。
它的工作原理如前所述，但是当我将元素嵌套在另一个元素中时（这些可能是错误的术语），它就不起作用了。
我的源代码：

<!-- this works -->
<div id="app">
  <p>${ message }</p>
</div>

<!-- but this doesn't for some reason -->
<div class="container">
    <div id="app">
    Nested ${ message }
    </div>
</div>

Full code example。
引导需要***class=“container”***。
编辑：我把生成的html和编辑到最低限度，以显示它不工作。参见result。

vue.js

来源：https://stackoverflow.com/questions/49090112/vue-js-helloworld-not-working-within-existing-bootstrap-site

3条答案

按热度按时间

bgtovc5b1#

将容器用

<div id="app"></div>

应该是这样的

赞(0）回复(0）举报 2023-05-29

iqjalb3h2#

这很好，你的模板中的问题是你有两个id=“app”的元素，所以vue示例是用第一个id=“app”的元素初始化的，然后第二个（嵌套的）永远不会初始化。

<html>
  <head>
    <script src="https://unpkg.com/vue"></script>
  </head>

  <body>
    <!-- but this doesn't for some reason -->
    <div class="container">
        <div id="app">
        Nested ${ message }
        </div>
    </div>

    <script>
      new Vue({
        delimiters:['${', '}'],
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      })
    </script>


  </body>

</html>

赞(0）回复(0）举报 2023-05-29

8i9zcol23#

你有2个#app id，但只有一个vue示例。如果你需要两个#app，你应该创建两个Vue示例。#app1的示例1和#app2的示例2。如果您需要在主题中进行交互，可以将主题保存在变量中：

<div id="app1">
          <p>${ message }</p>
        </div>
    
        <div class="container">
            <div id="app2">
                Nested ${ message }
            </div>
        </div>
    
        <script>
          var app1 = new Vue({
            delimiters:['${', '}'],
            el: '#app1',
            data: {
              message: 'Hello Vue.js!'
            }
          });

        var app2 = new Vue({
            delimiters:['${', '}'],
            el: '#app2',
            data: {
              message: 'Hello Vue.js!'
            }
          })
        </script>

赞(0）回复(0）举报 2023-05-29

我来回答

vue.js helloworld无法在现有的bootstrap站点中运行

3条答案

相关问题

热门标签

最新问答