一    
    
    
、装上插件

npm install --save qrcode.vue

或者

yarn add qrcode.vue

二   
    
    
    
，引入插件到页面中

import QrcodeVue from qrcode.vue

三


     


     


     


，页面实现

<qrcode-vue :value="qrCode123" size:300 ></qrcode-vue>

:value="qrCode123"是二维码中的值

四  




 




 




 ，全部代码

<template> <el-button text @click="dialogVisible = true" >click to open the Dialog</el-button > <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose" > <qrcode-vue :value="qrCode123" size:300 ></qrcode-vue> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">Cancel</el-button> <el-button type="primary" @click="dialogVisible = false" >Confirm</el-button > </span> </template> </el-dialog> </template> <script lang="ts" setup> import { ref } from vue import { ElMessageBox } from element-plus import QrcodeVue from qrcode.vue const dialogVisible = ref(false) const qrCode123 = ref("我是二维码信息") const handleClose = (done: () => void) => { ElMessageBox.confirm(Are you sure to close this dialog?) .then(() => { done() }) .catch(() => { // catch error }) } </script> <style scoped> .dialog-footer button:first-child { margin-right: 10px; } </style>

Vue3介绍（不用理会）

vue3.0带来了什么

1.性能的提升

打包大小减少41%

初次渲染快55%,更新渲染块133%

内存减少54%

........

2.源码的升级

使用Proxy代替defineProperty实现响应式

重写虚拟DOM的实现和Tree-Sharking

......

3.拥抱TypeScript

vue3.0更好的支持TypeScript

4.新的特性

Composition API(组合api)

    
    
    
。 setup配置

    


     


     


     。ref与reactive






 




 




 



。watch与watchEffect

   

   

   

。 provide和inject

     

     

     

    。 .......

新的内置组件






  




  




  


。 Fragment

  


  


  


。Teleport

     
     
     
   。Suspense

其他改变






   




   




   

。新的生命周期钩子



 



 



 



。data选项应始终被声明为一个函数

                 。移除keyCode支持作为v-on的修饰符