Vue不会在我的组件的胡子模板（{{}}）中呈现内容

Question

我整天都在抨击这个问题。以下问题，我的胡子bracer组件不会在我的网站上呈现。我只是将护腕中的未渲染组件作为输出。

//app.js
//
import Vue from 'vue'


new Vue({

  //We want to target the div with an id of 'events'

  el: '#events',

  //Here we can register any values or collections that hold data 
  //for the application
  data: {
    event: {
      name: '',
      description: '',
      date: ''
    },
    events: []
  },

  // Anything within the ready function will run when the application loads
  ready: function() {
    //When application loads, we want to call the method that initializies
    //some data
    this.fetchEvents();
  },

  // Methods we want to use in our application are registered here
  methods: {

    //We dedicate a method to retrieving and setting some data
    fetchEvents: function() {
      // body...
      var events = [{
          id: 1,
          name: 'TIFF',
          description: 'Toronto International Film Festival',
          date: '2015-09-10'
        },
        {
          id: 2,
          name: 'The Martian Premiere',
          description: 'The Martian comes to theatres',
          date: '2015-10-02'

        },
        {
          id: 3,
          name: 'SXSW',
          description: 'Music, film and interactive festival in Austin, TX'
          date: '2016-03-11'
        }
      ];
      //Set is a convenience method provided by Vue that is similar to pushing
      //data onto an array
      this.$set('events', events);


    },

    //Adds an event to the existing events array
    addEvent: function() {
      if (this.event.name) {
        this.events.push(this.event);
        this.event = {
          name: '',
          description: '',
          date: ''
        };
      }
    }

    deleteEvent: function(index) {
      if (confirm("Are you sure you want to delete this Event?")) {
        //$remove is a Vue convenience method similar to splice
        this.events.$remove(index);
      }
    }
  }

});

<!DOCTYPE html>
<html>

<head>
  <title>Vue</title>
  <meta charset="utf-8">

  <!-- CSS -->

  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="node_modules/vue-resource/dist/vue-resource.js"></script>
  <script src="app.js"></script>
</head>

<body>

  <!-- navigation bar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i>Vue Events Bulletin</a>
    </div>
  </nav>

  <!-- main body of our application -->
  <div class="container" id="events">

    <!-- add an event form -->

    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3>Add an Event</h3>
        </div>

        <div class="panel-body">

          <div class="form-group">
            <input class="form-control" placeholder="Event Name" v-model="event.name">
          </div>

          <div class="form-group">
            <textarea class="form-control" placeholder="Event Description" v-model="event.description"></textarea>
          </div>

          <div class="form-group">
            <input type="date" class="form-control" placeholder="Date" v-model="event.date">
          </div>

          <button class="btn btn-primary" v-on:click="addEvent()">Submit</button>

        </div>
      </div>
    </div>

    <div class="col-sm-6">
      <div class="list-group">

        <a href="#" class="list-group-item" v-repeat="event in events">
          <h4 class="list-group-item-heading">
            <i class="glyphicon glyphicon-bullhorn"></i> {{ event.name }}
          </h4>

          <h5>
            <i class="glyphicon glyphicon-calender" v-if="event.date"></i> {{ event.date }}
          </h5>

          <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>

          <button class="btn btn-xs btn-danger" v-on:click="deleteEvent($index)">Delete</button>
        </a>

      </div>
    </div>
  </div>

  <!-- JS -->
  <!--<script src="node_modules/vue/dist/vue.js"></script> -->
  <!--<script src="node_modules/vue-resource/dist/vue-resource.js"><!--</script> -->
  <!--<script src="app.js"></script> -->

</body>