javascript - Vue.js 2 组件不显示数据

Question

我正在尝试让一个简单的 vue 组件工作:

<div id="app">
  <my-component></my-component>
</div>

<script>
  Vue.component('my-component', {
    template: '<div>A custom component! {{ xstr }} aa</div>',
    data: function() {
      return {
        xstr: 'i really want this to be visible',
      };
    }
  });

  window.app = new Vue({
    el: '#app',
  });
</script>

但是显然没有显示xstr。我错过了什么？

Answer 1

我确定了我的问题，但它与 vue.js 无关。我使用 jinja2 生成 html，并且由于 jinja 也使用 {{ }} 语法进行模板化，所以这两个系统相互干扰。