初识 Vue.js 中的 *.Vue文件

初识 Vue.js 中的 .vue 文件

在 Vue.js 中，.vue 文件是一个自定义的单文件组件（Single-File Component），可以将 HTML、CSS 和 JavaScript 集中到一个 .vue 文件中，并进行组件化开发。

一个 .vue 文件一般包含三部分：template（模板）、script（脚本）和 style（样式），它们使用了 Vue.js 提供的各种语法和特性。通过使用 .vue 文件，可以让开发者更加方便地组织代码和维护项目。

下面是一个简单的 .vue 文件，它包含了一个计数器组件：

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },

  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<style>
h1 {
  font-size: 24px;
}
</style>

在上面的代码中，template 标签中的内容就是组件的模板，可以使用 Vue.js 提供的数据绑定、指令等语法实现动态渲染。script 标签中的内容是组件的逻辑代码，可以使用 Vue.js 提供的组件选项（如 data、methods、computed 等）进行组件的开发和交互。style 标签中的内容是组件的样式代码，可以使用 CSS 进行样式设计。

下面我们来看两个实例，分别是如何使用 .vue 文件来实现一个待办事项列表组件和一个轮播图组件。

实例一：待办事项列表组件

在这个组件中，我们使用 .vue 文件来实现一个简单的待办事项列表，用户可以添加、删除和标记已完成的任务。

首先，我们在项目目录下创建一个 TodoList.vue 文件，代码如下：

<template>
  <div class="todo-list">
    <div class="input-box">
      <input type="text" v-model="newTodo" placeholder="Type in a new task" @keyup.enter="addTodo">
      <button v-if="newTodo" @click="addTodo">Add</button>
    </div>
    <ul class="task-list">
      <li v-for="(task, index) in tasks" :key="index" :class="{ completed: task.completed }">
        <label>
          <input type="checkbox" v-model="task.completed">
          {{ task.title }}
        </label>
        <button @click="removeTask(index)">X</button>
      </li>
    </ul>
    <div class="task-count">{{ incompleteTasksCount }} tasks remaining</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      tasks: []
    }
  },

  methods: {
    addTodo() {
      if (this.newTodo) {
        this.tasks.push({
          title: this.newTodo,
          completed: false
        })
        this.newTodo = ''
      }
    },

    removeTask(index) {
      this.tasks.splice(index, 1)
    }
  },

  computed: {
    incompleteTasksCount() {
      return this.tasks.filter(task => !task.completed).length
    }
  }
}
</script>

<style>
.todo-list {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: sans-serif;
  font-size: 16px;
}

.input-box {
  margin-bottom: 10px;
}

.input-box input[type="text"] {
  width: 80%;
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-box button {
  padding: 5px 10px;
  border-radius: 4px;
  color: #fff;
  background-color: #333;
  border: none;
}

.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.task-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.task-list li label {
  cursor: pointer;
}

.task-list li input[type="checkbox"] {
  margin-right: 5px;
}

.task-list li.completed {
  background-color: #eee;
}

.task-list li button {
  padding: 5px;
  border-radius: 4px;
  color: #fff;
  background-color: #333;
  border: none;
  cursor: pointer;
}
</style>

在上面的代码中，我们定义了一个 TodoList 的组件，并在其中使用了 Vue.js 提供的指令、计算属性、事件等语法。通过组合多个标签和逻辑代码，实现了一个完整的带有交互功能的待办事项列表组件，可以在其他组件或页面中引用并使用。

实例二：轮播图组件

下面是一个使用 .vue 文件实现的轮播图组件示例，可以自动轮播多张图片，用户也可以通过点击按钮来切换图片。

首先，我们在项目目录下创建一个 Carousel.vue 文件，代码如下：

<template>
  <div class="carousel">
    <div class="images" :style="{ transform: 'translateX(' + (-currentImageIndex * 100) + '%)' }">
      <div v-for="(image, index) in images" :key="index" class="image" :style="{ backgroundImage: 'url(' + image.src + ')' }"></div>
    </div>
    <div class="controls">
      <button @click="prevImage">Prev</button>
      <button @click="nextImage">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentImageIndex: 0,
      images: [
        { src: 'https://picsum.photos/id/1018/800/400' },
        { src: 'https://picsum.photos/id/1019/800/400' },
        { src: 'https://picsum.photos/id/1020/800/400' },
        { src: 'https://picsum.photos/id/1021/800/400' }
      ]
    }
  },

  mounted() {
    this.startAutoPlay()
  },

  methods: {
    prevImage() {
      this.currentImageIndex = (this.currentImageIndex - 1 + this.images.length) % this.images.length
    },

    nextImage() {
      this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length
    },

    startAutoPlay() {
      this.timer = setInterval(() => {
        this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length
      }, 2000)
    }
  },

  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

<style>
.carousel {
  position: relative;
}

.images {
  display: flex;
  transition: transform 0.5s ease-out;
}

.image {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
}

.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

button {
  padding: 5px 10px;
  margin: 0 10px;
  border-radius: 4px;
  color: #fff;
  background-color: #333;
  border: none;
  cursor: pointer;
}
</style>

在上面的代码中，我们定义了一个 Carousel 的组件，并使用了 Vue.js 提供的计算属性、生命周期钩子、事件等语法。通过组合多个标签和逻辑代码，实现了一个完整的轮播图组件，可以在其他组件或页面中引用并使用。

总结

以上是关于初识 Vue.js 中的 .vue 文件的完整攻略，我们介绍了 .vue 文件的基本结构和使用方法，并使用了两个实例来演示如何使用 .vue 文件进行组件化开发。

在使用 .vue 文件进行开发时，需要注意以下几点：