Question

我刚刚开始学习Vue。现在，我正在尝试构建我的第一个组件，但是模板没有显示，控制台也没有给我任何错误。这是我的一些代码：

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

这是一个Jsbin，上面有我的完整代码

Answer 1

您的Vue实例需要在el属性中指定的安装ID：

var vm = new Vue({ 
  el: '#app',  // Specifying a DOM id "app"
  data() {
    // ...
  }
})

并且应用模板需要使用相同的ID包装：

<div id="app">
  <button-counter></button-counter>
</div>

演示：

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

var vm = new Vue({ 
  el: '#app',
  data() {
    return {
      name:'yazid',
      age:'20',
      date:'press to known the date',
      skills:['HTML','CSS','JS'],
      ele:'<h1> elements from vue js</h1>',
      completed_languages:[{
        lang:'html',
        percent:'90%'
      },{
        lang:'CSS',
        percent:'70%'
      },{
        lang:'JS',
        percent:'70%'
      }]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button-counter></button-counter>
</div>

为什么我的组件模板没有显示在Vue中？

1 个答案: