Question

我刚开始学习vue.js

我不知道为什么但是双花括号语法不能渲染，但是当我使用v-text指令时，它确实有效。这是我的代码：

HTML：

<!DOCTYPE html>
<html>
  <head>
    {% include '_depend.html' %}

    <title></title>
  </head>
  <body>

    {% if signed_in %}
      {% include 'nav-signed-in.html' %}
    {% else %}
      {% include 'nav-signed-out.html' %}
    {% endif %}

    <!--  -->

    <div id="welcome-vue" class="container container-top-space">
      <div class="row">
        <div class="col s12">
          <div class="card-panel">
            <p class="text-center">{{ header_msg }}</p>
          </div>
        </div>
      </div>
    </div>


    <script src="/vault/js/vue.min.js"></script>
    <script src="/vault/js/vues/welcome-ctrl.js"></script>

    <!--  -->

    {% include 'footer.html' %}

    {% include '_events.html' %}

  </body>
</html>

JS：

const welcomeVue = new Vue({
  el: '#welcome-vue',
  data: {
    header_msg: 'sample message'
  }
});

为什么赢得双花括号？控制台中没有错误，当我记录Vue实例时，一切都在那里，包括$ el属性。

Answer 1

您与树枝模板存在冲突

{% verbatim %}
    new Vue({
        el: '.container',
        data: {
            foo: 'Hello world.'
        }
    });
{% endverbatim %}

像这样使用Vue实例。 Conflict on Template of Twig and Vue.js您可以在此帖中找到有关您的问题的更多信息。

Vue.js - 双花括号（Moustache）语法无法工作/渲染到页面

1 个答案: