引言：为什么选择 Vue？
在众多前端框架（React, Angular, Svelte）的竞争中，Vue.js 以其渐进式、易上手和高性能的特点，赢得了大量开发者的喜爱。无论是初创公司还是大型企业，Vue 都能提供灵活而强大的解决方案。
本文将带你探索 Vue.js 的核心魅力，并通过一个简单的示例展示其能力。
什么是 Vue.js？
Vue (发音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其他单体框架不同，Vue 被设计为可以自底向上逐层应用。
核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。当你需要更多功能时，可以选择其官方维护的库（如 Vue Router for routing, Pinia/Vuex for state management），最终成为一个功能全面的框架。
Vue 的三大核心优势
1. 渐进式与可嵌入性
你可以将 Vue 作为一个小型的、功能丰富的脚本引入你的现有项目，也可以用它来构建一个大型、复杂的单页应用（SPA）。这种灵活性是 Vue 的一大杀手锏。
示例：在 HTML 中快速引入
<div id="app">
{{ message }} <!-- 输出: Hello Vue! -->
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>2. 响应式数据绑定
Vue 的核心是一个高效的响应式系统。当数据改变时，视图会自动更新。这让你可以专注于逻辑而非 DOM 操作。
示例：实时更新
<div id="app">
<p>{{ message }}</p>
<input v-model="message"> <!-- 修改输入框，上面的 <p> 标签内容会实时改变 -->
</div>只需一个简单的 v-model指令，就实现了双向数据绑定。
3. 组件化系统
Vue 的组件系统允许你用小型、独立、通常可复用的组件构建大型应用。这提高了代码的可维护性和复用性。
示例：一个简单的组件
<template>
<button @click="count++">You clicked me {{ count }} times.</button>
</template>
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>实战：构建一个简单的待办事项列表 (To-Do List)
让我们用 Vue 3 的 Composition API (使用 <script setup>) 来创建一个功能完整的待办事项应用。
<template>
<div class="app">
<h1>My To-Do List</h1>
<form @submit.prevent="addTodo">
<input v-model="newTodo" placeholder="Add a new task">
<button type="submit">Add</button>
</form>
<ul>
<li v-for="(todo, index) in todos" :key="todo.id">
<span :class="{ done: todo.done }">{{ todo.text }}</span>
<button @click="toggleDone(todo)">{{ todo.done ? 'Undo' : 'Done' }}</button>
<button @click="removeTodo(index)">Delete</button>
</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue'
// 响应式数据
const newTodo = ref('')
const todos = ref([])
// 方法
function addTodo() {
if (newTodo.value.trim() === '') return
todos.value.push({
id: Date.now(),
text: newTodo.value,
done: false
})
newTodo.value = '' // 清空输入框
}
function toggleDone(todo) {
todo.done = !todo.done
}
function removeTodo(index) {
todos.value.splice(index, 1)
}
</script>
<style>
.done {
text-decoration: line-through;
color: #888;
}
.app {
max-width: 400px;
margin: 0 auto;
}
</style>
