Question

我刚从学校开始使用Vue.js，在我的第一个作业中，我将从vue组件打印h2，但是我无法使其工作。我已经创建了如下所示的vue组件。

   var app = new Vue({
       el: '#app'

   })

   Vue.component('titleMsg', {
       template: '<h1>{{ title }}</h1>',
       data: {
           title: 'Vue startsida'
       }
   })

还有我的html代码。

   <body>
           <div id="app">
               <titleMsg></titleMsg>
           </div>
           <script src="https://cdn.jsdelivr.net/npm/vue"></script>
           <script src="main.js"></script>
       </body>

有人可以告诉我我想念什么吗？

Answer 1

要获得预期的结果，请使用指令名称格式（kebabCase）作为组件名称，并且根据官方文档“组件的数据选项必须是一个函数”
https://vuejs.org/v2/guide/components.html

Instead, a component’s data option must be a function, so that each instance can maintain an independent copy of the returned data object:

示例工作代码以供参考-

 Vue.component('titleMsg', {
       template: '<h1>{{ title }}</h1>',
       data:function() {
         return {
           title: 'Vue startsida'
       }
       }
   })

new Vue({ el: '#app' })

#app div{
  border: 1px solid black;
  width: 200px;
}

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

codepen-https://codepen.io/nagasai/pen/GRRereG

Answer 2

未显示，因为VideoCapture应该是返回对象的函数...

data

也，使用kebab-case标记中组件的名称。

   data() {
       return {
        title: 'Vue startsida'
       }
   }

https://codeply.com/p/LwKtkn7VUX

Vue组件在HTML中不可见

2 个答案: