春风得意马蹄疾
一日看尽长安花

Vue

Vue3.0 Suspense组件

liukuan阅读(294)评论(0)赞(0)

Suspense是Vue3.0推出的一个内置特殊组件,用来定义具有异步请求数据的组建的显示。如果使用Suspense,要setup函数中需要返回一个promise. 例1 新建AyncShow.vue文件,setup函数需要返回一个Prom...

Vue3.0 Teleport组件

liukuan阅读(183)评论(0)赞(0)

teleport翻译过来就是"远距离传送"。Teleport组件设计的目的是将某个组件挂载在指定的元素上。在Vue3.0以前,我们所有组件都被挂载在根节点上如id是app的div,其他组件会一层层嵌套在整个html节点树...

Vue3.0 Composition API提取公共逻辑

liukuan阅读(389)评论(0)赞(1)

Composition API用于公共逻辑的提取,提高复用性,在Vue2.0中我们可以使用mixins的方式提取一些公共处理逻辑。以记录用户点击屏幕位置为例来说明,显示每次用户鼠标点击屏幕的位置,不考虑代码的复用性,我们会直接写出下面的代码...

Vue3.0语法

liukuan阅读(1284)评论(0)赞(2)

setup函数 在Vue3.0中提出了Composition API的概念,Vue2.0中我们通过props、data、methods等来定义组件,在Vue3.0中我们使用setup定义响应式的数据和方法 例: <template&g...

Vue3.0新特性

liukuan阅读(173)评论(0)赞(0)

Vue2.0数据响应 我们知道在Vue3.0之前的对象数据响应式的原理是Object.defineProperty(),数组的响应式原理是拦截数组的7个方法(包括push、pop、shift、unshift、splice、sort、reve...

Vue响应式原理

liukuan阅读(138)评论(0)赞(0)

Vue最显著的特性之一便是不太引人注意的响应式系统(reactivity system)。模型层(model)只是普通JS对象,修改它则更新视图(view)。这会让状态管理变得非常简单且直观,不过理解它的工作原理以避免一些常见的问题也是很重...

vue路由守卫总结

liukuan阅读(161)评论(0)赞(0)

全局前置守卫 需要对全局进行拦截 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 路由独享的守卫 单一的路...

Vue实例的生命周期

liukuan阅读(150)评论(0)赞(1)

Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等。在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例生命周期的图示 解释 接下来,...

Vue实例对象的数据选项

liukuan阅读(160)评论(0)赞(0)

一般的,当模板内容较简单时,使用data选项配合表达式即可。涉及到复杂逻辑时,则需要用到methods、computed、watch等方法。本文将详细介绍Vue实例对象的数据选项 data data是Vue实例的数据对象。Vue将会传递将d...

Vue基础知识

liukuan阅读(183)评论(0)赞(0)

概述 Vue.js是一套构建用户界面的渐进式框架。Vue采用自底向上增量开发的设计,核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和Vue生态系统的库结合是,Vue也完全能够为复杂的单页应用程序...