vue3
文章平均质量分 53
妍崽崽@
这个作者很懒,什么都没留下…
展开
-
js/vue/tsx 中获取dom元素的方法集合
整理下常用的获取dom元素的方法。比如js、vue、vue3、tsx中的原创 2023-09-26 10:28:20 · 626 阅读 · 0 评论 -
element 中 封装组件 之 按钮加载优化
组件之间方法的写法原创 2022-12-13 15:14:05 · 315 阅读 · 0 评论 -
vue3+vite使用element-plus
vue3+vite使用element-plus原创 2022-12-07 18:04:51 · 1378 阅读 · 0 评论 -
Vue2和Vue3的生命周期以及执行顺序
vue3现在是比较流行的,但是vue2的项目现在很多,而且我们会遇到把一部分vue2的项目移植到我们的vue3项目里面的情况,在这种情况下,如果我们熟悉vue2与vue3的生命周期顺序的话,对我们帮助是很大的原创 2022-10-08 14:36:04 · 1905 阅读 · 2 评论 -
5个促进Vue3开发更友好的插件
前言: 网上找到几个好用的插件,这里分享一下。具体插件:一、setup name 增强Vue3的setup语法糖是个好东西,但使用setup语法带来的第一个问题就是无法自定义name,而我们使用keep-alive往往是需要name的,解决这个问题通常是通过写两个script标签来解决,一个使用setup,一个不使用,但这样必然是不够优雅的。这时候借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题,不用写两个script标签,可以直接...原创 2022-03-01 10:43:08 · 5200 阅读 · 4 评论 -
vue3+echarts+折线投影(阴影)效果
前言:折线投影效果的实现。实现效果:实现方法:1、引入echartcnpm i --save echartsimport * as echarts from 'echarts';2、页面上定义dom<template> <div id="echartLine" class="echartDiv"> 折线图 </div></template>3、具体实现代码,series...原创 2022-02-28 16:53:51 · 1323 阅读 · 2 评论 -
vue3+echarts好看的圆角环形图
前言:好看的圆角环形图实现效果:实现方法:1、引入echartcnpm i --save echartsimport * as echarts from 'echarts';2、页面上定义dom<template> <div id="echartLine" class="echartDiv"> 折线图 </div></template>3、实现具体源码:<template> ...原创 2022-02-28 15:42:04 · 2159 阅读 · 0 评论 -
vue3+百度地图
前言:vue3+百度地图实现效果:官方:控制台(申请key):点我api1:点我api2:点我实现步骤:1、官网申请百度地图的key2、在public/index.html里面添加<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你自己的key"></script>3、新建组件 ...原创 2022-02-14 17:00:01 · 2932 阅读 · 3 评论 -
vue3+腾讯地图
前言:vue3+腾讯地图实现效果:官方:控制台入口(申请key):点我api:点我实现步骤:1、官网申请腾讯的key2、在public/index.html里面添加<script src="https://map.qq.com/api/gljs?v=1.exp&key=你申请的key"></script>3、新建map.vue文件<template> <...原创 2022-02-14 16:31:02 · 2365 阅读 · 1 评论 -
vue3+高德地图
前言:vue3中引入高德地图高德地图:官网地址api地址实现效果:具体步骤:1、官网申请高德的key2、在public/index.html里面添加<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script>3、新建组件 map.vue<template> <...原创 2022-02-14 16:24:30 · 4417 阅读 · 3 评论 -
vue3报错far <= 0
前言:在使用vue3来实现地图效果的时候,发现一个问题,点击地图页面,然后再切换别的页面,然后再点击地图页面,点击快的时候会报错far <= 0报错信息:报错原因:原因1:是组件里面 有标签的ID值重复了比如 A组件引入使用B组件,B组件又引入使用C组件,而A组件里面有个 div 标签的 id 是 map ,而C组件里面也有一个 div 标签的 id 是 map 。就会出现这个错误。原因2:DOM元素还没初始化就拿来使用了,将获取DOM来使用的代码放...原创 2022-02-14 11:44:09 · 1965 阅读 · 2 评论 -
vue2/vue3中样式scss的mixin用法
前言:在vue2中我们使用scss的时候的一些方法挪移到vue3中,会出现一些问题,比如我们的配置文件都ok了,但是我们页面上使用@include wx() 会报错找不到这个mixin方法。vue2中scss:1、引入你的公共scss文件2、放入把我们的mixin方法// 宽高@mixin wh($width, $height){ width: $width; height: $height;}// 圆角边框@mixin border-radius($...原创 2022-02-10 18:23:54 · 2600 阅读 · 4 评论 -
vue3的style新特性
前言:vue3的样式里面新增了一些新特性,这里和vue2的样式做个分析。vue3: 官方入口scoped module v-bind(js控制样式)具体详情:1、scoped 当<style>标签带有scoped,它的 CSS 只会应用到当前组件的元素上。<style>/* 全局样式 */</style><style scoped>/* 只作用再本组件样式...原创 2022-02-08 16:43:55 · 2813 阅读 · 0 评论 -
vue3的script lang=‘ts‘ setup或者script setup
前言:vue3中提供了单文件组件 script setup ,这里来分享总结下他的用法。官方入口:点我一、基本语法:默认js方法里面都是setup方法内部方法1、普通版<script setup>// 变量const msg = 'Hello!'// 函数function log() { console.log(msg)}</script>2、ts版本<script lang="ts" setup>//...原创 2022-02-08 15:10:46 · 21238 阅读 · 3 评论 -
vue3和vue2的mixins的使用
前言:vue的mixins里面放公共的js方法,但是vue3之后使用方法还是有些改变,这里来罗列下他们的区别。Vue2:1、封装的mixin方法export const homeSensors = { mounted() { this.$sensors.track('teacherHomePageview') }, methods:{ abc(){ alert(1) } }}...原创 2022-02-07 16:52:32 · 4563 阅读 · 0 评论 -
vue3中vuex与pinia
前言:vue中状态管理库是vuex,在vue3出来以后,vuex的团队核心成员在修改部分功能后,开发除了一款轻量级的 pinia,在这里聊聊他们的区别和优缺点。1、安装vuexnpm install vuex@next --savepinianpm install pinia@next2、用法vuex在vue3中的写法和用法// store.jsimport { createStore } from 'vuex' export default ...原创 2022-02-07 16:28:43 · 4026 阅读 · 0 评论 -
vue3的新特性,与vue2的区别
前言: vue3的版本测试版本,正式版本发布到现在也是有很长的时间了,我们这里总结下vue3.0相对于我们vue2新增,改变的一些内容。vue官方入口一、生命周期:(更多相关:入口)1、去掉了vue2.0中的 beforeCreate 和 created 两个阶段,同样的新增了一个 setup2、beforeMount 挂载之前 改名 onBeforeMount3、mounted 挂载之后 改名 onMounted4、beforeUpdate 数据更新...原创 2022-02-07 11:42:28 · 1357 阅读 · 0 评论