第 4 课：前端工程化进阶 ——Vue 核心语法 + 组件化开发（前端能力质的飞跃）

✅ 课程衔接：已掌握「HTML/CSS/JS 原生前端 + Python 后端 + 前后端 AJAX 联调」，本课完成前端开发从「原生零散开发」到「工程化模块化开发」的升级；✅ 核心定位：Vue 是前端主流框架，90% 企业前端选型首选，学会 Vue = 掌握企业级前端开发核心能力；✅ 学习价值：告别原生 JS 的 DOM 操作繁琐、代码冗余问题，用 Vue 实现「数据驱动视图」，大幅提升前端开发效率，适配大型项目开发规范。

✅ 今日学习目标

✅ 掌握 Vue 的 2 种开发方式（CDN 快速入门 + 工程化脚手架），零基础快速上手 Vue 核心；✅ 吃透 Vue 核心语法：插值表达式、指令系统（v-bind/v-model/v-on/v-if/v-for）、事件绑定，实现「数据驱动视图」；✅ 攻克前端工程化核心 ------组件化开发，掌握全局组件、局部组件、父子组件传参，实现前端代码复用与模块化；✅ 掌握 Vue 中 Axios 的整合用法，无缝对接后端接口，实现「Vue 前端 ↔ Python 后端」全栈联动；✅ 完成 Vue 版「用户管理前端页面」开发，整合所有知识点，落地前端工程化开发思想。

✅ 课前铺垫：为什么要学 Vue？（原生 JS VS Vue 核心差异）

作为前端开发者，你一定遇到过原生开发的痛点：频繁操作 DOM、代码耦合度高、页面逻辑混乱、复用性差。Vue 完美解决这些问题，核心优势 3 点：✅ 数据驱动视图 ：无需手动操作 DOM，只需维护数据，页面自动同步更新，开发效率提升 10 倍；✅ 组件化开发 ：将页面拆分为独立的「组件」（如登录组件、列表组件、按钮组件），一次封装、多次复用，代码更整洁；✅ 生态完善：配套路由、状态管理、UI 库等工具，一站式搞定前端所有开发需求，适配从简单页面到大型项目的所有场景。

💡 核心结论：原生 JS 是前端基础，Vue 是企业级前端开发的标准工具，学会 Vue 才能胜任前端工程师岗位。

✅ 一、核心知识点精讲（模块 1）：Vue 快速入门 ------ 环境搭建 + 核心基础语法

✅ 1. Vue 两种开发方式（按需选择，无缝衔接）

Vue 提供 2 种开发模式，兼顾「新手快速入门」和「企业工程化开发」，本课先学CDN 方式快速上手核心语法 （无需配置环境），再讲Vue 脚手架工程化开发（企业实战标配）。

✔️ 方式 1：CDN 引入（新手首选，5 分钟上手，无配置）

直接在 HTML 文件中引入 Vue 的 CDN 链接，即可编写 Vue 代码，完全兼容原生 HTML/CSS，零基础友好，适合入门学习。

html

预览

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue入门- CDN方式</title>
    <!-- 1. 引入Vue的CDN链接（直接复制即可使用） -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- 2. Vue挂载容器：所有Vue语法必须写在该容器内 -->
    <div id="app">
        <!-- 3. Vue插值表达式：{{ 变量/表达式 }} 渲染数据 -->
        <h1>Hello {{ msg }}</h1>
        <p>计算结果：{{ 10 + 20 }}</p>
        <p>用户名：{{ user.name }}</p>
    </div>

    <script>
        // 4. 创建Vue实例（核心）
        new Vue({
            el: "#app",  // 绑定挂载容器（对应上面的id="app"）
            data: {      // 存储页面所有数据，核心：数据驱动视图
                msg: "Vue！",
                user: {
                    name: "全栈学习者",
                    age: 20
                }
            }
        })
    </script>
</body>
</html>

✅ 运行效果：页面自动渲染出变量数据，无需任何 DOM 操作，这就是「数据驱动视图」的核心体现。

✔️ 方式 2：Vue 脚手架（Vue-CLI）------ 企业级工程化开发（重点）

CDN 适合入门，Vue 脚手架是企业开发的标准方式，提供标准化项目结构、热更新、打包部署等全套工程化能力，步骤如下（全程命令行操作）：

bash

运行

复制代码

# 1. 全局安装Vue脚手架（电脑仅需安装一次）
npm install -g @vue/cli

# 2. 新建Vue项目（执行后按提示选择「默认Vue2」即可）
vue create vue-demo

# 3. 进入项目目录
cd vue-demo

# 4. 启动项目（启动后访问 http://localhost:8080 即可）
npm run serve

✅ 脚手架项目标准结构（企业必懂）：

plaintext

复制代码

vue-demo/
├── public/        # 静态资源（图片、图标）
├── src/           # 核心源码目录（所有开发都在这里）
│   ├── components/ # 组件目录（存放所有自定义组件，核心）
│   ├── views/      # 页面目录（存放页面级组件）
│   ├── App.vue     # 根组件（所有组件的入口）
│   └── main.js     # 项目入口文件（挂载Vue）
└── package.json   # 项目依赖配置文件

✅ 2. Vue 核心语法 ------ 指令系统（前端开发效率核心，必背）

Vue指令是带有 v- 前缀的特殊标签属性，是 Vue 操作页面、实现逻辑的核心，无需写原生 JS，直接在标签中使用，覆盖 90% 的前端开发场景，以下是 6 个高频核心指令，学完即可开发基础页面。

✅ 核心原则：所有指令的「值」均为 Vue 实例中的数据 / 表达式，完全实现「数据与视图绑定」。

✔️ 指令 1：v-bind → 动态绑定标签属性（简写 `:`）

作用：将 Vue 中的数据，动态绑定到 HTML 标签的任意属性（如 src、class、style、href），数据变化，属性自动更新。

html

预览

复制代码

<div id="app">
    <!-- 完整写法 v-bind:属性名 -->
    <img v-bind:src="imgUrl" alt="图片">
    <!-- 简写 :属性名（企业开发首选，更简洁） -->
    <a :href="linkUrl">点击跳转</a>
</div>
<script>
new Vue({
    el: "#app",
    data: {
        imgUrl: "https://img.xxx.com/logo.png",
        linkUrl: "http://127.0.0.1:5000/api/user"
    }
})
</script>

✔️ 指令 2：v-model → 双向数据绑定（表单开发必备）

作用：仅适用于表单元素（input、select、textarea），实现「表单值 ↔ Vue 数据」双向同步：表单输入变化 → 数据自动更新；数据变化 → 表单值自动更新。

💡 核心价值：原生 JS 需要手动监听表单变化、赋值，Vue 用 v-model 一行搞定，是表单开发的杀手锏！

html

预览

复制代码

<div id="app">
    <p>你输入的用户名：{{ username }}</p>
    <!-- 双向绑定：输入框内容变化，username自动同步 -->
    <input type="text" v-model="username" placeholder="请输入用户名">
    <br>
    <input type="password" v-model="password" placeholder="请输入密码">
</div>
<script>
new Vue({
    el: "#app",
    data: {
        username: "",
        password: ""
    }
})
</script>

✔️ 指令 3：v-on → 事件绑定（简写 `@`）

作用：给 HTML 标签绑定事件（如点击、鼠标移入、键盘按下），触发事件后执行 Vue 中的方法，替代原生 JS 的 onclick。

html

预览

复制代码

<div id="app">
    <!-- 完整写法 v-on:事件名 -->
    <button v-on:click="sayHello">点击打招呼</button>
    <!-- 简写 @事件名（企业开发首选） -->
    <button @click="addNum">点击计数 {{ num }}</button>
</div>
<script>
new Vue({
    el: "#app",
    data: { num: 0 },
    methods: { // 存放所有事件方法，与data同级
        sayHello() {
            alert("Hello Vue！");
        },
        addNum() {
            this.num += 1; // this代表Vue实例，访问data中的数据
        }
    }
})
</script>

✔️ 指令 4/5：v-if + v-for → 分支判断 + 循环渲染（页面逻辑核心）

✅ v-if：根据数据判断「标签是否渲染」，满足条件显示，不满足隐藏（直接移除 DOM）；✅ v-for：根据数组 / 对象循环渲染标签，实现列表、表格等批量数据展示，是前端最常用指令。

html

预览

复制代码

<div id="app">
    <!-- v-if：判断是否登录，展示不同内容 -->
    <div v-if="isLogin">欢迎你，{{ username }}！</div>
    <div v-else>请先登录</div>

    <!-- v-for：循环渲染用户列表（核心：key值必须唯一） -->
    <h3>用户列表</h3>
    <ul>
        <li v-for="(item, index) in userList" :key="index">
            序号：{{ index+1 }} → 姓名：{{ item.name }}，年龄：{{ item.age }}
        </li>
    </ul>
</div>
<script>
new Vue({
    el: "#app",
    data: {
        isLogin: true,
        username: "管理员",
        userList: [ // 模拟后端返回的用户列表数据
            { name: "小明", age: 20 },
            { name: "小红", age: 21 },
            { name: "小刚", age: 22 }
        ]
    }
})
</script>

✅ 二、核心知识点精讲（模块 2）：Vue 组件化开发 ------ 前端工程化灵魂（重中之重）

✅ 1. 组件化核心认知（必须理解）

✔️ 什么是组件？

组件是页面中可复用的独立模块，一个页面可以拆分为多个组件，比如「导航栏组件、登录组件、列表组件、底部组件」，组件可独立开发、独立维护、多次复用。

✅ 生活类比：页面 = 电脑，组件 = 键盘、鼠标、屏幕、主机；电脑由多个配件组装而成，页面由多个组件拼接而成。

✔️ 组件化的核心价值（企业开发必备）

✅ 代码复用：相同功能的模块封装为组件，不用重复编写，比如「按钮组件」可在全站复用；✅ 代码解耦：页面按功能拆分，每个组件只负责自己的逻辑，代码更清晰，便于团队协作；✅ 易维护：修改某个组件，仅影响该组件本身，不会波及整个页面，大幅降低维护成本。

✅ 2. Vue 组件开发 3 种方式（从易到难，全覆盖）

✔️ 方式 1：全局组件（注册后全站可用，适合通用组件）

全局组件通过 Vue.component() 注册，注册后可在任意 Vue 挂载容器中使用，无作用域限制，适合开发「通用组件」（如按钮、弹窗、导航）。

html

预览

复制代码

<div id="app">
    <!-- 直接使用自定义组件（标签名就是组件名） -->
    <my-button></my-button>
    <user-card></user-card>
</div>
<script>
// 1. 注册全局组件：Vue.component(组件名, 组件配置)
Vue.component("my-button", {
    // template：组件的HTML结构（必须有一个根标签包裹）
    template: `<button @click="btnClick" style="background: blue; color: white; padding: 8px;">
        自定义全局按钮
    </button>`,
    methods: {
        btnClick() {
            alert("全局按钮被点击！");
        }
    }
})

// 2. 带数据的全局组件（用户卡片组件）
Vue.component("user-card", {
    template: `<div style="border:1px solid #ccc; padding:10px; margin:10px;">
        <h4>用户卡片</h4>
        <p>姓名：{{ name }}</p>
        <p>年龄：{{ age }}</p>
    </div>`,
    data() { // 组件的data必须是函数，返回对象（核心规则）
        return {
            name: "全局组件用户",
            age: 20
        }
    }
})

// 创建Vue实例
new Vue({ el: "#app" })
</script>

✔️ 方式 2：局部组件（仅当前 Vue 实例可用，适合页面专属组件）

局部组件在 Vue 实例的 components 中注册，仅能在当前挂载容器内使用，作用域隔离，是企业开发中最常用的组件方式，适合开发「页面专属组件」。

html

预览

复制代码

<div id="app">
    <!-- 仅能在当前#app容器中使用 -->
    <local-list></local-list>
</div>
<script>
// 1. 定义局部组件（单独声明）
const LocalList = {
    template: `<ul>
        <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul>`,
    data() {
        return {
            list: [
                { id:1, title: "局部组件列表1" },
                { id:2, title: "局部组件列表2" }
            ]
        }
    }
}

// 2. 在Vue实例中注册局部组件
new Vue({
    el: "#app",
    components: { // 注册局部组件，键值对形式
        LocalList // 简写：组件名与变量名一致
    }
})
</script>

✔️ 方式 3：父子组件传参（props）------ 组件通信核心（企业必学）

组件之间并非孤立，父组件向子组件传递数据 是最常见的组件通信场景，Vue 通过 props 实现父子组件传参，核心流程：父组件绑定数据 → 子组件通过 props 接收数据。

💡 核心规则：子组件不能直接修改props 接收的数据，仅能使用，保证数据单向流动（Vue 核心原则）。

html

预览

复制代码

<div id="app">
    <!-- 父组件：通过属性绑定，向子组件传递数据 -->
    <son-component :user-info="parentUser" :msg="parentMsg"></son-component>
</div>
<script>
// 子组件
const SonComponent = {
    // 子组件：通过props接收父组件传递的数据（数组/对象形式）
    props: ["userInfo", "msg"], // 数组形式：仅声明接收的属性名
    // props对象形式（推荐，可指定数据类型、默认值，做参数校验）
    // props: {
    //     userInfo: Object, // 指定类型为对象
    //     msg: { type: String, default: "默认消息" } // 指定类型+默认值
    // },
    template: `<div style="border:1px solid red; padding:10px;">
        <h4>子组件接收的数据</h4>
        <p>父组件消息：{{ msg }}</p>
        <p>用户名：{{ userInfo.name }}</p>
    </div>`
}

// 父组件（Vue实例）
new Vue({
    el: "#app",
    components: { SonComponent },
    data: {
        parentMsg: "我是父组件传递的消息",
        parentUser: { name: "父组件用户", age: 30 }
    }
})
</script>

✅ 三、核心知识点精讲（模块 3）：Vue 整合 Axios------ 对接 Python 后端（全栈联动闭环）

本课最终目标是「Vue 前端 ↔ Python 后端」无缝联动，Vue 中整合 Axios 是全栈开发的必备技能，无需写原生 AJAX，用 Axios 实现异步请求，完美对接我们前 3 课开发的 Python 后端接口。

✅ 1. Vue 中 Axios 的 2 种引入方式

✔️ 方式 1：CDN 引入（适配 CDN 版 Vue，入门首选）

html

预览

复制代码

<div id="app">
    <button @click="getUserList">请求后端用户列表</button>
    <ul>
        <li v-for="user in userList" :key="user.id">{{ user.username }}</li>
    </ul>
</div>
<!-- 1. 引入Vue → 2. 引入Axios -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
    el: "#app",
    data: { userList: [] },
    methods: {
        async getUserList() {
            // 3. 发送请求，对接Python后端接口（前3课开发的接口）
            const res = await axios.get("http://127.0.0.1:5000/api/user/list");
            if (res.data.code === 200) {
                this.userList = res.data.data; // 将后端数据赋值给Vue数据，页面自动渲染
            }
        }
    }
})
</script>

✔️ 方式 2：npm 安装（适配 Vue 脚手架，企业开发首选）

bash

运行

复制代码

# 1. 在Vue脚手架项目中安装Axios
npm install axios

复制代码

// 在src/main.js中全局配置Axios
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios // 全局挂载，所有组件可通过this.$axios使用

// 在组件中使用（示例）
export default {
  methods: {
    async login() {
      const res = await this.$axios.post("/api/login", {
        username: "admin",
        password: "123456"
      })
      console.log(res.data)
    }
  }
}

✅ 四、今日核心实战（必做，全栈联动综合案例）

✅ 实战需求：Vue 版「用户管理前端页面」（整合本课所有知识点）

