Vue3.X

Vue深入响应式原理

参考：>第二章Object的变化侦测Vue2.x和Vue3.x官网关于>的介绍>1.追踪对象变化的方法Vue2.x在组件创建时，Vue2.x系列使用了Object.defineProperty来给组件中的
Vanghua·2022-02-09 11:35

第十二讲、Vue3.x组件自定义事件 以及mitt 实现非父子组件传值

一、父子组件介绍二、Vue3.x组件自定义事件实现子组件给父组件传值注意：Vue官方推荐你始终使用kebab-case的事件名。
我爱张智容·2022-02-07 10:54

Vue Router 4 的使用，一篇文章给你讲透彻

Vue3.X使用VueRouter4.x进行路由配置，本文我们就来研究下如何使用VueRouter4.x，本文中所有的使用方式都是使用CompositionAPI的方式。
JonnyLan·2022-02-07 09:49

第十三讲、Vue3.x自定义组件上面使用v-mode双休数据绑定 以及 slots以及 Prop 的Attribute 继承 、禁用 Attribute 继承

一、自定义组件使用v-model实现双休数据绑定前面的课程我们给大家讲过v-model，v-model主要用于表单的双休数据绑定。现在给大家讲解一下v-model实现自定义组件的双休数据绑定。1.1、单个v-mode数据绑定默认情况下，组件上的v-model使用modelValue作为prop和update:modelValue作为事件。我们可以通过向v-model传递参数来修改这些名称：在本例中
我爱张智容·2022-02-06 19:06

Vue3学习与实战 · 配置使用vue-router路由

随着Vue版本的升级，Vue2.x项目和Vue3.x项目在使用vue-router上有些区别，本文就简单介绍下vue-router在Vue3中的配置和使用。
天問_专注于大前端技术·2021-12-28 16:52

Vue开发常用方法详解

目录$nextTick()$forceUpdate()$set().sync——2.3.0+新增（Vue3.x中已被v-model替换，不再支持）总结$nextTick()this.
·2021-12-20 19:09

即将2022年了，Vue3.x详细版为尔奉上（对比Vue2.x，打包带走）

Vue3知识已经为你总结好，赶紧学起来吧~~~Vue3新特性体验--上（内附简单实例，可直接使用）_前端不释卷leo的博客-CSDN博客1、先创建一个简单vue2项目，node、vue-cli、webpack等准备完成之后，创建vue3-test文件夹，cdvue3-test，然后vueinitwebpack，配置项目信息，创建vue2项目（安装vue-router、vuex）。vue2项目文件目
前端不释卷leo·2021-11-28 09:58

vue3 + vite实现异步组件和路由懒加载

但是在Vue3.x中异步组件的使用与Vue2.x完全不同了。本文就详细讲讲vue3中异步组件和路由懒加载的实现。
天問·2021-11-24 11:00

Vue3.x 超详细安装教程

请事先装好nodeJs整个vue-cli版本：vue3.0.0+vue-router4.0.0-0+vuex4.0.0-0+eslint6.7.2+typescript4.1.5安装步骤1.安装vue-clinpm或yarn安装npminstall-g@vue/cliyarnglobaladd@vue/cli查看版本（是否安装成功）：vue-V(大写的V)vue--version当前我安装的vue
猫老板的豆·2021-11-08 18:46

VueDraggable4.x 适配 Vue3.x

适配VueDraggable4.x,Vue3.x组件菜单box1:{{element.typeText}}效果box2:box1对菜单进行clone，box2绑定v-model，list2发生变化。
·2021-11-08 10:51

Vue3.x 关于组件的那些变化（新手必看篇）

一、组件内的data为什么总是函数形式？我们试着先做一个计数器案例，把data的返回形式修改成一个对象。具体的代码如下：+{{num}}-constretData={num:0}exportdefault{data(){returnretData}}运行结果，看着是正常的，并无异常。但我们都知道，vue项目中，之所以采用组件形式，就是为了重复多次使用，所以我们多次使用我们的组件试试。神奇的效果发生
前端人·2021-11-04 09:00

vue3.x连官网都不亲的选项--Mixin

不足官网原文如下：mixin-buzu.png简单来说不足有二：1、所有属性都会合并到组件里面，所以相同命名会冲突。2、写完就定下来了，不够灵活vue3提供了setup，来解决这些问题。个人见解，其实在vue2的时候就很少使用mixin来抽象逻辑，一般抽象逻辑都会使用一个封装的js对象。而mixin更多的是像封装一个“基类”那样，提供给组件继承，暂时而言个人还是觉得类似于“基类”这样的用法，使用m
学杂不精·2021-10-28 00:51

vue3.x新特性之setup函数，看完就会用了

最近有小伙伴跟我聊起setup函数，因为习惯了vue2.x的写法导致了，setup用起来觉得奇奇怪怪的，在一些api混编的情况下，代码变得更加混乱了，个人觉得在工程化思想比较强的团队中使用setup确实能更好的使用模块化开发，但是用得不好的话也确实降低了代码的可读性。本篇文章是从使用角度来聊聊setup的实际使用。setup使用1、setup和以前的api（data，methods，compute
学杂不精·2021-10-24 02:27

vue3.x全局$toast、$message、$loading等js插件

有时候我们需要使用一些类似toast，messge、loading这些跟js交互很频繁的插件，vue3.x这类插件的定义跟vue2.x插件稍大，而且相对变得复杂了一点点。
学杂不精·2021-10-22 10:34

vue3.x自定义组件双向数据绑定v-model

$emit('input','***')来改变外部对象的值vue3.x语法在Vue3中，双向数据绑定的API已经标准化，以减少开发者在使用v-model指令时的混淆，并且更加灵活。
学杂不精·2021-10-20 22:50

vue3.x全局插件和组件

做vue项目的时候，总有一些小组件或者工具类，我们需要频繁的使用，每个使用的地方再去引用相对比较麻烦，当然也有一些好处，尤其是配合组件异步加载的时候，能最更好的减少项目首次加载的体积，从而优化一些体验。全局js插件因为vue3.xjs插件的全局使用也有调整，这里稍微说下简易的全局js引入。#比如，有tools.js如下：consttools={isIos:function(){constagent
学杂不精·2021-10-20 17:59

vue3.x移动端适配px2rem

2、前提条件1、vue3.x新建的项目，这里只说vue3.x的适配，因为vue2.x一般都创建很久了，或者不需要这么做了，亦或者改动代价太大，就不讨论了。
学杂不精·2021-10-19 17:57

vue3之Composition API详解

CompositionAPI也叫组合式API，是Vue3.x的新特性。通过创建Vue组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。
·2021-10-18 14:47

vue3之Composition API详解

CompositionAPI也叫组合式API，是Vue3.x的新特性。通过创建Vue组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。
公众号「前端进阶之旅」·2021-10-17 20:43

vue3+ts获取第三方组件内类型并在ref中使用

前言最近在将项目从vue2重构至vue3+ts,在其中遇到了很多的坑，这篇文章讲一下如何获取第三方组件的类型，并结合refapi来获取子组件的节点数据代码实现首先讲一下vue3.x版本composition-api
oil欧哟·2021-10-03 12:12

Vue3.x watch函数----侦听器

