Vue2 快速入门：环境搭建、模板语法、指令系统全解

一、Vue2 介绍、适用场景、与 Vue3 区别

1.1 Vue2 是什么

Vue2 是一套渐进式 JavaScript 框架------核心只关注视图层，可以按需引入路由、状态管理等生态，小到单页面增强、大到完整 SPA 都能用。

1.2 与 Vue3 的核心区别

对比项	Vue2	Vue3
响应式原理	`Object.defineProperty`（对象/数组有局限）	`Proxy`（可监听新增、删除属性）
API 风格	选项式（Options API）为主	组合式（Composition API）为主
多根节点	不支持（模板只能一个根）	支持 Fragment 多根
过滤器 filter	✅ 支持	❌ 移除
v-model	组件默认 model 固定	支持多个 v-model（:modelValue）
体积/性能	较重	更轻更快，tree-shaking

1.3 适用场景

存量 Vue2 项目维护与二次开发（2026 年仍有大量线上项目）；
公司技术栈固定为 Vue2 的团队；
学习选项式 API 与组件化思维的基础（Vue3 兼容选项式）。

二、两种搭建方式：CDN 与 Vue-CLI

2.1 CDN 方式（学习/单页快速验证）

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Vue2 CDN Demo</title>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>

    <!-- 引入 Vue2 全局版 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",          // 挂载点
        data: {
          message: "你好，Vue2",
        },
      });
    </script>
  </body>
</html>

2.2 Vue-CLI 方式（工程化项目）

bash 复制代码

# 安装脚手架（3.x 兼容 Vue2 项目）
npm install -g @vue/cli

# 创建项目
vue create my-app
# 选择 Vue 2 预设（或 Manually select features）

# 启动开发服务器
cd my-app && npm run serve

生成的核心结构：

bash 复制代码

my-app/
├── public/index.html
├── src/
│   ├── main.js          # 入口：new Vue 挂载
│   ├── App.vue          # 根组件
│   ├── components/      # 组件目录
│   └── assets/          # 静态资源
└── package.json

2.3 两种方式对比

对比项	CDN	Vue-CLI
上手成本	一个 HTML 就能跑	需要 Node 环境
适用	学习、小页面、原型验证	正式工程化项目
工程能力	无（需手动引库）	打包、热更新、ESLint 全套

三、模板语法：插值与表达式

3.1 插值 `{{ }}`

html 复制代码

<p>{{ message }}</p>                    <!-- 文本插值 -->
<p>{{ number + 1 }}</p>                 <!-- 简单运算 -->
<p>{{ isOk ? "通过" : "失败" }}</p>      <!-- 三元表达式 -->
<p>{{ message.split("").reverse().join("") }}</p>   <!-- 方法调用 -->

3.2 文本与 HTML

html 复制代码

<p v-text="rawText"></p>          <!-- 纯文本（等价于 {{ }}） -->
<p v-html="htmlContent"></p>      <!-- 渲染 HTML，注意 XSS 风险！ -->

安全提示 ：v-html 会原样渲染 HTML，永远不要用它渲染用户可输入的未经转义内容。

3.3 插值原则

模板中只写表达式，不写复杂逻辑 ------逻辑放 computed / methods。

四、常用指令系统

4.1 v-bind：动态绑定属性（简写 `:`）

html 复制代码

<img :src="logoUrl" :alt="altText" />      <!-- 绑定属性 -->
<a :href="link">跳转</a>
<div :class="{ active: isActive }">样式类</div>   <!-- class 对象语法 -->

4.2 v-on：事件绑定（简写 `@`）

html 复制代码

<button @click="handleClick">点击</button>
<input @keyup.enter="submit" />             <!-- 按键修饰符 -->

<!-- 常用事件修饰符 -->
<form @submit.prevent="onSubmit">...</form>   <!-- .prevent 阻止默认行为 -->
<a @click.stop="onLink">...</a>               <!-- .stop 阻止冒泡 -->
<button @click.once="once">只触发一次</button>

js 复制代码

methods: {
  handleClick(e) { /* e 是原生事件对象 */ },
  submit() {},
}

4.3 v-for：列表渲染（必须加 key）

html 复制代码

<ul>
  <li v-for="(item, index) in list" :key="item.id">
    {{ index }} - {{ item.name }}
  </li>
</ul>

html 复制代码

<!-- 遍历对象 -->
<div v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</div>

:key 帮助 Vue 高效复用/更新节点，不要用 index 做 key（列表顺序变化时会出现渲染错位）。

4.4 v-if / v-show：条件渲染

html 复制代码

<p v-if="isLogin">已登录</p>
<p v-else>未登录</p>
<p v-show="isVisible">显示但不隐藏</p>

指令	机制	初始渲染开销	切换开销	适用
`v-if`	真正创建/销毁 DOM	高	低（不渲染就没有）	低频切换、初始不显示
`v-show`	只是 `display:none`	低	高（始终渲染）	高频切换

4.5 指令速查表

指令	简写	作用
`v-bind`	`:`	动态绑定属性
`v-on`	`@`	事件绑定
`v-for`	---	列表渲染
`v-if` / `v-else-if` / `v-else`	---	条件渲染（销毁/创建）
`v-show`	---	显隐切换（display）
`v-model`	---	表单双向绑定
`v-text` / `v-html`	---	文本 / HTML 输出
`v-cloak`	---	防止插值闪烁

五、v-model：双向绑定原理入门

5.1 基本用法

html 复制代码

<input v-model="username" />
<p>你输入的是：{{ username }}</p>

5.2 原理：语法糖

v-model 等价于"绑定 value + 监听 input 事件"：

html 复制代码

<!-- 等价写法 -->
<input :value="username" @input="username = $event.target.value" />

5.3 修饰符

html 复制代码

<input v-model.lazy="text" />     <!-- 改为 change 事件触发（失焦才更新） -->
<input v-model.number="age" />    <!-- 自动转数字 -->
<input v-model.trim="name" />     <!-- 自动去首尾空格 -->

组件的 v-model 底层是 value prop + input 事件（子组件用 model 选项可自定义）

六、新手高频踩坑

坑	现象	解决
`v-for` 忘写 `:key`	控制台警告、列表更新错乱	加稳定唯一 key
数组索引赋值不更新	`list[0] = x` 页面不变	用 `this.$set(list, 0, x)` 或 `splice`
新增对象属性不响应	`obj.newKey = 1` 无反应	`this.$set(obj, "newKey", 1)`
模板逻辑过重	模板难读、性能差	移到 computed / methods
`v-html` 渲染用户输入	XSS 安全风险	转义或白名单过滤
插值闪烁（{{ }}）	页面先显示源码再渲染	加 `v-cloak` 或工程化构建（CLI 无此问题）

七、总结

定位：渐进式框架，Vue2 用选项式 API + Object.defineProperty 响应式；
搭建：学习用 CDN 一个 HTML 搞定，项目用 Vue-CLI；
模板：{{ }} 插值 + 表达式，v-html 慎用；
指令：: 绑定属性、@ 绑定事件、v-for 配 key、v-if/v-show 按场景选；
v-model ：value + input 的语法糖，.number / .trim 修饰符按需加；
心态：先理解"数据驱动视图"------改数据，界面自动更新。

Vue2 快速入门：环境搭建、模板语法、指令系统全解

一、Vue2 介绍、适用场景、与 Vue3 区别

1.1 Vue2 是什么

1.2 与 Vue3 的核心区别

1.3 适用场景

二、两种搭建方式：CDN 与 Vue-CLI

2.1 CDN 方式（学习/单页快速验证）

2.2 Vue-CLI 方式（工程化项目）

2.3 两种方式对比

三、模板语法：插值与表达式

3.1 插值 {{ }}

3.2 文本与 HTML

3.3 插值原则

四、常用指令系统

4.1 v-bind：动态绑定属性（简写 :）

4.2 v-on：事件绑定（简写 @）

4.3 v-for：列表渲染（必须加 key）

4.4 v-if / v-show：条件渲染

4.5 指令速查表

五、v-model：双向绑定原理入门

5.1 基本用法

5.2 原理：语法糖

5.3 修饰符

六、新手高频踩坑

七、总结

3.1 插值 `{{ }}`

4.1 v-bind：动态绑定属性（简写 `:`）

4.2 v-on：事件绑定（简写 `@`）