如何在我的组件VueJS上添加按钮计数

Question

我开始学习VueJS，但我无法在组件上添加按钮计数，我正在使用laravel！

我的应用程序js:

window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Home from './components/HomeComponent.vue'
import Categorie from './components/CategorieComponent.vue'

let routes = [
{
path: '/',
component: Home
},
];
const app = new Vue({
mode: 'history',
el: '#app',
router: router,
data: {
message: 'Hello Vue'
}
});
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">Vous m'avez cliqué {{ count }} fois.</button>'
});

我的家庭组件.vue：

<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card-body">
<h1 class="card-tite">Bienvenue sur mon site</h1>
<button-counter></button-counter>
</div>
</div>
</div>
</div>
</template>

我添加了一个div"；应用程序"；并在此基础上添加一个<router-view><router-view>：(

我的控制台VueJS告诉我：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供"；name"；选项

Answer 1

正如错误消息中所说，在使用组件之前，您必须注册组件。查看本文以了解更多信息。

在您的示例中，您必须将Vue.component('button-counter', { ... })部分从应用程序初始化中移入。它只是定义的另一个组件(类似于您的HomeComponent(。

像这样更改app.js：

window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Home from './components/HomeComponent.vue'
import Categorie from './components/CategorieComponent.vue'

let routes = [
{
path: '/',
component: Home
},
];
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">Vous m'avez cliqué {{ count }} fois.</button>'
});
const app = new Vue({
mode: 'history',
el: '#app',
router: router,
data: {
message: 'Hello Vue'
}
});

你的例子应该能很好地发挥作用。

用你的例子看看这把小提琴。