watch函数，是用来定义侦听器的1.监听ref定义的响应式数据----基本类型constcount=ref(10)watch(count,(newValue,oldValue)=>{console.log(newValue,oldValue))总结：侦听普通数据可以获取修改前后的值；被侦听的数据必须是响应式的。2.监听reactive定义的响应式数据侦听reactive定义的响应式数据react
沃德麻鸭·2021-09-24 11:36

Vue3父子组件传参有关sync修饰符的用法详解

目录单向数据流讲解Vue2.x使用定义事件的形式,通知父组件修改.sync和update:的使用父传子,传递多个数据的简写采用v-model简写(要求严格)Vue3.x使用普通用法简写单向数据流讲解单向数据流
·2021-09-24 09:43

理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

目录Vue2.x用法全局注册局部注册使用钩子函数钩子函数的参数Vue3.x用法全局注册局部注册使用钩子函数较Vue2.x相比,钩子函数有变化Vue2.x用法全局注册Vue.directive(指令名,{
·2021-09-23 18:46

Vue.js slot插槽的作用域插槽用法详解

目录没有插槽的情况Vue2.x插槽有插槽的情况具名插槽没有slot属性插槽简单实例应用作用域插槽(2.1.0新增)Vue3.x插槽插槽作用域插槽没有插槽的情况1111//注册子组件Vue.component
·2021-09-15 16:28

Vue3.x使用mitt.js进行组件通信

目录快速开始使用方式核心原理Vue2.x使用EventBus进行组件通信，而Vue3.x推荐使用mitt.js。比起Vue实例上的EventBus，mitt.js好在哪里呢？
·2021-08-24 13:49

使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

目录一.参考文档二.vite搭建项目三.配置element-ui四.配置vue-router五.配置vuex安装六.配置axios七.总结一.参考文档vite官方文档vue3.x官方文档vue-router4
·2021-08-24 12:47

2、Vue3.x 项目工程环境搭建中遇到的问题记录

一、vue3.xelement-plus表单遇到ref响应式丢失了的问题image.png二、el-input等ref绑定dom使用1、dom设置ref.png2、声明ref.png3、使用.png4、setup中别忘记return.png三、Vue3.0，组件不加载进来，提示Failedtoresolvecomponent尽量使用kebab-case.png四、移除了$listeners，并且不
天策上将记录学习的地方·2021-08-06 08:51

Vue3.x相对于Vue2.x的变化

Vue3.x相对于Vue2.x的优势1.Tree-shakingVue3最重要的变化之一就是引入了Tree-Shaking，Tree-Shaking带来的bundle体积更小是显而易见的。
东方三篇·2021-08-05 17:22

vue3按钮波纹效果封装

指令在vue3+ts中，指令需要注意的写法同vue2中是有一些不同的，主要有：添加类型importtype{Directive,DirectiveBinding}from'vue';vue2.x与vue3
小俊的世界·2021-06-27 17:52

0成本上手AST，应用GoGoCode解决Vue2迁移Vue3难题

1为什么要迁移Vue3.x说点什么呢？总之。。。这不是我的错！首先先要写个案例，找到一个可执行方案。
抱雪左耳进·2021-06-25 11:34

2021年，让我们手写一个mini版本的vue2.x和vue3.x框架

mini版本的vue.js2.X版本框架模板代码首先我们看一下我们要实现的模板代码:{{msg}}{{count}}v-textadd+changemessage!recoverMessage!逻辑代码然后就是我们要编写的javascript代码。constapp=newminiVue({el:"#app",data:{msg:"hello,minivue.js",count:666},metho
·2021-06-25 10:02

2021年，让我们手写一个mini版本的vue2.x和vue3.x框架

mini版本的vue.js2.X版本框架模板代码首先我们看一下我们要实现的模板代码:{{msg}}{{count}}v-textadd+changemessage!recoverMessage!逻辑代码然后就是我们要编写的javascript代码。constapp=newminiVue({el:"#app",data:{msg:"hello,minivue.js",count:666},metho
·2021-06-25 00:37

2021年，让我们手写一个mini版本的vue2.x和vue3.x框架

mini版本的vue.js2.X版本框架模板代码首先我们看一下我们要实现的模板代码:{{msg}}{{count}}v-textadd+changemessage!recoverMessage!逻辑代码然后就是我们要编写的javascript代码。constapp=newminiVue({el:"#app",data:{msg:"hello,minivue.js",count:666},metho
·2021-06-24 23:00

快速掌握-vue3

ts重构，代码可读性更强vue3.x使用Proxy取代Vue2.x版本的Object.defineProperty实现了TreeShaking(当Javascript项目达到一定体积时，将代码分成模块会更易于管理
小二儿上酒·2021-06-23 09:17

基于Vite2.x的Vue 3.x项目的搭建实现

创建Vue3.x项目npminit@vitejs/appmy-vue-app--template引入Router4.xnpminstallvue-router@4--save配置路由在更目录中添加一个router
·2021-06-21 10:21

vue2.x 版本中体验vue3.x新特性

Vue团队先后对外发布了vue-function-api和vue-compisition-api的RFC本次分享围绕最新发布的vue-compisition-api，来讲解vue3.0的一些新特性，例如setup()函数、reactive()、ref()等这些VueHooks。1、相关资源【知乎-VueFunction-basedAPIRFC】https://zhuanlan.zhihu.com/
高阳刘·2021-06-12 02:54

Vue 使用脚手架 vue CLI 4.X 创建 vue3.x 项目

之前有整理过一部分知识点,一直没有发布,因为都是有关前端方面的零散内容;现在想想无论分享什么内容都需要慢慢积累,所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作中开发问题总结相关的内容;不积跬步，无以至千里,一时得失莫要在意。好了废话不多说,直接上代码以及图例(为了让大家方便阅读,都有自己验证过程的一些图片作为分享)。1.vueCLI官网链接:https://cli.vuej
黑木令·2021-06-05 12:47

vue响应式原理与双向数据的深入解析

object.defineProperty实现响应式清楚observe/watcher/dep具体指的是什么了解发布订阅模式以及其解决的具体问题在Javascript里实现数据响应式一般有俩种方案，分别对应着vue2.x和vue3
·2021-06-04 12:19

vue-响应式原理和双向数据的分析

object.defineProperty实现响应式清楚observe/watcher/dep具体指的是什么了解发布订阅模式以及其解决的具体问题在Javascript里实现数据响应式一般有俩种方案，分别对应着vue2.x和vue3
辣可乐少加冰·2021-06-03 09:21

vue2.x与vue3.x的对比

异步组件(vue3.x新增)vue3.x由于函数式组件被定义为纯函数，因此异步组件的定义需要通过将其包装在新的defineAsyncComponent助手方法中来显式地定义import{defineAsyncComponent
南崽·2021-05-18 14:38

Vue3使用mitt进行组件通信的步骤

Vue2.x使用EventBus进行组件通信，而Vue3.x推荐使用mitt.js。比起Vue实例上的EventBus，mitt.js好在哪里呢？
·2021-05-15 17:48

13.Vue3.x中组件的生命周期函数（lifecycle）、 this.$nextTick、动态组件 keep-alive、Vue实现Tab切换

一、Vue3.x中组件的生命周期函数摘自官网的图LifeCycle.vue组件生命周期函数演示exportdefault{name:"",data(){return{}},methods:{},beforeCreate
zwswood·2021-05-14 15:32

web前端工程师面试题—2021(推荐收藏以便临阵磨枪)

原理是什么四、请说一下响应式数据的理解五、Vue如何检测数组变化六、Vue.set方法是如何实现的七、Proxy与Object.defineProperty优劣对比八、Vue3.x响应式数据
可 乐 伢·2021-05-07 09:07

基于 Vue3+TS 构建Cesium组件库VueCesium

原创web前端进阶今天给大家分享一个超不错的vue3.x的cesium组件库Vue-Cesium。vue-cesium一套为GISer准备的基于Vue3.x的Cesium组件库。
暗涧幽火·2021-04-15 18:18

vue3常用的API使用简介

vue3.x已经发布了这么久，相关的生态也慢慢起来了，包括vite这个新的打包工具，在vue3.0学习过程中有一些实用性的api对比，希望能在开发中给大家做个示范，准确的使用对应的api去完成我们的项目开发生命周期的变更要特别说明一下的就是
·2021-04-14 20:03

vue2.x与vue3.x语法对比

npminstall-g@vue/cli#ORyarnglobaladd@vue/clivuecreatehello-vue3#selectvue3preset项目变化vue2.x和vue3.x目录结构没有什么变化
抽疯的稻草绳·2021-04-13 03:36

0成本上手AST，用GoGoCode解决Vue2迁移Vue3难题

1为什么要迁移Vue3.x说点什么呢？总之。。。这不是我的错！首先先要写个案例，找到一个可执行方案。
·2021-04-08 13:48

0成本上手AST，用GoGoCode解决Vue2迁移Vue3难题

1为什么要迁移Vue3.x说点什么呢？总之。。。这不是我的错！首先先要写个案例，找到一个可执行方案。
·2021-04-08 13:31

Vue3.x -- 自定义指令使用

vue3.x：自定义指令根据文档可以知道3.x的指令比起2.x做了些改动，自定义指令的API改了名字，名字更贴近组件的生命周期。created-新的！
·2021-04-05 16:14

Vue的一些笔记

Vue的一些笔记Vue是MVVM框架Vue2.x响应式数据原理Vue3.x响应式数据原理Vue2.x中如何监测数组变化nextTick的实现原理Vue的生命周期请求接口放在生命周期的位置v-model的原理
xiaobangsky·2021-03-30 14:34
上一页 4 5 6 7 8 9 10 11 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他