千锋 Vue 详细笔记整理

embelfe_segge

于 2022-03-06 04:47:38 发布

阅读量8k

点赞数 27

本文链接：https://blog.csdn.net/embelfe_segge/article/details/123305070

版权

本文是根据千锋涛哥的SpringBoot+Vue+前后端分离项目课程整理的Vue笔记，涵盖Vue的简介、入门使用、语法、实例、计算属性、侦听器、class与style绑定、条件与列表渲染、事件处理、组件、axios异步通信和路由等全面内容，深入探讨Vue的使用和实践。

摘要由CSDN通过智能技术生成

视频笔记是根据B站千锋涛哥 - SpringBoot+vue+前后端分离项目《锋迷商城》实战课-完结版进行整理的

笔记可上 gitee仓库自取

千锋 Vue 笔记整理

一、vue 的简介
- 1.1 使用 JQuery 的复杂性问题
- 1.2 VUE 简介
- - 1.2.1 前端框架
  - 1.2.2 MVVM
二、 vue 入门使用
- 2.1 vue 的引入
- 2.2 入门案例 – Hello World
三、 vue 的语法
- 3.1 基本类型数据和字符串
- 3.2 对象类型数据
- 3.3 条件 v-if
- 3.4 循环 v-for
- 3.5 绑定标签属性 v-bind
- 3.6 表单标签的双向绑定 v-model
四、vue 实例
- 4.1 vue 实例的生命周期
- 4.2 钩子函数
五、计算属性和侦听器
- 5.1 计算属性
- 5.2 侦听器
六、class 与 style 绑定
- 6.1 class 绑定
- 6.2 style 绑定
七、条件与列表渲染
- 7.1 条件渲染
- 7.2 列表渲染
八、事件处理
- 8.1 使用 JS 函数传值
- 8.2 使用 dataset 对象传值 `（推荐）`
- 8.3 混合使用
- 8.4 事件修饰符
- - 8.4.1 事件修饰符使用示例
  - 8.4.2 事件修饰符
- 8.5 按键修饰符
- 8.6 系统修饰符
九、表单输入绑定
十、组件
- 10.1 组件介绍及示例
- - 10.1.1 组件注册
  - 10.1.2 组件引用
- 10.2 组件注册
- 10.3 组件通信
- 10.4 组件插槽
十一、axios 异步通信
- 11.1 axios 介绍
- 11.2 axios 入门使用
- 11.3 axios 异步请求方法
- 11.4 并发请求
- 11.5 箭头函数
- - 11.5.1 axios 回调函数的参数 res
  - 11.5.2 箭头函数
十二、路由 router
- 12.1 路由插件的引用
- - 12.1.1 离线
  - 12.1.2 在线 CDN
- 12.2 动态路由匹配
- 12.3 嵌套路由
- 12.4 编程式导航
- 12.5 命名路由
- 12.6 命名视图
- 12.7 重定向
- - 12.7.1 重定向
  - 12.7.2 路由别名
- 12.8 路由组件传参

一、vue 的简介

在这里插入图片描述

1.1 使用 JQuery 的复杂性问题

使用 JQuery 进行前后端分离开发，既可以实现前后端交互 (ajax) ，又可以完成数据渲染
存在的问题： JQuery 需要通过 HTML 标签拼接、DOM 节点操作完成数据的显示，开发效率低且容易出错，渲染效率较低
vue 是继 JQuery 之后的又一优秀的前端框架：专注于前端数据的渲染 ———— 语法简单、渲染效率高

1.2 VUE 简介

1.2.1 前端框架

前端三框架：HTML、CSS、JavaScript
- HTML 决定网页结构
- CSS 决定显示效果
- JavaScript 决定网页功能 (交互、数据显示)
UI 框架：(只提供样式、显示效果)
- Bootstrap
- amazeUI
- Layui
JS 框架：
- JQuery (JQuery UI)
- React
- angular
- nodejs ---- 后端开发
- vue 集各种前端框架的优势发展而来

1.2.2 MVVM

项目结构经历的三个阶段：

后端 MVC ：可以理解为单体结构，流程控制是由后端控制器来完成

前端 MVC ：前后端分离开发，后端只负责接收响应请求

MVVM是MVC的增强版，实质上和MVC没有本质区别，只是代码的位置变动而已

MVVM 前端请求后端接口，后端返回数据，前端接收数据，并将接收到的数据设置为 “VM”，HTML 从 vm 取值

M model 数据模型，指的是后端接口返回的数据
V view 视图
VM ViewModel 视图模型数据模型与视图之间的桥梁，后端返回的 model 转换前端所需的 vm，视图层可以直接从 vm 中提取数据

在这里插入图片描述

Model-View-ViewModel —— 概念图

二、 vue 入门使用

Vue (读音 /vju/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.1 vue 的引入

离线引用：下载 vue 的 js 文件，添加到前端项目，在网页中通过 script 标签引用 vue.js 文件
CDN 引用：

直接使用在线 CDN 的方式引入

2.2 入门案例 – Hello World

文本：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：{ {message}}

创建一个 HTML 文件

引入 vue.js 文件

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

示例：

Title

从 0 开始： { {message}}

<script type="text/javascript">
    var vm = new Vue({
        el: '#app-1',
        data: {
            message: 'Hello World!'
        }
    })

</script>

在这里插入图片描述

Mustache 标签将会被替代为对应数据对象上 message property 的值。无论何时，绑定的数据对象上 message property 发生了改变，插值处的内容都会更新。

三、 vue 的语法

3.1 基本类型数据和字符串

<div id="app-2">
    {
  {code}}
    从 0 开始： {
  {message}}
</div>


<script type="text/javascript">
    var vm = new Vue({
        el: '#app-2',
        data: {
            code: 1_3_3,
            message: 'Hello World!'
        }
    })

</script>

在这里插入图片描述

3.2 对象类型数据

支持 ognl 语法

学号：{ {stu.stuNum}}
姓名：{ {stu.stuName}}
性别：{ {stu.stuGender}}
年龄：{ {stu.stuAge}}

在这里插入图片描述

3.3 条件 v-if

v-if : 用来控制切换一个元素是否显示（底层控制是 DOM 元素，操作 DOM）

注：在浏览器中网页打开这个文件 F12，从标签上可以看到没有 stu.stuGender == 'F' 对应的元素。即条件不成立，网页不会渲染该 DOM，连标签都不会有。

<div id="app-4">
    学号：{
  {stu.stuNum}} <br />
    姓名：{
  {stu.stuName}} <br />
    性别：
    <label v-if="stu.stuGender == 'M'">
        男
    </label>
    <label v-if="stu.stuGender == 'F'">
        女
    </label>
    <br />
    年龄：{
  {stu.stuAge}}

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app-4',
        data: {
            stu: {
                stuNum: '10001',
                stuName: '张三',
                stuGender: 'M',
                stuAge: 20
            }
        }
    })

</script>

在这里插入图片描述

3.4 循环 v-for

v-for 指令基于一个数组来渲染一个列表。

在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。

<div id="app-5">
    <table border="1" cellspacing="0" width="400">
        <tr>
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr v-for="(stu, index) in stus">
            <td>{
  {index + 1}}</td>
            <td>{
  {stu.stuNum}}</td>
            <td>{
  {stu.stuName}}</td>
            <td>
                <table v-if="stu.stuGender == 'M'">
                    男
                </table>
                <table v-if="stu.stuGender == 'F'">
                    女
                </table>
            </td>
            <td>{
  {stu.stuAge}}</td>

        </tr>
    </table>

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app-5',
        data: {
            stus: [
                {
                    stuNum: '10001',
                    stuName: '张三',
                    stuGender: 'M',
                    stuAge: 20
                },
                {
                    stuNum: '10002',
                    stuName: '李四',
                    stuGender: 'M',
                    stuAge: 23
                },
                {
                    stuNum: '10003',
                    stuName: '郑红',
                    stuGender: 'F',
                    stuAge: 19
                }
            ]
        }
    })

</script>

在这里插入图片描述

3.5 绑定标签属性 v-bind

v-bind:属性名缩写：:属性名

    </tr>
</table>

序号

学号

姓名

性别

年龄

{ {index + 1}}

{ {stu.stuNum}}

{ {stu.stuName}}

男

女

{ {stu.stuAge}}

在这里插入图片描述

3.6 表单标签的双向绑定 v-model

只能使用在表单输入标签
v-model:value 可以简写为 v-model

双向绑定：{ {message}}

四、vue 实例

每个使用 vue 进行数据渲染的网页文档都需要创建一个 vue 实例 — — ViewModel

4.1 vue 实例的生命周期

vue 实例生命周期 — — vue 实例从创建到销毁的过程

在这里插入图片描述

创建 vue 实例（初始化 data，加载 el）
数据挂载（将 vue 实例 data 中的数据渲染到网页 HTML 标签）
重新渲染（当 vue 的 data 数据发生变化，会重新渲染到 HTML 标签）
销毁实例

创建对象 ---- 属性初始化 ---- 获取属性值 ----- GC 回收

4.2 钩子函数

为了便于开发者在 vue 实例生命周期的不同阶段进行特定的操作，vue 在生命周期四个阶段的前后分别提供了一个函数，这个函数无需开发者调用，当 vue 实例到达生命周期的指定阶段会自动调用对应的函数。

<div id="app-8">
    <label v-once>{
  {message}}</label><br />
    <label>{
  {message}}</label><br />
    <input type="text" v-model="message">

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app-8',
        data: {
            message: 'Hello World!!'
        },
        beforeCreate: function () {
            // 1. data 初始化之前执行，不能操作 data
        },
        create: function () {
            // 2. data 初始化之后执行，模板加载之前，可以修改 / 获取 data 中的值
            console.log(this.message);
            // this.message = 'Hello World!! create(）';
        },
        beforeMount: function () {
            // 3. 模板加载之后，数据初始渲染（挂载）之前，可以修改 / 获取 data 中的值
            // this.message = 'Hello World!!  beforeMount';
        },
        mounted: function () {
            // 4. 数据初始渲染（挂载）之后，可以对 data 中的变量进行修改，但是不会影响 v-once 的渲染
            // this.message = "Hello World!!  mounted";
        },
        beforeUpdate: function () {
            // 5. 数据渲染之后，当 data 中的数据发生变化触发重新渲染，渲染之前执行此函数
            console.log("---" + this.message);
            this.message = 'Hello World!!  beforeUpdate';
        },
        update: function () {
            // 6. data 数据被修改之后，重新渲染到页面之后
            // this.message = "Hello World!!   update";
        },
        beforeDestroy: function () {
            // 7. 实例销毁之前
        },
        destroy: function () {
            // 8. 实例销毁之后
        }
    })

</script>