Vue简版 教程

一、安装与项目创建

1. ‌CDN 引入（适合快速体验）‌
   通过 <script> 标签直接引入 Vue3 的 ES 模块构建版本：

<div id="app">{{ message }}</div><script type="module">  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'  createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app')</script>

1. ‌脚手架创建（推荐工程化项目）‌
   使用 npm init vue@latest 命令创建 Vue3 项目，支持 TypeScript、路由（Vue Router）、状态管理（Pinia）等可选配置

二、创建第一个 Vue 应用

// Vue3 语法const app = {  data() {    return { message: 'Hello Vue3!' }  }}Vue.createApp(app).mount('#app')

• ‌核心概念‌：

• el/mount：挂载点，指定 Vue 实例管理的 DOM 元素

• data：数据对象，响应式数据驱动视图更新

三、基础语法与指令

1. ‌模板语法‌

• 插值表达式：{{ message }}，支持 JavaScript 表达式

• 双向绑定：v-model="inputValue"，常用于表单输入

2. ‌常用指令‌

• 条件渲染：v-if、v-show（基于条件显示/隐藏元素）

• 循环渲染：v-for="item in list"，生成动态列表

• 事件绑定：v-on:click="handleClick" 或简写 @click

• 属性绑定：v-bind:class="className" 或简写 :class

四、核心特性

1. ‌响应式数据‌
   Vue 自动追踪数据变化并更新 DOM，通过 data() 返回对象或 ref/reactive（Vue3）实现

2. ‌组件化开发‌

• 单文件组件（.vue 文件）：整合模板、脚本和样式，提升可维护性

• 组件通信：props（父传子）、$emit（子传父）等机制

3. ‌性能优化‌

• Vue3 优化了虚拟 DOM 算法，打包体积更小，支持 Tree-Shaking

• 组合式 API（Composition API）替代选项式 API，逻辑复用更灵活