Vue.js 零基础入门教程

1. 什么是Vue.js？

Vue.js（通常简称为Vue）是一个用于构建用户界面的渐进式JavaScript框架，由尤雨溪创建。它具有以下核心特性：

响应式数据绑定：自动同步数据与视图
组件系统：可复用的自定义元素
声明式渲染：通过简洁的模板语法声明式地将数据渲染到DOM
虚拟DOM：高效的DOM更新机制

数据绑定示意图

2. 开发环境搭建

2.1 安装Node.js

访问Node.js官网下载并安装LTS版本

2.2 创建Vue项目

npm create vue@latest
# 按提示完成项目创建

cd your-project-name
npm install
npm run dev

项目结构说明

├── public/          # 静态资源
├── src/             # 主要开发目录
│   ├── assets/      # 图片等资源
│   ├── components/  # 组件目录
│   └── App.vue      # 根组件
└── package.json     # 项目配置

3. 第一个Vue应用

<!-- App.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">反转消息</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello Vue 3!')

function reverseMessage() {
  message.value = message.value.split('').reverse().join('')
}
</script>

<style>
h1 {
  color: #42b983;
}
</style>

代码解析：

template：定义组件模板
script：处理组件逻辑
style：组件样式
ref：创建响应式数据
@click：事件绑定指令

4. 模板语法

4.1 文本插值

<p>{{ message }}</p>

4.2 属性绑定

<img :src="imageSrc" alt="Vue Logo">

4.3 条件渲染

<div v-if="showContent">显示内容</div>
<div v-else>替代内容</div>

4.4 列表渲染

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

4.5 双向绑定

<input v-model="inputText">
<p>输入内容：{{ inputText }}</p>

指令示意图

5. 组件化开发

5.1 创建组件

<!-- components/ButtonCounter.vue -->
<template>
  <button @click="count++">
    点击次数：{{ count }}
  </button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

5.2 使用组件

<template>
  <ButtonCounter />
  <ButtonCounter />
</template>

<script setup>
import ButtonCounter from './components/ButtonCounter.vue'
</script>

组件通信

<!-- 父组件 -->
<ChildComponent :title="parentTitle" @update="handleUpdate" />

<!-- 子组件 -->
<script setup>
defineProps(['title'])
defineEmits(['update'])
</script>

6. 综合案例：待办事项

<template>
  <div class="todo-app">
    <h2>待办事项列表（{{ todos.length }}）</h2>
    <input 
      v-model="newTodo"
      @keyup.enter="addTodo"
      placeholder="添加新事项"
    >
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.done">
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
        <button @click="removeTodo(index)">×</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const newTodo = ref('')
const todos = ref([
  { text: '学习Vue3', done: false },
  { text: '编写项目', done: true }
])

function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({
      text: newTodo.value,
      done: false
    })
    newTodo.value = ''
  }
}

function removeTodo(index) {
  todos.value.splice(index, 1)
}
</script>

<style>
.done {
  text-decoration: line-through;
  color: #666;
}
</style>

待办事项效果图