文章目录
- 步骤 1: 创建组件文件
- 步骤 2: 定义模板
- 步骤 3: 添加脚本
- 步骤 4: 添加样式
- 步骤 5: 使用组件
步骤 1: 创建组件文件
通常，一个 Vue 组件被创建为一个单文件组件 (Single File Component)，这意味着它的模板、脚本和样式都包含在一个 .vue 文件中。首先，创建一个新的 .vue 文件，比如 MyComponent.vue。
步骤 2: 定义模板
组件的模板定义了 HTML 结构，并可以使用 Vue 的指令进行数据绑定和交互。模板部分位于 <template> 标签内。
MyComponent.vue
<template><div><h1>{{ message }}</h1><button @click="updateMessage">点击我</button></div>
</template>
步骤 3: 添加脚本
在 <script> 标签中，你可以定义组件的状态（数据）、方法、生命周期钩子等。这里是组件的逻辑部分。
<script>
export default {data() {return {message: 'Hello, Vue!'};},methods: {updateMessage() {this.message = '你好，Vue 2!';}}
}
</script>
步骤 4: 添加样式
组件的样式可以在 <style> 标签中定义。你可以选择使样式局部有效（默认行为，通过添加 scoped 属性）或全局有效。
<style scoped>
h1 {color: blue;
}
button {background-color: green;color: white;border: none;padding: 10px 20px;cursor: pointer;
}
</style>
步骤 5: 使用组件
为了在 Vue 应用中使用这个组件，你需要在父组件中导入并注册它。例如，如果你想在 App.vue 组件中使用 MyComponent，可以这样做：
<template><div id="app"><my-component></my-component></div>
</template><script>
import MyComponent from './components/MyComponent.vue';export default {name: 'App',components: {MyComponent}
}
</script>
