基于Vue单文件组件详解

什么是单文件组件

单文件组件是Vue框架中常用的组件化开发方式。它将组件的HTML模板、JavaScript逻辑和CSS样式整合到同一个文件中，更加方便管理和开发。

单文件组件的优点

结构清晰：单文件组件将组件的”三大件“整合到一起，代码结构更加清晰；
复用性高：单文件组件可以被其他组件复用，提高代码的复用性；
可维护性强：单文件组件的HTML、JS、CSS代码被封装在一个文件中，更加便于后期维护；
提高开发效率：单文件组件可以快速调试和开发，提高开发效率。

创建单文件组件

Vue框架中使用.vue文件类型来创建单文件组件。它的结构一般分为三个部分：template、script和style。

例如下面这个示例：

<template>
  <div class="my-component">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello, world!',
      content: 'This is my first Vue component.'
    }
  }
}
</script>

<style>
.my-component {
  background-color: #eee;
  padding: 20px;
}
</style>

该示例中的template部分定义了组件的HTML模板；script部分定义了组件的JavaScript逻辑；style部分定义了组件的CSS样式。

Vue单文件组件示例

实例1：使用单文件组件创建一个TodoList应用

首先，在项目根目录下创建一个TodoList.vue文件，输入以下代码：

<template>
  <div>
    <h1>Todo List</h1>
    <form @submit.prevent="addTask">
      <input type="text" v-model="newTask" />
      <button>Add Task</button>
    </form>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <span>{{ task }}</span>
        <button @click="deleteTask(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: "",
      tasks: [],
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== "") {
        this.tasks.push(this.newTask);
        this.newTask = "";
      }
    },
    deleteTask(index) {
      this.tasks.splice(index, 1);
    },
  },
};
</script>

<style scoped>
li span {
  margin-right: 10px;
}
button {
  margin-top: 10px;
}
</style>

该文件定义一个TodoList组件，含有任务输入框、添加任务按钮、任务列表、删除任务按钮等功能。

在App.vue文件中添加以下代码：

<template>
  <div>
    <TodoList />
  </div>
</template>

<script>
import TodoList from "./TodoList.vue";

export default {
  name: "app",
  components: {
    TodoList,
  },
};
</script>

该代码中，App.vue文件为根组件，将TodoList.vue文件导入，并在模板中使用<TodoList />标签实现组件渲染。

实例2：使用单文件组件创建一个简单的计数器应用

首先，在项目根目录下创建一个Counter.vue文件，输入以下代码：

<template>
  <div>
    <p>当前计数值: {{ counter }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    increment() {
      this.counter++;
    },
    decrement() {
      this.counter--;
    },
  },
};
</script>

<style scoped>
p {
  font-weight: bold;
}
button {
  margin-left: 10px;
}
</style>

该文件定义一个Counter组件，含有一个计数器和两个按钮，实现计数器的增加和减少操作。

在App.vue文件中添加以下代码：

<template>
  <div>
    <Counter />
  </div>
</template>

<script>
import Counter from "./Counter.vue";

export default {
  name: "app",
  components: {
    Counter,
  },
};
</script>

该代码中，App.vue文件为根组件，将Counter.vue文件导入，并在模板中使用<Counter />标签实现组件渲染。