Vue.js 组件学习笔记
什么是 Vue.js 组件？
在 Vue.js 中，组件是可复用、独立、封装的单元。每个组件都有自己的模板、逻辑和样式，通过组合这些组件，可以构建大型、可维护的应用程序。
在 Vue.js 中，组件可以像 HTML 标签一样使用，这使得开发人员可以非常容易地扩展应用程序，提高代码重用性。
如何定义一个 Vue.js 组件？
在 Vue.js 中，可以通过 Vue.component 函数定义一个组件。例如，下面定义了一个名为 "my-component" 的组件：
javascriptCopy CodeVue.component('my-component', {
template: '<div>这是我的第一个 Vue.js 组件！</div>'
})
在上面的代码中，我们定义了一个 MyComponent 组件，它的模板内容是一个包含文本“这是我的第一个 Vue.js 组件！”的 div 元素。
如何在模板中使用组件？
在 Vue.js 中，可以像普通 HTML 元素一样使用组件。例如，以下代码显示了如何在模板中使用 my-component 组件：
htmlCopy Code<div id="app">
<my-component></my-component>
</div>
在上面的代码中，我们在一个 div 元素中放置了 MyComponent 组件。当 Vue.js 应用程序启动时，它会将这个组件替换为组件模板中定义的内容。
实例
下面是一个简单的实例，我们将创建一个 my-button 组件，它显示一个按钮，当用户单击按钮时，会在控制台中记录一条消息。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 组件学习笔记</title>
</head>
<body>
<div id="app">
<my-button></my-button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('my-button', {
template: '<button @click="logMessage">点击我！</button>',
methods: {
logMessage: function() {
console.log('你单击了按钮！');
}
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
在上面的代码中，我们定义了一个 MyButton 组件。它的模板内容是一个包含按钮元素的 div 元素，当用户单击按钮时，会调用组件中的 logMessage 方法，并在控制台中记录一条消息。
可以通过 CodePen 在线查看并运行该示例。