为啥我的组件模板没有出现在 Vue 中？

Posted 2023-02-23

【中文标题】为啥我的组件模板没有出现在 Vue 中？

【英文标题】：Why doesn't my component template show up in Vue?为什么我的组件模板没有出现在 Vue 中？

【发布时间】：2021-02-24 01:42:14

【问题描述】：

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

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

这是一个Jsbin 和我的完整代码

【参考方案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>