Vue.js 中的符号 ' 不适用于我的模板

Symbol ' in Vue.js does not work for my template

我开始学习Vue.js。我从示例中获取了一些示例代码,但它的模板位于 HTML 文件中。我想将我的 app.js 作为模板放入,就像它们在我观看的视频教程中显示的那样。但是当我这样做时,我的编辑器向我显示了一个错误,而且我的控制台也发出了错误。这是我的代码:

var app = new Vue({
    el: "#app",
    data: {
        ...
    },
    filters: {
        ...
    },
    methods: {
        ...
    },
    template: '
      <div>
      
        <h1 class="main">Sunrise Vitamins</h1>
        
        <ul class="vitamins">
          <li class="vitamin_type" v-for="vitamin in vitamins" v-on:click="toggleActive(vitamin)" v-bind:class="{ 'active' : vitamin.active }">
            
            <span>{{vitamin.name}}</span> <span>{{vitamins.price | currency}}</span>
          
            </li>
        </ul>
        
        <p class="total">
          <span>Total:</span> <span>{{total() | currency}}</span>
        </p>
    
      </div>
    '
});

您使用了错误的符号,它不是' 作为撇号,它位于键盘左上角的 1 旁边,如果您在 Mac 上,则按 esc。抱歉,不确定它叫什么。它不仅适用于 Vue,它还是 ES6 的特性。我建议您在此处查看该内容以及 ECMAScript 2015 中引入的其他功能:

https://babeljs.io/learn-es2015/#template-strings