前端框架——Vue

340.小笔记

(1)当控制台Data中的数据发生改变时,模板要重新解析。

1.Vue特点

(1)采用组件化模式,提高代码复用率,且让代码更好维护。

(2) 声明式编码,让编码人员无需直接操作dom,提高开发效率。

 (3)使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。

Ajax发送请求:

JQuery发送Ajax请求:

 

 Jquery通用方法发送Ajax请求:

 

 axios发送请求:

2.一个Vue实例:

总结: 

 3.模板语法

(1)插值语法:

 (2)指令语法:

使用v-bind: 

4.数据绑定

 5.el与data的两种写法:

el的两种写法:

data的两种写法:

 

 总结:

 6.MVVM模型:

 7.数据代理

1.回顾Object.defineProperty

 getter 和setter

  2.什么是数据代理:

 8.事件处理

 总结:

  9.事件修饰符

 例:

10.键盘事件

 如果需要对tab键设置触发事件,应该设置@keydown.tab="showInfo11"

 11.计算属性:

 实例:

 计算属性的简写方式(只需要get时)

 12.监视属性

简写:

深度监视:

13.watch对比computed:

watch能开异步任务,computed不能开异步任务

 14.绑定样式:

(1)class样式

样例1:

 样例2:

 样例3:

 (2)style样式

 总结:

 15.条件渲染:

v-show  v-if控制后面的内容是否显示

总结:

16. template

template的作用是能够把内容包起来却不影响结构,只能配合v-if使用,不能配合v-show使用

17. 列表渲染 

(1)人员列表_便利数组

 元素的唯一标识key

 (2)遍历对象

 (3)遍历字符串

(4)遍历指定次数

 总结:

18.key的作用与原理:

1.index作为key 当数据顺序改变时会出现问题

 2.遍历列表时的key的作用(id作为key)效率高且数据不会错乱

 

 18.列表过滤

 19.vue检测数据改变原理(对象)

20.Vue.set()

需要当开发结束时,再给代码添加一些属性或者其他,就直接使用Vue.set(),且可实现get和set等

注意:Vue.set只能给Data内的对象追加属性,而不能直接给Data追加属性

 21.vue检测数据改变原理(数组)

数组变更其他方法:

  总结Vue监视数据:

 22.过滤器

 23.内置指令

(1)v-text

(2)v-html!!!

(3)v-cloak

 (4)v-once

(5)v-pre

 (6)自定义指令

指令函数内的this为window

 对象式自定义指令

自定义指令的全局式写法:对象式

 自定义指令的全局式写法:函数式

 自定义指令总结:

 24.生命周期    

 生命周期图示:

 生命周期总结:

25.对组件的理解 

 组件的定义:

 26.组件

 几个注意点:

 VueComponent构造函数

27.一个重要的内置关系

注意:实例的隐式原型等于构造函数的显式原型

28.render函数

29.vue脚手架

 30.ref属性

 31.props属性

 32.mixin 

33.插件

34.TodoList案例总结

35.自定义事件

 解绑自定义事件:

 

36.全局事件总线

设置x:全局所有的vc还有vm全都能看到它!

 ​​​​​​

 使用和销毁x:

 37.消息订阅与发布

需要数据的地方订阅数据,提供数据的地方发布消息!!!!

消息的订阅与取消订阅:

消息的发布:

 总结:

38.动画和过渡

 

39.配置代理

40.插槽

 41.vuex

 

 vuex原理:

 搭建vuex环境:

 

总结:

 41.getters的使用

 42.mapState与mapGetter的用法

  43.mapActions与mapMutations的用法

44.模块化加命名空间

45. 路由

 46. vue-router

 

47. 路由基本使用

 48. 多级路由

 

49.命名路由:

 50.路由的params参数

 

 51.路由的props参数

router-link的replace属性

编程式路由导航

 

 52.路由守卫

 

  

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3是一款流行的前端框架,它的底层原理可以分为以下几个方面: 1. 响应式系统 Vue3的响应式系统通过使用Proxy对象来实现。在数据更新时,它会触发所有依赖该数据的视图更新,从而实现双向数据绑定。具体实现方式是通过使用Object.defineProperty()来劫持数据的getter和setter方法。同时,Vue3还引入了一个新概念——reactive,用于包装响应式数据。这个过程中,它会创建一个WeakMap对象,将原始对象和reactive对象进行映射,从而实现精准地追踪哪些数据是响应式的。 2. 组件系统 Vue3的组件系统采用了Virtual DOM技术。在渲染时,它会将组件渲染成Virtual DOM树,再与旧的Virtual DOM树进行对比,找出需要更新的部分,最后只更新需要更新的部分。这样可以避免频繁更新整个页面,提高渲染效率。Vue3还提供了一个新的API——setup,用于组件的初始化配置。通过setup,可以创建响应式数据、引入其他组件等,使组件的编写变得更加方便。 3. 编译优化 Vue3引入了一个全新的编译器,将模板编译成可执行的JavaScript代码。这个编译器具有更高的性能和更好的错误提示,可以有效地提高应用程序的性能。其中,Vue3引入了一种新的静态提升技术,它能够将静态节点提前到编译阶段,并重复使用它们,从而减少渲染时间和内存占用。此外,Vue3还支持Tree-shaking优化,使得应用程序只包含实际使用的代码,减少应用程序的体积和加载时间。 4. 其他功能 Vue3还提供了其他的一些功能,比如:Teleport(传送门)用于在DOM层次结构之外渲染内容,Composition API支持组合式API风格的函数式API,Suspense(中止)用于在异步加载组件时显示占位符内容,等等。 总之,Vue3的底层原理采用了很多创新的技术和优化手段,使得它在性能、功能和易用性方面都有了很大的提升。这也是为什么Vue3能够在开发者中得到越来越广泛的应用和支持的原因之一。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值