Vue.js-双花括号（Mustache）语法不起作用/无法呈现到页面

Question

i just started learning vue.js 我刚刚开始学习vue.js

i don't know why but the double curly braces syntax isn't rendering, but when i use the v-text directive, it does work. 我不知道为什么，但是双花括号语法没有显示，但是当我使用v-text指令时，它确实起作用。 here is my code: 这是我的代码：

html: 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: JS：

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

Why won't the double curly brace work? 为什么双花括号不起作用？ There are no errors in the console and when I log the Vue instance, everything is there, including the $el property. 控制台中没有错误，当我记录Vue实例时，所有内容都在其中，包括$ el属性。

Answer 1

You have conflict with twig template 您与树枝模板有冲突

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

use Vue instance like this. 这样使用Vue实例。 Conflict on Template of Twig and Vue.js You can find more about your question in this post. Twig和Vue.js的模板冲突您可以在本文中找到有关您的问题的更多信息。

Vue.js-双花括号（Mustache）语法不起作用/无法呈现到页面

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-03-06 17:06:56

Vue.js-双花括号（Mustache）语法不起作用/无法呈现到页面

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-03-06 17:06:56

解决方案1
3 已采纳 2018-03-06 17:06:56