03 - 十分钟入门Vue

全栈开发入门 管理员 2026年06月23日 106 次阅读 1294 字 约 5 分钟

视频教程：BV1gU411Z7pp

视频链接：BV1gU411Z7pp
发布日期：2024-05-19
视频时长：12:58
播放量：29.2万
所属合集：零基础AI全栈开发系列

视频概要

Vue框架的快速入门。讲解Vue的核心概念：响应式数据绑定、指令系统（v-if/v-for/v-model/v-bind/v-on）、组件化思想、npm包管理。信息密度高，适合快速了解Vue全貌。

知识点清单

A. Vue是什么

知识点说明重要程度
渐进式框架可以只用核心功能，也可以引入路由、状态管理等全家桶★★★★★
响应式数据变化时，页面自动更新，无需手动操作DOM★★★★★
组件化将页面拆分为独立、可复用的组件★★★★★
虚拟DOMVue通过虚拟DOM高效计算最小更新★★★
MVVM模式Model-View-ViewModel，数据驱动视图的架构模式★★★

B. Vue核心指令

指令作用示例
{{ }}插值表达式，显示数据<p>{{ message }}</p>
v-if条件渲染（是否渲染DOM）<p v-if="show">显示</p>
v-else与v-if配对的else分支<p v-else>隐藏</p>
v-else-if与v-if配对的else if分支<p v-else-if="type==='B'">B</p>
v-show显示/隐藏（CSS display方式）<p v-show="show">
v-for列表循环渲染<li v-for="item in list" :key="item.id">
v-bind (简写 :)动态绑定属性<img :src="url">
v-on (简写 @)绑定事件<button @click="fn">
v-model双向数据绑定<input v-model="text">
v-text设置元素文本内容<p v-text="msg"></p>
v-html设置元素HTML内容<div v-html="htmlStr"></div>

v-if vs v-show 对比

特性v-ifv-show
实现方式动态添加/移除DOM元素CSS的display切换
初始渲染条件为false不渲染始终渲染
切换开销高（重建DOM）低（只改CSS）
适用场景条件很少改变时频繁切换显示/隐藏

C. 响应式数据绑定

<div id="app">
    <h1>{{ message }}</h1>
    <input v-model="message">
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue;

createApp({
    setup() {
        const message = ref("Hello Vue!");
        return { message };
    }
}).mount("#app");
</script>

当输入框内容变化时，<h1> 的内容也自动变化 — 这就是双向数据绑定。你只需要修改数据，视图自动更新。

D. 条件渲染与列表渲染

<!-- 条件渲染 -->
<p v-if="isVisible">显示内容</p>
<button @click="isVisible = !isVisible">切换显示</button>

<!-- 列表渲染 -->
<ul>
    <li v-for="(item, index) in fruits" :key="index">
        {{ index + 1 }}. {{ item }}
    </li>
</ul>

:key 是Vue要求的唯一标识，帮助Vue高效追踪每个节点，推荐使用数据的id作为key。

E. npm包管理

命令作用
npm init初始化项目，生成package.json
npm install vue安装Vue到当前项目
npm install安装package.json中所有依赖
npm run dev启动开发服务器
npm run build构建生产版本
npm run start启动生产服务器

F. Vue项目创建

# 使用Vite创建Vue项目（推荐）
npm create vue@latest

# 或使用旧版vue-cli
npm create vue@3

# 进入项目目录
cd my-vue-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

G. Vue vs 原生JS对比

方面原生JavaScriptVue
数据更新手动操作DOM (el.innerHTML = ...)自动响应式更新
列表渲染手动拼接HTML字符串v-for 一行搞定
条件显示手动修改display样式v-if/v-show
事件绑定addEventListener@click 等指令
代码组织按DOM操作组织按组件组织
双向绑定手动监听input + 更新变量v-model 一行搞定

常见问题

问题解答
npm命令无法识别？需要先安装Node.js，推荐用nvm管理版本
v-if是做什么的？条件渲染指令，根据数据状态决定是否渲染DOM元素
动态绑定是什么？用:绑定属性，属性值由数据决定而非写死
v-if和v-show怎么选？条件少变化用v-if，频繁切换用v-show
:key必须加吗？是的，加了:key Vue才能高效追踪节点，不加会有警告
Vue2和Vue3有什么区别？Vue3使用Composition API（ref/reactive），Vue2使用Options API（data/methods）
信息量太大看不懂？正常，可以多看几遍，或进入下一集深入学习

前置知识检查

  • [x] HTML基本标签
  • [x] JavaScript变量和函数基础
  • [x] 会使用npm命令

学习建议

  • 本集适合快速了解Vue全貌，信息密度高，不必一遍全懂
  • 关键理解：数据驱动视图 — 你只需要修改数据，页面自动变化
  • 看完后建议进入下一集《Vue3教程》深入学习Composition API
  • npm报错通常是Node.js未安装或版本不对，推荐用nvm管理
返回首页