首页  思维导图  详情

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选项中定义样式对象数组

样式绑定

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

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

计算属性|computed

getter和setter

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

计算属性computed的简写

计算属性computed与方法methods对比

计算属性缓存

1.注册过滤器

2.使用过滤器

过滤器|filters

使用语法

deep选项

案例05：速度公式的切换

监听属性应用

监听属性|watch

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

使用 v-on 指令

事件监听

JS语句形式

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

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

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

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

子主题

事件处理方法

❗如果事件绑定的函数是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指令

其他指令补充

注册局部自定义指令

注册全局自定义指令

注册指令注意事项

注册自定义指令

钩子函数

数值常量

绑定字符串常量

绑定对象字面量

自定义指令的绑定值

自定义指令

其他指令和自定义指令

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

构建用户界面

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

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

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

渐进式

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

框架

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

Vue是什么

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

Angular

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

React

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

Vue

前端框架

为什么是Vue

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

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

Vue2特点

性能提升

内核体积更小

Vue3特点

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

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

轻量级

⭕数据驱动视图：在使用Vue的⻚面中，Vue会监听数据的变化，从而驱动视图自动重新渲染⻚面的结构优点：当页面结构发生变化的时候，页面会自动重新进行渲染❗数据驱动视图是单向的数据绑定

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

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

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

响应式编程

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

组件化开发：

应用指令：

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

插件化开发：

Vue的特点

Vue2还是Vue3

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

其中组成：M：Model，模型V：View，视图VM：ViewModel，视图-模型，起到桥梁的作用：它响应用户事件并向模型层发送请求模型层返回的数据通过它数据绑定在视图中显示

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

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

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

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

MVVM工作原理：

MVVM

①引入Vue的脚本文件

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

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

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

实现的步骤总结

初试用Vue