Vue.js

Vue (读音 /vjuː/，类似于 view) 是一款用于构建用户界面的渐进式 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

核心特性

渐进式框架

Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

// 无需构建步骤，直接引入使用
import { createApp } from 'vue'

createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}).mount('#app')

响应式系统

Vue 最标志性的特性是其响应式系统。当数据发生变化时，视图会自动更新。

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    Count is: {{ count }}
  </button>
</template>

单文件组件 (SFC)

Vue 的单文件组件（即 *.vue 文件）将 HTML、CSS 和 JavaScript 封装在一个文件中，提供了更好的开发体验。

<script setup>
import { ref } from 'vue'
import TodoItem from './TodoItem.vue'

const newTodo = ref('')
const todos = ref([
  { id: 1, text: 'Learn Vue' },
  { id: 2, text: 'Build something awesome' }
])

function addTodo() {
  todos.value.push({
    id: Date.now(),
    text: newTodo.value
  })
  newTodo.value = ''
}
</script>

<template>
  <div class="todo-app">
    <input
      v-model="newTodo"
      @keyup.enter="addTodo"
      placeholder="Add a todo"
    >
    <ul>
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
      />
    </ul>
  </div>
</template>

<style scoped>
.todo-app {
  max-width: 400px;
  margin: 0 auto;
}
</style>

生态系统

项目	描述	用途
Vue Router	官方路由管理器	单页应用导航
Pinia	官方状态管理库	应用状态管理
VueUse	组合式函数集合	常用功能封装
Nuxt	全栈框架	SSR、静态生成
Vite	官方构建工具	快速开发体验

快速开始

通过 CDN 使用

<!DOCTYPE html>
<html>
<head>
  <title>Vue App</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>

  <script>
    const { createApp } = Vue

    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

通过 npm 创建项目

# 使用官方脚手架
npm create vue@latest my-vue-app

# 进入项目
cd my-vue-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

组合式 API

Vue 3 引入的组合式 API 提供了更灵活的代码组织方式。

<script setup>
import { ref, computed, watch, onMounted } from 'vue'

// 响应式状态
const count = ref(0)
const doubleCount = computed(() => count.value * 2)

// 方法
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log('Component mounted')
})

// 侦听器
watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`)
})
</script>

常用指令

指令	说明	示例
`v-bind` / `:`	绑定属性	`:src="imageUrl"`
`v-on` / `@`	监听事件	`@click="handleClick"`
`v-model`	双向绑定	`v-model="inputValue"`
`v-if` / `v-else`	条件渲染	`v-if="isVisible"`
`v-for`	列表渲染	`v-for="item in list"`
`v-show`	显示/隐藏	`v-show="isVisible"`

最佳实践

使用 <script setup> - 更简洁的语法
优先使用组合式 API - 更好的逻辑复用
使用 TypeScript - 更好的类型支持
使用 Pinia 管理状态 - 官方推荐
使用 Vue Router 进行导航 - 官方路由解决方案

Vue.js

Vue.js

核心特性

渐进式框架

响应式系统

单文件组件 (SFC)

生态系统

快速开始

通过 CDN 使用

通过 npm 创建项目

组合式 API

常用指令

最佳实践

学习资源