构建你的第一个 Vue.js 组件

Vue.js 是一个基于组件的框架，这意味着应用程序是使用可重用的组件构建的。每个组件都封装了自己的 HTML、CSS 和 JavaScript。本文将指导您从头开始构建第一个 Vue.js 组件的过程。

创建一个新的 Vue 组件

Vue.js 组件通常存储在 .vue 文件中。每个组件文件由三个主要部分组成：'<template>'、'<script>' 和 '<style>'。让我们创建一个名为 Greeting.vue 的简单组件。

导航到您的项目文件夹： 使用终端进入您的 Vue 项目目录：

cd my-vue-project

创建一个新的组件文件： 在 src/components 目录中，创建一个名为 Greeting.vue 的新文件。

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
    <p>Welcome to your first Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

这个 Greeting.vue 组件包含：

<template>: 定义组件的 HTML 结构。
<script>: 包含组件的 JavaScript 逻辑，例如数据属性和方法。
<style>: 包含适用于此组件的 CSS 样式。scoped 属性确保样式仅适用于此组件。

使用你的组件

创建组件后，您需要在 Vue 应用程序中使用它。打开 src/App.vue 文件并修改它以包含 Greeting 组件：

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

在此更新的 App.vue 文件中：

导入组件： 使用 import Greeting from './components/Greeting.vue'; 导入 Greeting 组件。
注册组件： 将 Greeting 添加到 export default 块中的 components 对象。
使用组件： 将 '<Greeting />' 标签插入到 '<template>' 部分，以便在您的应用中使用该组件。

测试你的组件

保存更改并确保开发服务器正在运行。打开浏览器并导航至 http://localhost:8080。您应该会看到页面上呈现的 Greeting 组件的内容。

结论

您已成功创建并使用第一个 Vue.js 组件。组件是 Vue.js 应用程序的构建块，允许您封装和管理用户界面的不同部分。随着您对 Vue.js 越来越熟悉，您可以探索组件属性、事件和生命周期钩子等高级功能，以构建更具交互性和更复杂的应用程序。

继续尝试 Vue.js 组件并扩展您的知识以创建动态且引人入胜的 Web 应用程序。

vuejs 组件模板脚本样式创建导入使用应用程序开发测试渲染道具事件