精华内容
下载资源
问答
  • 在今年2020的5月28日,Vue.js的作者尤雨溪公布了Vue3的整个设计过程,让我们来了解一下吧。 简单的来说,这个框架的版本更新一定是为了弥补前一个版本的不足之处,回想一下Vue2的出现也已经有四年之久了,尤大的...

    随着前端框架的快速更新迭代,现在的主流前端框架之一Vue.js迎来了它的新版本3.0。在今年2020的5月28日,Vue.js的作者尤雨溪公布了Vue3的整个设计过程,让我们来了解一下吧。

    在这里插入图片描述
    简单的来说,这个框架的版本更新一定是为了弥补前一个版本的不足之处,回想一下Vue2的出现也已经有四年之久了,尤大的团队也一直在研究新的版本的Vue,也就是Vue3。

    翻阅了一下他们的Vue3设计过程可以了解到版本更新的原因有以下两点:

    1. 现在的主流浏览器对 JavaScript 语言已经有了非常好的支持,其中包括了后来ES6更新的语法,而Vue2使用的大多都是ES6之前的语法,所以现在可以通过利用新的语法对Vue框架进行更新,以提高性能
    2. Vue2代码库中的设计和体系架构存在一定的问题,所以不得不对其进行更正

    那么Vue3到底更新了什么呢?它有哪些新的特性?它相对于Vue2的优势是什么?Vue3如何进行使用?

    别急,本文就将带着大家提前体验一下Vue3,以上的问题也会一一得到解答,大家也可以从中感受一下Vue3的魅力。

    • 公众号:前端印象
    • 不定时有送书活动,记得关注~
    • 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

    在这里插入图片描述

    一、Vue3的亮点

    在体验Vue3之前,我们先来了解一下Vu3到底有哪些亮点之处

    总共有6大两点:

    1. Performance(性能比vue2的runtime快2倍左右)
    2. Tree shaking support(按需打包模块)
    3. Better TypeScript support(更好的TS代码支持)
    4. Composition API(组合API)
    5. Custom Renderer API(自定义渲染API)
    6. Fragment, Teleport, Suspense

    (1)Performance

    在原本的Vue2中,每次DOM某个地方需要更新都需要遍历整个虚拟DOM,然后判断哪个地方需要进行更新,然后再重新渲染。而Vue3选择了一种新的渲染策略,即采用某些方式使得每次需要更新DOM时,无需遍历整个虚拟DOM树就可以检测到改变而进行DOM更新。

    (2)Tree shaking support

    这个就时为了实现按需打包,我们知道Vue框架里有很多的API和模块,但是一个项目中不可能用到所有的API和模块,所以该功能就可以实现在打包时去除掉Vue中没有被用到的模块和API,使得整个项目大小大幅度减小。

    根据官方的说法,Vue3如果只写入了一个 Hello World,即没有用到任何的模块API,打包后的大小大约为 13.5kb;若用到了所有的Vue3所有的模块,打包后的大小也就只有大约 22.5kb;而Vue2若只写入了 Hello World,并没有用到任何的模块API,打包后的大小大约为 32kb 左右,这就是因为Vue2中没有 Tree shaking 的原因。

    从中可以看出,Vue3比Vue2更轻量。

    (3)Better TypeScript support

    为了更好的用户使用,Vue3使用了TS重新对Vue框架进行了重写,增加了对TS更好的支持。

    (4) Composition API

    Composition API是为了解决原本Vue项目中代码逻辑分散而导致不易维护的问题

    首先先来看一个图
    在这里插入图片描述
    这幅图里颜色相同的区域表示的是实现同一个功能的代码区域

    图中左侧的是Vue2的一个API,叫做 Options,就是我们代码中的 datamethodsmounted ……这些存储数据或方法的对象

    我们都知道,在大的项目中,我们要实现一个组件的完整功能,需要上百甚至上千行代码。例如,我们要做一个轮播图组件,现在把图中左侧这一列图像看成是轮播图组件的代码,假设这里有1000行代码。

    首先我们在 methods 里写了实现轮播功能的方法,然后在 mounted 里写上在进入页面时自动开启轮播功能的代码,此时又想起来应该加一个功能,在鼠标移入该组件时应暂停轮播,所以又在 methods 里新增了一个方法,如图
    在这里插入图片描述
    这时你就会有这种感受,仅仅为了实现一个轮播的功能,却在这个页面中的不同地方写了不同的代码,那这样维护起来就特别的麻烦了,假设你的轮播功能出bug了,你需要排查问题,这时你先检查 实现轮播功能的代码 有无问题,然后又往下翻几百行代码找到 鼠标移入暂停轮播的代码,检查一下是否有问题,再又往下翻几百行代码找到 进入页面开启轮播的代码是否又问题。最终一顿分析才能查出bug。

    这样一来,代码逻辑在页面中比较分散,很难维护,所以Vue3舍弃了这种 Options API,而换用 Composition API,也就是图中右侧的部分。

    我们来看一下,刚才举的例子如果换用 Composition API 会时什么样
    在这里插入图片描述
    所有实现轮播这一功能的代码都放在一起,也就自然方便了维护

    (5) Custom Renderer API

    Custom Renderer API 也算是Vue3一个很不错的亮点了,它的作用就是将我们的代码绘制到 canvas 画布上

    (6) Fragment

    Vue3实现了不再限于模板中的单个根节点

    在Vue2中大家应该遇到过这样的情况
    在这里插入图片描述
    这个报错的原因是因为,Vue2要求组件模板中只能有一个根节点,而不可以有多个根节点,如图
    在这里插入图片描述
    图中这种情况就是有两个根节点,所以会报错。所以我们可以通过给这两个标签外部加一个节点来解决报错问题,如图
    在这里插入图片描述
    这样就不会在报错了,但有时会觉得这样特别麻烦,所以Vue3解决这个报错问题,实现了模板中不限于单个根节点,即即使有多个根节点也不会报错

    二、Vue3的性能

    在Vue3中,重写了虚拟dom的实现,并且针对编译模板进行了优化。

    在上面我们讲到了,在Vue2中,每次更新dom都需要重新遍历整个虚拟dom树,检测到变化点再去做相应的更新。但是Vue3在每次更新dom时就不需要遍历整个虚拟dom树了,这是为什么呢?

    这里先放上两个网址,分别可以查看到Vue2和Vue3的模板编译是如何的:

    Vue的渲染过程是先将html模板生成一个 render 函数,然后再根据该 render 函数进行渲染的,我们首先来看一下Vue2的模板编译情况
    在这里插入图片描述
    图中左侧部分就是我们平时写的html模板,右侧部分则是该html模板编译后生成的 render 函数

    接下来我们再来看一下Vue3的模板编译情况是如何的
    在这里插入图片描述
    很明显的可以看到,对比Vue2的 render 函数,在图中的第7行代码中多出了一个数字 1/* TEXT */,这是针对html模板打上了一个标记,告诉程序这个位置的数据是动态的(html模板中的{{ msg }}是可能会改变的,是一个动态的数据),所以之后如果要更新dom,就会针对打上标记的位置进行遍历检测。

    现在我们再在html模板上写上一个静态的数据,看看它是如何编译模板的
    在这里插入图片描述

    我们可以看到,我先给最外部的 div 加上了一个动态的 class 属性,即:class="isShow",所以编译后的 render 函数中的第11行代码中,有一个数字 9 、 注释 /* TEXT, PROPS */ 以及 ["class"],表示html模板该处的 text文本部分是动态的,属性 class 也是动态的,所以在后面更新dom时,会对该处的这两个值进行遍历检测;另外我们给属性name 赋值了 box,该值是一个静态固定的值,所以在图中右侧的 render函数中我们并没有看到对其有任何的标记,所以在之后更新dom时,会自动忽略该处的值。

    这就是Vue3通过标记来追踪动态数据的绑定,从而节约遍历虚拟dom的大部分开学。

    结合官方的说法,Vue3比Vue2的页面渲染速度提升了1.3倍~2倍,SSR(服务器渲染)速度提高了2倍~3倍

    这里放上两者性能的对比图
    在这里插入图片描述

    三、升级Vue3

    虽然目前为止Vue3还未正式发布,但我们已经可以提前体验Vue3了,为了更好地进行版本的迭代更新,Vue3对Vue2进行了很大程度的兼容,并且还提供了一个版本升级工具,可以将原本的Vue2项目很好的升级到Vu3。接下来我给大家介绍一下升级Vue3的步骤

    (1)创建Vue2项目

    我们先通过 vue-cli脚手架的 vue create 项目名 来创建一个 vue2项目,这里建议大家在创建时把 vue-routervuex 一并安装上,因为等会在升级时,会把这两个一并升级,因此代码会有所变化。
    在这里插入图片描述

    (2)将Vue2升级成Vue3

    那么我们现在只需要在原来的 vue项目目录下通过命令 vue add vue-next 来将Vue2升级成Vue3
    在这里插入图片描述
    在升级之前,我先记录一下几个文件的代码,可以方便我们看看升级前和升级后的差别

    • Vue2的 main.js 文件
      在这里插入图片描述
    • Vue2的 vue-routerindex.js 文件
      在这里插入图片描述
    • Vue2的 vuexindex.js 文件
      在这里插入图片描述

    稍微等待一下,Vue3就升级成功了,结果如图
    在这里插入图片描述
    那么此时我们来看看升级后的Vue文件有哪些变化

    • Vue3的 main.js 文件
      在这里插入图片描述
    • Vue3的 vue-routerindex.js 文件
      在这里插入图片描述
    • Vue3的 vuexindex.js 文件
      在这里插入图片描述

    对比一下各个文件升级前和升级后的区别,我们可以很明显地看到:

    Vue2的文件中都是 import Vue from 'vue' 导入了整个Vue,也就是把所有的模块API都导入了,但是用到的API可能就那么几个,所以这非常影响性能

    Vue3的文件都是将用到的Vue中的模块API单独地导出,而不是导入整个Vue,类似图中的 import { createApp } from 'vue' ,这样就跟吃自助时吃多少拿多少的道理一样,非常得节省代码性能的消耗。

    到这里,Vue3就算已经升级成功了,接下来我们就来体验一下Vue3的一些新特性把。

    四、体验Vue3新特性

    这里主要是来体验一下 Composition API的,首先了解一下 Composition API新特性的入口—— setup()函数,该函数是为组件提供的新属性。

    上面说了,这个API主要就是为了整合代码,使得为了实现相同功能的代码集中在一起便于维护查看,我们来用一个简单的例子来感受一下

    我们要实现以下这个功能
    在这里插入图片描述
    首先看看在Vue2里是如何实现的

    <template>
        <div>
            <div>{{ count }}</div>
            <button @click="add">增加</button>
        </div>
    </template>
    
    <script>
        export default {
            name: "demo",
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                add() {
                    this.count ++
                }
            }
        }
    </script>
    

    我们可以看到,首先数据 count和 方法 add 是分开的,分别分布在 data 属性 和 methods 属性中的,这也就是证明了,实现一个功能时,代码时分开的,如果这个组件里有很多很多功能,就会比较难找了。

    接下来我们再来看一下在Vue3中是如何实现这一功能的吧

    <template>
    
      <div>
          <div>{{ count }}</div>
          <button @click="add">增加</button>
      </div>
    
    </template>
    
    <script>
    // 导入ref函数
    import {ref} from 'vue'
    
    function increase() {
    	// 声明响应式数据count,值为0
        const count = ref(0)
        // 创建方法add
        const add = () => {
            count.value ++
        }
        // 导出数据和方法,便于外界访问
        return {
            count,
            add
        }
    }
    
    export default {
      name: 'demo',
      setup() {
      	  //调用increase函数,并获取 count 和 add
          let {count, add} = increase()
          
          //return出需要被访问的值和方法
          return {
              count,
              add
          }
      }
    }
    </script>
    

    Vue3中没有再使用 data 属性,而是通过使用vue中的 ref()函数来命名响应式数据的,ref()函数返回的是一个对象,我们命名的数据是存储在这个对象的 value属性里的,如图
    在这里插入图片描述
    同样的也没有再使用 methods属性,而是直接通过 function 命名一个函数即可

    同时,为了让代码整合在一起,我们在最外部命名了一个 increase函数,里面存放了所有的数据和方法。

    在Vue3中有一个新的属性 setup(),它可以看作是一个生命周期,介于 beforeCreatecreated 之间,在这个生命周期内被 return的值和方法可以被外界访问到

    所以在代码中,我们直接调用了刚才将功能代码整合在一起的 inscrease函数,同时获取了函数内 return 的两个变量,这是因为这两个变量是需要被访问的,例如 <div>{{ count }}</div>中需要访问 count<button @click="add">增加</button>中需要访问 add方法。

    不要看这一个简单的功能中,似乎Vue3显得更麻烦,其实在一个功能非常多的项目中,这样的逻辑方式会使代码阅读与维护起来非常的方便。

    五、结束语

    好了,Vue3的尝鲜就到这里了,但Vue3的功能和API远远不止这些,相信大家对Composition API也有了深刻的印象,后面我会再出一篇博客来更详细地介绍这个API的更多用法,欢迎大家继续关注我~

    我是Lpyexplore,欢迎关注公众号:前端印象,了解更多前端与爬虫知识

    创作不易,喜欢的加个关注,点个收藏,给个赞~ 带你们在Python爬虫的过程中学习Web前端

    展开全文
  • vue3 怎么使用 vue devtools,vue3 报 Vue.js not detected

    千次阅读 多人点赞 2021-04-24 11:29:42
    vue3 怎么使用 vue devtools,vue3 报 Vue.js not detected重点vue devtools的安装vue devtools 使用测试 重点 –2021-4-21 记录一些使用vue devtools的坑 在学习vue的过程中,使用 vue devtools来进行调试会提高...

    vue3 怎么使用 vue devtools,vue3 报 Vue.js not detected

    重点

    –2021-4-21
    记录一些使用vue devtools的坑
    在学习vue的过程中,使用 vue devtools来进行调试会提高调试的效率。
    笔者最近在刚开始学习vue,一开始使用的便是vue3。
    在安装 vue devtools中踩了一个坑,在此纪录下来。

    vue3 : 使用 vue devtools deta版本
    vue2: 使用 vue devtools master版本


    vue devtools的安装

    提供二种安装方式
    1.官网编译安装

    vue devtools 仓库 : Github
    vue devtools 镜像仓库 : Github镜像网站
    github在国内访问很慢,提供一个镜像网站:hub.fastgit.org

    在github仓库按文档说明下载编译,将插件安装在chrome、firefox等浏览器上。
    或者使用官网提供的浏览器插件下载安装即可。
    在这里插入图片描述
    这里需要注意使用的vue3用后面的链接,如beta channel,使用的是vue2 用前面的链接即可(需要科学)。

    2.使用插件网站安装

    访问极简插件
    搜索vue devtools
    在这里插入图片描述
    下载安装,还是那句话下载deta版本(vue3)。

    vue devtools 使用测试

    使用 vue cli 创建一个 vue3 项目。
    打开控制台。
    可以使用vue3了。
    在这里插入图片描述

    展开全文
  • vue2与vue3的区别

    万次阅读 多人点赞 2020-09-25 17:13:28
    Vue2和Vue3开发组件有什么区别 vue2和vue3双向数据绑定的区别 总结: 1. vue2和vue3双向数据绑定原理发生了改变 vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式...

    参考文档:

    Vue2和Vue3开发组件有什么区别

    vue2和vue3双向数据绑定的区别

    总结:

    1. vue2和vue3双向数据绑定原理发生了改变

    vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

    vue3 中使用了 es6 的 ProxyAPI 对数据代理。

    相比于vue2.x,使用proxy的优势如下

    1. defineProperty只能监听某个属性,不能对全对象监听
    2. 可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
    3. 可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

    2. 默认进行懒观察(lazy observation)。

    在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。

    3. 更精准的变更通知。

    比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。

    4. 3.0 新加入了 TypeScript 以及 PWA 的支持

    5.vue2和vue3组件发送改变

    具体参考Vue2和Vue3开发组件有什么区别

    展开全文
  • Vue3---Vue3中如何进行全局挂载

    千次阅读 2021-02-12 15:28:35
    main.js中通过config.globalProperties进行全局挂载 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' ...// Vue3 全局挂载系统名称 ..
    • main.js中通过 config.globalProperties 进行全局挂载
    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    const app = createApp(App)
    app.use(store)
    app.use(router)
    app.mount('#app')
    
    // Vue3 全局挂载系统名称
    app.config.globalProperties.$systemName = '用户管理系统'
    
    •  组件实例中通过 getCurrentInstance 获取proxy,再获取全局挂载的实例
    <template>
      <div>
        <p>{{ sysName }}</p>
      </div>
    </template>
    <script>
    import { defineComponent, getCurrentInstance } from 'vue'
    
    export default defineComponent({
      name: '',
      setup(){
        const { proxy } = getCurrentInstance()
        const sysName = proxy.$systemName
        return {
         sysName
        }
      }
    })
    </script>

     

    展开全文
  • Vue2升级到Vue3

    千次阅读 2020-10-29 21:38:48
    最近想玩玩Vue3 如题,Vue3已经是beta版了,想玩玩Vue3,就对原来Vue2的项目进行了升级。参考了慕课网Dell Lee的课程内容和Vue3官方文档。 一、main.js中的变化 从技术上讲,Vue 2 没有“app”的概念,我们定义的...
  • Vue3中的Vue Router初探

    千次阅读 2020-05-07 17:13:12
    对于大多数单页应用...Vue3中的许多更改都会稍微改变我们访问插件和库的方式,其中包括Vue Router。我们将结合使用Alpha版本的Vue Router和当前的Vue3 Alpha版本进行研究。 本文告诉你如何将Vue Router添加到Vue3...
  • Vue3+与Vue2共存

    千次阅读 2020-05-04 21:57:53
    目前大多数新项目都会采用Vue3+进行开发,然而在公司还需要维护一些之前使用老旧版本Vue2开发的项目,此时则需要我们在电脑上安装vue2与vue3+了。 1、 先来说说npm安装命令的参数-g -g参数可以将js包进行全局安装,...
  • Vue2与Vue3的区别

    千次阅读 2020-09-28 22:14:42
    Vue2和Vue3开发组件有什么区别 vue2和vue3双向数据绑定的区别 总结: 1. vue2和vue3双向数据绑定原理发生了改变 vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式...
  • Vue(二):Vue3安装

    万次阅读 2019-08-19 17:47:49
    Vue3安装 Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。 可以在cmd命令窗口查看node.js的版本,执行node -v 开始安装,...
  • Vue3---路由动态管理(router.addRoute())

    万次阅读 2021-02-16 14:54:58
    Vue2中,可以通过路由的addRoutes() 和 addRoute() 两种方法实现路由权限动态渲染,但在Vue3中,摒弃了addRoutes() 方法,只保留了addRoute() 单个添加路由配置的方法。 Vue2中路由对象 Vue3中路由对象 Vue3...
  • vue3 setup使用(详细)

    万次阅读 2021-05-10 17:02:00
    官网vue3-setup 总结: 1、setup 函数时,它将接受两个参数:(props、context(包含attrs、slots、emit)) 2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 3、执行 setup 时...
  • Vue (Vue3) 入门 (学习笔记)

    千次阅读 2020-12-08 09:15:59
    有过一点点 Vue2 的经验,准备系统学习一下 Vue,以最新的 Vue3 为准,记录一下 Vue 的学习笔记,也希望对其他人有帮助。 文章目录安装、使用当做一个类库(library)使用当做框架使用安装 vue3运行、发布Vue 实战...
  • vue3之watch监听

    千次阅读 2021-02-23 23:49:59
    vue3的监听跟vue2有点不一样. 引入watch后直接在setup里面使用, 调用方式是以回调函数的方式呈现. 1.先引入watch import { ref, defineComponent, watch } from "vue"; 2.在setup里面引用 /*监听props*/ watch...
  • 一.vue cli2升级到vue cli3 1.先升级npm的版本 npm install -g npm 2.再卸载之前的vue cli 2.9.6 npm uninstall -g @vue/cli ...二.vue3,0版本创建项目 1、vue create myproject 2、默认选择default方...
  • Vue3项目整合Electron

    千次阅读 2019-08-31 15:15:14
    Vue3项目整合Electron 第一步安装:VUE3 安装vue3脚手架 npm install -g @vue/cli 安装 yarn,并设置淘宝源 npm install -g cnpm --registry=https://registry.npm.taobao.org 设置ELECTRON_MIRROR,加速electron的...
  • vue3创建项目

    万次阅读 2020-04-28 11:12:14
    vue3创建项目 vue create 项目名称 //回车 default默认配置,manually手动配置,如果选择默认一直回车即可,选择手动需要进行相应的配置如下图 根据自己项目需求选择相应的选项,空格选择,a全选 babel---...
  • Vue3怎么使用element-plus

    千次阅读 2020-11-23 10:13:58
    vue3出来一段时间了,element也更新了版本去兼容vue3,在这里简单的介绍一下如何使用element-plus吧 1、安装 npm install element-plus --save 2、引入 import { createApp, Vue } from 'vue'; import ElementPlus ...
  • 官方文档 vue https://cn.vuejs.org/v2/guide/vue-cli https://cli.vuejs.org/zh/ vue2 vue3 基于 vue-cli 基于 @vue/cli 初始化项目 ...
  • 使用vite创建vue3项目

    千次阅读 2020-09-23 14:46:34
    vite 这个是尤大开发的新工具,目的是以后替代webpack,原理是利用浏览器现在...命令创建 npm install -g create-vite-app create-vite-app 01-vue3-vite cd 01-vue3-vite npm install npm run dev 项目目录 ...
  • vue3 使用第三方插件问题 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler...
  • 学习vue3系列生命周期

    万次阅读 2020-08-08 11:47:11
    之前已经介绍了 vue3 的相关知识点:ref,reactive,computed,watch,watchEffect,toRef,toRefs 这些响应式的API,相信大家对 vue3 已经有一定的理解了。 生命周期 除了这些函数 vue3 还增加了些生命周期,可以...
  • vue 全局组件注册With the new versions of Vue3 out now, it’s useful to start learning how the new updates will change the way we write code. One example is the changes in the way we write our index.js...
  • 02-安装Vue.js 温馨提示: 1、视频下载:线上视频被压缩处理,可以下载高清版本:https://pan.baidu.com/s/16594YUpNNrkjZfrCx7e5kQ提取码:hws6 2、示例代码:https://pan.baidu.com/s/1oYV0Lej_E3ufyEUMxq1S2Q...
  • Vue3路由push跳转(解决Vue2this.$router.push失效)

    千次阅读 热门讨论 2021-01-27 17:20:10
    Vue3.x出来有一阵子了,今天用它的时候发现Vue2中的this.$router.push竟然不能用了!!!!!,真是服了,还得花点时间瞅瞅咋回事,所以.....还是总结下吧 目录 1.Vue3.x路由跳转 2.获取参数 3. router-link ...
  • Vue3中,子组件通过setup函数中的第一个参数值 props 拿到定义的组件参数进行使用。如果要向父组件传参,需要使用setup函数中的第二个参数值 context(组件上下文)中的emit。 例1:Tab菜单子组件 创建子组件Tabs...
  • vue3子组件向父组件传值

    千次阅读 2020-10-14 21:19:24
    使用vue3新的方法 推荐第二种方法,更加符合vue3的风格 emits: ["todata"], setup(props, refs) { const change = () => { const params = { user:"ylw" }; emit("todata", params); }; } ...
  • vue3 中使用antd UI组件

    千次阅读 2020-11-18 17:13:48
    之前搞pc端的 会使用element的ui组件 现在 vue3 来了 顺便也更新试用下 vuu3中的ui组件 不过好像 element还没更新支持 vue3 所以先用antd 来试试看 1. 安装 npm i --save ant-design-vue@next 2. 注册使用 引入...
  • vue3配合vue router4使用

    千次阅读 2020-09-27 16:07:15
    // Vue Router 4 import { createRouter, createWebHistory } from "vue-router"; import index from '../views/index.vue' import one from '../views/one.vue' export default createRouter({ history: ...
  • 一个基于vue3+vite+ts的完整项目

    万次阅读 多人点赞 2020-10-10 09:28:22
    vue-vben-admin-2.0 是一个全新的开源系统,基于ant-design-vue2.x,typescript4,vue3,vite实现的 vue3 风格的后台管理系统。 项目基于ant-design-vue,typescript,vue3.0,vite,tailwindcss,tsx实现的 vue3 风格的后台...
  • vue2升级vue3.x

    千次阅读 2019-08-08 15:26:57
    无需要装卸 vue2.x : npm uninstall -g vue-cli 可以直接升级 npm install -g @vue/cli

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,253,027
精华内容 501,210
关键字:

vue3

vue 订阅