Vue简版 教程
一、安装与项目创建
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>脚手架创建（推荐工程化项目）
使用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：数据对象，响应式数据驱动视图更新
三、基础语法与指令
模板语法
插值表达式：
{{ message }}，支持 JavaScript 表达式双向绑定：
v-model="inputValue"，常用于表单输入常用指令
条件渲染：
v-if、v-show（基于条件显示/隐藏元素）循环渲染：
v-for="item in list"，生成动态列表事件绑定：
v-on:click="handleClick"或简写@click属性绑定：
v-bind:class="className"或简写:class
四、核心特性
响应式数据
Vue 自动追踪数据变化并更新 DOM，通过data()返回对象或ref/reactive（Vue3）实现组件化开发
单文件组件（.vue 文件）：整合模板、脚本和样式，提升可维护性
组件通信：
props（父传子）、$emit（子传父）等机制性能优化
Vue3 优化了虚拟 DOM 算法，打包体积更小，支持 Tree-Shaking
组合式 API（Composition API）替代选项式 API，逻辑复用更灵活
