Vue.js 快速上手指南（可直接复制粘贴到博客）
Vue.js 是一款轻量级、渐进式前端框架，核心聚焦视图层，上手简单、生态完善，是构建交互式网页的首选工具。以下内容可直接复制粘贴到博客，包含核心语法、常用功能和实战示例，零基础也能快速搭建 Vue 项目。
一、快速引入（直接复制到博客
无需复杂配置，引入官方 CDN 即可快速使用 Vue.js（推荐生产环境用压缩版）：
html
预览
<!-- 开发环境版（包含调试工具）：
-->
二、核心语法：Vue3 基础（组合式 API）
Vue3 主推组合式 API（setup），语法更简洁、逻辑更易复用，以下示例可直接复制使用：
- 第一个 Vue 应用（响应式数据绑定）
html
预览
{ { message }}
计数：{ { count }}
核心特性：指令（模板语法）
Vue 指令以 v- 开头，封装常用 DOM 操作，直接复制示例即可使用：
html
预览
Vue官网
显示内容
隐藏时显示
{ { index + 1 }}. { { item }}
你输入的是：{ { inputValue }}
- 响应式数据：ref 与 reactive
Vue3 提供两种响应式方式，按需选择：
html
预览
ref（基本类型）：{ { num }}
reactive（对象/数组）：{ { user.name }} - { { user.age }}
三、常用功能（直接复制使用）
- 组件化开发（Vue 核心特性）
组件是 Vue 复用代码的核心，可封装独立功能模块：
html
预览
- 生命周期钩子（控制组件执行时机）
Vue 组件有完整的生命周期，常用钩子可控制代码执行时机：
html
预览
生命周期演示：{ { msg }}
- 异步请求（Axios 结合 Vue）
Vue 本身不封装 AJAX，推荐使用 Axios 实现前后端交互：
html
预览
加载中...
{ { error }}
{ { data.title }}
{ { data.body }}
四、实战示例：完整 Vue3 交互页面
直接复制以下代码，即可生成包含组件、响应式、异步请求的完整 Vue 页面：
html
预览
<!DOCTYPE html>
Vue3 实战演示
<!-- 响应式计数 -->
<div class="card">
<h3>1. 响应式计数</h3>
<p>当前计数：{
{ count }}</p>
<button class="btn" @click="increment">加1</button>
<button class="btn" style="background: #666; margin-left: 10px;" @click="decrement">减1</button>
</div>
<!-- 异步请求 -->
<div class="card">
<h3>2. 异步数据请求</h3>
<button class="btn" @click="fetchPost">获取文章数据</button>
<div class="loading" v-if="loading">加载中...</div>
<div class="error" v-else-if="error">{
{ error }}</div>
<div v-else v-if="post">
<h4>{
{ post.title }}</h4>
<p>{
{ post.body }}</p>
</div>
</div>
<!-- 自定义组件 -->
<div class="card">
<h3>3. 自定义组件</h3>
<my-item v-for="(item, index) in list" :key="index" :text="item"></my-item>
</div>
五、使用注意事项（避坑指南）
响应式数据注意：
ref 用于基本类型，修改值需加 .value（模板中无需）；
reactive 用于对象 / 数组，不能直接赋值（如 user = {}），需修改属性；
组件命名规范：
自定义组件推荐用 kebab-case（如 my-card），避免与 HTML 原生标签冲突；
组件 props 命名用 camelCase（如 linkTitle），模板中用 kebab-case（如 link-title）；
生命周期使用：
onMounted 中才能操作 DOM（如获取元素尺寸）；
异步请求尽量放在 onMounted，避免 setup 中直接执行；
Vue2 vs Vue3：
Vue3 主推组合式 API（setup），替代 Vue2 的选项式 API（data、methods 等）；
如需兼容旧项目，可同时学习选项式 API，但优先掌握组合式 API；
生产环境优化：
使用压缩版 Vue（.prod.js）；
避免在模板中写复杂逻辑（如 { { list.filter(item => item.age > 18) }}），抽离到 setup 中；
异步请求添加加载状态和错误处理，提升用户体验。
以上内容可直接复制到博客编辑器（开启 HTML 编辑模式），替换示例中的接口地址、样式、数据等内容，即可快速实现基于 Vue3 的交互式页面。Vue3 语法简洁、灵活性高，是前端开发的主流框架之一，掌握核心语法即可应对大部分开发场景。
