javascript - Vue 未定义

Question

我已经为这个错误苦苦挣扎了一段时间。我尝试了多种方法，但都不起作用。我要做的就是让这个简单的组件正常工作。请有人帮忙。 :)

<script>
const app = new Vue({
  el: "#main",
  data: function(){
          return {
          search: '',
          customers: [
            { id: '1', name: 'Something', },
            { id: '2', name: 'Something else', },
            { id: '3', name: 'Something random', },
            { id: '4', name: 'Something crazy', }
          ]};
  },
  computed:
  {
      filteredCustomers:function()
      {
         var self=this;
         return this.customers.filter(function(cust){return cust.name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});
         //return this.customers;
      }
  }
  });
</script>

<template>
<div id="main">
Search: <input type="text" v-model="search"/>   
<div v-bind:v-for="customer in filteredCustomers">
 <span>{{customer.name}}</span>
</div>
</div>
</template>

Answer 1

您应该包含 Vue 库。
这样做的一种方法是包括使用 <script>如 Vue 的 documentation 中所述.