Question

我想用vue替换我的项目的第一块香草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 =＆＃34;容器＆＃34; 。

编辑：我使用生成的html并将其编辑到最低限度，以显示它不起作用。请参阅result。

Answer 1

用

包裹容器

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

它应该那样工作

Answer 2

这很好用，模板中的问题是你有两个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>

Answer 3

您有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>

如果此答案对您有所帮助，请考虑接受。

vue.js helloworld在现有的bootstrap站点内不起作用

3 个答案: