首页  思维导图  详情

Vue初学知识思维导图

2024-04-24 12:00:57   0  举报





仅支持查看

AI智能生成

一个为了期中考而总结的思维导图，内容正在完善！！！！

计划总结

作者其他创作

大纲/内容

列表渲染指令

v-for指令的使用基础

应用v-for指令遍历数组

循环遍历数组值

循环遍历数组值和索引

在<template>元素中使用v-for

key属性

应用v-for指令遍历对象

应用v-for指令遍历字符串

应用v-for指令遍历整数

v-for指令的使用应用

实现九九乘法表

实现成绩单

样式绑定

class属性绑定

对象类型使用语法

非内联绑定

数组类型使用语法

普通数组类型

在数组中使用条件运算符

在数组中使用对象

内联样式绑定

对象语法

内联绑定

非内联绑定

直接在元素中绑定样式对象

在data选项中定义样式对象数组

计算属性、过滤器和监听属性

计算属性|computed

👉问题：methods中的函数只要⻚面渲染就一定会执行，重复性的计算会消耗不必要的性能

💡解决：使用计算属性来解决使用methods来实现名字处理示例图

getter和setter

计算属性缓存

❓计算属性computed何时会被执行?

计算属性computed的简写

计算属性computed与方法methods对比

过滤器|filters

1.注册过滤器

2.使用过滤器

监听属性|watch

使用语法

deep选项

监听属性应用

案例05：速度公式的切换

事件绑定

事件监听

使用 v-on 指令

事件处理方法

JS语句形式

定义在methods选项中的方法形式

❗如果事件绑定的函数是methods中的函数，在绑定时函数后面的()，在没有传参数时，写不写作用效果一致且正常

案例02：点击按钮自加10或自减10

📌案例03：实现动态改变图片透明度的功能

子主题

事件对象

❗如果事件绑定的函数是methods中的函数，且如果函数后面写()，此时默认是直接获取不到事件对象本身的

修饰符

事件修饰符

.prevent修饰符

.stop修饰符

.self修饰符

.once修饰符

.capture修饰符

按键修饰符

按键码

常用按键的别名

❗注意：Vue.js所提供的常用按键的别名与对应的事件对象中code值是有区别的

❗对于特殊按键，例如键盘中的esc、enter、delete等功能按键，为了更好的兼容性，应该首选内置别名

系统修饰符

.ctrl修饰符

.alt修饰符

.shift修饰符

鼠标按钮修饰符

.left

.right

.middle

其他指令和自定义指令

其他指令补充

v-text指令

v-html指令

v-pre指令

v-once指令

自定义指令

注册自定义指令

注册局部自定义指令

注册全局自定义指令

注册指令注意事项

钩子函数

自定义指令的绑定值

数值常量

绑定字符串常量

绑定对象字面量

Vue2基础概念

Vue是什么

Vue是一套构建用户界面的渐进式JavaScript框架

构建用户界面

拿到手的数据用某种方式把数据展示到合适的位置，让用户能够看得到

渐进式

逐渐、递进；本身的Vue是很小的，为轻量级，提供基本基础功能，但是它可以提供各种更高级的插件来完成其他各种的功能

简单应用：只需要一个轻量小巧的核心库

复杂应用：可以引用各式各样的Vue插件

框架

可以理解为抽象出来的一套现成、较为完整的解决问题的方案，但并不是完全健全贴合项目的，只是一个半成品，使用框架就必须遵守框架的规范去编写自己的业务功能

为什么是Vue

前端框架

Angular

入门门槛较高，并且国内市场占率较低;
不否认本身非常优秀的框架;

React

Rcact在国内外的市场占有率都是非常高的;
作为前端工程师也是必须学习的一个框架:

Vue

Vuc在国内市场占有率是最高的;
几乎所有的前端岗位都会对Vue有要求;

Vue2还是Vue3

Vue2特点

最终最新⻓期稳定版本：2.7.16

生态系统完备，文档参考⻬全

Vue3特点

性能提升

内核体积更小

Vue的特点

Vue的主要特点包括组件化、数据驱动和虚拟DOM

轻量级

文件本身的大小较小，没有其他的依赖

响应式编程

⭕数据驱动视图：
在使用Vue的⻚面中，Vue会监听数据的变化，从而驱动视图自动重新渲染⻚面的结构

优点：当页面结构发生变化的时候，页面会自动重新进行渲染

❗数据驱动视图是单向的数据绑定

⭕双向数据绑定：
Vue最主要的特点之一就是双向的数据绑定
Vue应用的是一个响应式的数据绑定，在建立绑定后，DOM将和Vue对象中的数据保持同步

两个方向上：
JS业务逻辑中数据的变化，会自动渲染到页面上⻚面上表单采集的数据发生变化时，
会被Vue自动获取到，并更新到JS业务逻辑数据之中

双向数据绑定
例如，在填写表单的时候，双向数据绑定可以帮助开发人员在不操作DOM的前提下，
自动把用户填写的内容同步到数据源中

组件化开发：

将任意封装好的代码注册成标签，以提高代码的复用，
即允许将网⻚功能进行封装自定义HTML标签，复用时书写自定义标签名即可，
同时，组件不仅可以封装结构，还可以封装样式与逻辑代码，
大大提交了开发效率与可维护性

应用指令：

指令主要包括内置指令和自定义指令，指令提供了一些特殊的特性，
将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为,
Vue当中提供了一系列不同功能的指令，特点是都是以`v-`开头

插件化开发：

可以非常方便地加载对应的插件来实现路由、Ajax和状态管理等功能

MVVM

MVVM是MVC逐渐演化出来的各种形态中的一种，属于“MV*”模式

其中组成：

M：Model，模型
V：View，视图
VM：ViewModel，视图-模型，起到桥梁的作用：

它响应用户事件并向模型层发送请求
模型层返回的数据通过它数据绑定在视图中显示

MVVM工作原理：

ViewModel作为MVVM的核心，是它把当前⻚面的数据源（Model）和⻚面结构（View）连接在了一起

当数据发生改变时，会被ViewModel监听到，VM会根据最新的数据源自动更新⻚面的结构

当表单元素的值发生变化时，也会被ViewModel监听到，VM会把变化过后最新的值自动同步到Model数据源中

❗MVVM是Vue实现数据驱动视图和双向数据绑定的核心原理

初试用Vue

实现的步骤总结

①引入Vue的脚本文件

②准备好需要使用Vue的容器，也就是在⻚面中声明一个将要被Vue所控制的DOM区域

③创建一个对应的Vue实例对象，并传入配置对象

④书写需要的Vue相关的模板代码