Vuejs 单文件组件实例详解

Vue.js 单文件组件实例详解攻略

什么是 Vue.js 单文件组件？

Vue.js 单文件组件是一种将 HTML 模板、JavaScript 代码和 CSS 样式封装在一个文件中的组件化开发方式。它能够提高代码的可维护性和复用性，使得开发者能够更加高效地构建复杂的用户界面。

单文件组件的结构

一个典型的 Vue.js 单文件组件由三个部分组成：模板（template）、脚本（script）和样式（style）。下面是一个示例的单文件组件结构：

<template>
  <!-- HTML 模板 -->
</template>

<script>
  // JavaScript 代码
</script>

<style>
  /* CSS 样式 */
</style>

示例说明一：计数器组件

下面是一个简单的计数器组件的示例：

<template>
  <div>
    <button @click=\"increment\">增加</button>
    <span>{{ count }}</span>
    <button @click=\"decrement\">减少</button>
  </div>
</template>

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

<style>
button {
  margin: 5px;
}
</style>

在这个示例中，模板部分定义了一个包含增加和减少按钮以及计数器显示的 HTML 结构。脚本部分使用 data 属性来定义了一个名为 count 的响应式数据，并且定义了两个方法 increment 和 decrement 来修改 count 的值。样式部分定义了按钮的样式。

示例说明二：待办事项列表组件

下面是一个待办事项列表组件的示例：

<template>
  <div>
    <input v-model=\"newTodo\" @keyup.enter=\"addTodo\" placeholder=\"添加待办事项\" />
    <ul>
      <li v-for=\"todo in todos\" :key=\"todo.id\">
        {{ todo.text }}
        <button @click=\"removeTodo(todo.id)\">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push({
          id: Date.now(),
          text: this.newTodo
        });
        this.newTodo = '';
      }
    },
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id);
    }
  }
};
</script>

<style>
li {
  margin-bottom: 5px;
}
button {
  margin-left: 5px;
}
</style>

在这个示例中，模板部分包含了一个输入框和一个待办事项列表。脚本部分定义了两个响应式数据 newTodo 和 todos，以及两个方法 addTodo 和 removeTodo 来添加和删除待办事项。样式部分定义了列表项和按钮的样式。

以上是关于 Vue.js 单文件组件的详细讲解和两个示例说明。希望对你有帮助！