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无关。我使用jinja2生成html，并且由于jinja也使用{{}}语法进行模板化，因此两个系统都受到了干扰。