首页  思维导图  详情



 



Vue思维导图知识梳理

2022-06-17 16:54:40   89  举报





AI智能生成

vue前端框架知识梳理

2022学霸笔记

模板推荐

作者其他创作

大纲/内容

Vue的特点

遵循MVVM模式

编码简洁，体积小，运行效率高，适合移动/PC端开发

它本身只关注UI，可以引入其它第三方库开发项目

借鉴 Angular 的模板和数据绑定技术

借鉴 React 的组件化和虚拟DOM技术

Vue周边库

vue-cli：vue脚手架

vue-resource

axios

vuex：状态管理

element-ui：基于vue的UI组件库（PC端）

vue-router：路由

JS表达式和JS代码（语句）

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

js代码（语句）（1）if(){}（2）for(){}

模板语法

差值语法

功能：用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）

Vue中有很多的指令，且形式都是：v-

数据绑定

双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。

双向绑定一般都应用在表单元素上（如：input、select等）

v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

单向绑定（v-bind）：数据只能从data流向页面。

MVVM模型

M：模型(Model)：data中的数据

V：视图(View)：Vue模板

VM：视图模型(ViewModel)：Vue实例对象（绑定数据，dom监听）

事件

事件处理

使用 v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

事件的回调需要配置在methods对象中,最终会再vm上；

methods中配置的函数，不要用箭头函数！否则this就不是vm了而是window；

methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；

@click=“demo” 和 @click="demo(e v e n t ) " 效果一致，前者默认参数就是事件对象，后者要用 event)" 效果一致，前者默认参数就是事件对象，后者要用event)"效果一致，前者默认参数就是事件对象，后者要用event才能生成事件对象，并且可以传多个参数；

事件修饰符

prevent，阻止默认事件（常用）

stop，阻止默认事件（常用）

once，事件只触发一次（常用）

captur，使用事件的捕获模式

self，只有event.target是当前操作的元素时才触发事件

passive，先执行默认行为，后执行回调函数

计算属性

Vue官方建议组件模板应该质包含简单的表达式，复杂的表达式则应该重构为计算属性或方法

对于Vue来说，data里的配置项就是属性。而计算属性，就是拿着写完的属性去加工计算，生成一个全新的属性。

差值语法实现

methods实现，注意methods方法在绑定事件的时候才可以省略小括号，在差值里不能

methods函数出现几次就调用几次，效率比较低。

computed实现

computed有缓存机制（复用），效率更高、调试方便（devtools上会有一个computed的分类）。

监视

监视属性watch

当被监视的属性变化时，回调函数自动调用，进行相关操作；

监视的属性必须存在，才能进行监视！！（除了data属性，computed属性也能监视）

监视的两种写法

new Vue时传入watch配置；

通过vm.$watch监视；

watch配置属性

immediate (立即的) 初始化时让handlder调用一下

handler(newVal, oldVal) 当监视的属性发生改变的时候调用，参数可以拿到改变前后的值

deep 深度监听,可以监测多层级数据的改变

深度监视

Vue中的watch默认不监测对象内部值的变化（监测一层)

配置deep:true可以监测对象内部值变化（监测多层）

Vue默认是可以监视到多层级数据的改变的（修改number.a页面发生改变可以看出）。但是watch属性默认是不可以的，要想可以就得打开深度监视（为了效率）。

使用watch时根据数据的具体结果，决定是否采用深度监视。

watch对比computed

computed能完成的功能，watch都能完成。

watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。（点击按钮让a过一秒+1,）

所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。

所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

渲染

v-if，用来控制页面元素是否展示

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

v-show

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

v-show底层指令其实就是调整display:none

v-if和template

如果需要频繁切换 v-show 较好

当条件不成立时, v-if 的所有子节点不会解析(项目中使用)

生命周期

new Vue()

初始化事件(.once事件)和生命周期

编译模版

挂载Dom -> 渲染

更新 -> 渲染

卸载

回调函数

是你留个处理方法给事件，事件发生了以后会自动执行你留下调处理方法

勾子函数

是好比找了个代理，监视事件是否发生，如果发生了这个代理就执行你的事件处理方法；在这个过程中，代理就是钩子函数

组件化编程

组件的思想，其实就封装。能很好的实现代码复用技术

methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；

组件的定义:实现应用中局部功能代码和资源的集合

template，template用来定义html结构，其实``为模板字符串。它可以随意的换行

Vue中使用组件的三大步骤：

定义组件(创建组件)

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样

组件中定义的data必须写成函数

注册组件

局部注册：靠new Vue的时候传入components选项

全局注册：靠Vue.component(‘组件名’,组件)

使用组件(写组件标签)

 Collect

Get Started

思维导图知识框架总结分享

 Collect

Get Started

培训与开发思维导图

 Collect

Get Started

Vue项目实战

 Collect

Get Started

AI生成-《刻意练习》内容大纲思维导图





0 条评论

下一页