Vue 2 组件创建全指南：一步一步学习

fun binary2024-05-04 11:37

文章目录

[步骤 1: 创建组件文件](#步骤 1: 创建组件文件)
- - [步骤 2: 定义模板](#步骤 2: 定义模板)
  - [步骤 3: 添加脚本](#步骤 3: 添加脚本)
  - [步骤 4: 添加样式](#步骤 4: 添加样式)
  - [步骤 5: 使用组件](#步骤 5: 使用组件)

步骤 1: 创建组件文件

通常，一个 Vue 组件被创建为一个单文件组件 (Single File Component)，这意味着它的模板、脚本和样式都包含在一个 .vue 文件中。首先，创建一个新的 .vue 文件，比如 MyComponent.vue。

步骤 2: 定义模板

组件的模板定义了 HTML 结构，并可以使用 Vue 的指令进行数据绑定和交互。模板部分位于 <template> 标签内。

MyComponent.vue

vue 复制代码

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">点击我</button>
  </div>
</template>

步骤 3: 添加脚本

在 <script> 标签中，你可以定义组件的状态（数据）、方法、生命周期钩子等。这里是组件的逻辑部分。

vue 复制代码

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = '你好，Vue 2!';
    }
  }
}
</script>

步骤 4: 添加样式

组件的样式可以在 <style> 标签中定义。你可以选择使样式局部有效（默认行为，通过添加 scoped 属性）或全局有效。

vue 复制代码

<style scoped>
h1 {
  color: blue;
}
button {
  background-color: green;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
</style>

步骤 5: 使用组件

为了在 Vue 应用中使用这个组件，你需要在父组件中导入并注册它。例如，如果你想在 App.vue 组件中使用 MyComponent，可以这样做：

vue 复制代码

<template>
  <div id="app">
    <my-component></my-component>
  </div>
</template>

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

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

‍