✔️ 实战目标

基于 Vue+Axios 开发前端页面，无缝对接第 1 课的 Python Flask 后端接口，实现「用户登录、用户列表查询、退出登录」完整功能，落地「Vue 组件化 + 数据驱动 + 前后端联动」核心思想。

✔️ 核心技术栈

Vue 核心指令（v-model/v-on/v-for/v-if） + 局部组件开发 + Axios 请求 + 前后端跨域适配

✔️ 完整可运行代码（CDN 版，直接复制即可运行）

html

预览

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue用户管理页面（第4课实战）</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        .container { width: 800px; margin: 50px auto; }
        .login-box, .list-box { padding: 20px; border:1px solid #ccc; margin-bottom: 20px; }
        input { width: 200px; padding: 8px; margin: 5px; }
        button { padding: 8px 16px; margin: 5px; cursor: pointer; }
        ul { margin-top: 10px; list-style: none; }
        li { padding: 8px; border-bottom:1px solid #eee; }
    </style>
</head>
<body>
    <div id="app" class="container">
        <!-- 登录组件（局部组件） -->
        <login-form v-if="!isLogin" @login-success="getUserList"></login-form>
        <!-- 用户列表组件（局部组件） -->
        <user-list v-else :user-list="userList" @logout="logout"></user-list>
    </div>

    <script>
        // 1. 定义登录组件
        const LoginForm = {
            template: `<div class="login-box">
                <h3>用户登录</h3>
                <input type="text" v-model="username" placeholder="请输入用户名">
                <input type="password" v-model="password" placeholder="请输入密码">
                <button @click="login">登录</button>
            </div>`,
            data() { return { username: "", password: "" } },
            methods: {
                async login() {
                    const res = await axios.post("http://127.0.0.1:5000/api/login", {
                        username: this.username,
                        password: this.password
                    });
                    if (res.data.code === 200) {
                        alert("登录成功！");
                        this.$emit("login-success"); // 向父组件传递登录成功事件
                    } else { alert(res.data.msg); }
                }
            }
        }

        // 2. 定义用户列表组件
        const UserList = {
            props: ["userList"],
            template: `<div class="list-box">
                <h3>用户列表 <button @click="handleLogout">退出登录</button></h3>
                <ul>
                    <li v-for="(user, index) in userList" :key="index">
                        {{ index+1 }}. 用户名：{{ user.username }} → 昵称：{{ user.nickname }}
                    </li>
                </ul>
            </div>`,
            methods: {
                handleLogout() { this.$emit("logout"); }
            }
        }

        // 3. 根Vue实例
        new Vue({
            el: "#app",
            components: { LoginForm, UserList }, // 注册局部组件
            data: { isLogin: false, userList: [] },
            methods: {
                async getUserList() {
                    this.isLogin = true;
                    const res = await axios.get("http://127.0.0.1:5000/api/user/list");
                    this.userList = res.data.data;
                },
                async logout() {
                    await axios.get("http://127.0.0.1:5000/api/logout");
                    this.isLogin = false;
                    this.userList = [];
                    alert("退出成功！");
                }
            }
        })
    </script>
</body>
</html>

✔️ 实战效果

✅ 未登录时显示登录表单，输入账号密码→请求后端登录接口→登录成功后显示用户列表；✅ 登录后可点击「退出登录」→ 请求后端退出接口→返回登录页面；✅ 全程无页面刷新，实现「异步请求 + 数据驱动视图」的 Vue 核心特性；✅ 完美对接 Python 后端，实现全栈联动闭环。

✅ 五、课后作业（分层练习，巩固进阶）

📌 基础作业（必做，巩固本课核心）

基于本课实战代码，新增「用户注册」功能，开发注册组件，对接后端 /api/register 接口；
用 Vue 的 v-for 指令渲染「商品列表」，模拟后端商品数据，实现商品列表展示；
总结 Vue 组件化开发的 3 个核心优势，手写 Vue6 个高频指令的作用。

📌 进阶作业（选做，企业级能力拓展）

使用 Vue 脚手架搭建项目，重构本课实战的「用户管理页面」，按「组件化 + 工程化」规范开发；
实现父子组件的双向通信（父传子 props + 子传父 $emit），开发一个「弹窗组件」，点击按钮弹出 / 关闭弹窗；
在 Vue 中配置 Axios 请求拦截器，统一添加请求头（如 Token），适配后端 JWT 认证（预习明日内容）。

✅ 课程小结

Vue 的核心是「数据驱动视图 」和「组件化开发」，告别原生 JS 的 DOM 操作，实现前端工程化开发；
Vue 指令是前端开发效率的核心，v-bind、v-model、v-on、v-if、v-for 覆盖 90% 的基础开发场景；
组件化是前端大型项目的标配，全局组件适合通用模块，局部组件适合页面专属模块，props 实现父子传参；
Vue 整合 Axios 是全栈联动的关键，可无缝对接 Python 后端接口，实现数据互通；
学习 Vue 的核心：不要纠结 DOM 操作，专注维护数据，数据变化，页面自动更新。

✅ 明日预告

第 5 课：后端工程化进阶 ------Python 项目分层架构 + 中间件 + 日志 / 异常统一处理，打造符合企业标准的高可用后端项目（从「功能实现」到「规范落地」的升级）。

第 4 课：前端工程化进阶 ——Vue 核心语法 + 组件化开发（前端能力质的飞跃）

✅ 今日学习目标

✅ 课前铺垫：为什么要学 Vue？（原生 JS VS Vue 核心差异）

✅ 一、核心知识点精讲（模块 1）：Vue 快速入门 ------ 环境搭建 + 核心基础语法

✅ 1. Vue 两种开发方式（按需选择，无缝衔接）

✔️ 方式 1：CDN 引入（新手首选，5 分钟上手，无配置）

✔️ 方式 2：Vue 脚手架（Vue-CLI）------ 企业级工程化开发（重点）

✅ 2. Vue 核心语法 ------ 指令系统（前端开发效率核心，必背）

✔️ 指令 1：v-bind → 动态绑定标签属性（简写 :）

✔️ 指令 2：v-model → 双向数据绑定（表单开发必备）

✔️ 指令 3：v-on → 事件绑定（简写 @）

✔️ 指令 4/5：v-if + v-for → 分支判断 + 循环渲染（页面逻辑核心）

✅ 二、核心知识点精讲（模块 2）：Vue 组件化开发 ------ 前端工程化灵魂（重中之重）

✅ 1. 组件化核心认知（必须理解）

✔️ 什么是组件？

✔️ 组件化的核心价值（企业开发必备）

✅ 2. Vue 组件开发 3 种方式（从易到难，全覆盖）

✔️ 方式 1：全局组件（注册后全站可用，适合通用组件）

✔️ 方式 2：局部组件（仅当前 Vue 实例可用，适合页面专属组件）

✔️ 方式 3：父子组件传参（props）------ 组件通信核心（企业必学）

✅ 三、核心知识点精讲（模块 3）：Vue 整合 Axios------ 对接 Python 后端（全栈联动闭环）

✅ 1. Vue 中 Axios 的 2 种引入方式

✔️ 方式 1：CDN 引入（适配 CDN 版 Vue，入门首选）

✔️ 方式 2：npm 安装（适配 Vue 脚手架，企业开发首选）

✅ 四、今日核心实战（必做，全栈联动综合案例）

✅ 实战需求：Vue 版「用户管理前端页面」（整合本课所有知识点）

✔️ 实战目标

✔️ 核心技术栈

✔️ 完整可运行代码（CDN 版，直接复制即可运行）

✔️ 实战效果

✅ 五、课后作业（分层练习，巩固进阶）

📌 基础作业（必做，巩固本课核心）

📌 进阶作业（选做，企业级能力拓展）

✅ 课程小结

✅ 明日预告

✔️ 指令 1：v-bind → 动态绑定标签属性（简写 `:`）

✔️ 指令 3：v-on → 事件绑定（简写 `@`）