vue
文章平均质量分 61
vue 日常总结
奥特曼
这个作者很懒,什么都没留下…
展开
-
cas单点登录 前端步骤流程
CAS(Central Authentication Service)是一个开源的单点登录协议和实现,它提供了一种统一的方法来管理和验证用户身份,使用户只需通过一次登录即可访问多个应用程序。1. 判断当前用户是否登录,如果没登录要跳转到登录服务器的ip上 并携带之前的地址 例如 192.168.1.110?以Vue为例,只需要在路由守卫中判断无token 跳转到登录页的流程替换掉跳转即可。3.用在url中的ticket去请求token,返回用户标识信息 完成单点登录。原创 2023-06-18 16:09:08 · 976 阅读 · 0 评论 -
Vue3 Hooks函数使用及封装思想
专业解释:Vue 3中的Hooks函数是一种用于在组件中共享可复用逻辑的方式。大白话:将单独功能的js代码抽离出来, 加工成公共函数,从而达到逻辑复用。对Vue社区调研,了解了许多使用Vue的开发者对于更好的组件逻辑组织方式的期望。对React Hooks和其他前端框架的解决方案进行了学习和借鉴。有了composition API 意味着我们就可以自定义封装hooks,最终的目的都是进行复用,在Vue2中复用的方式大部分都是采取的mixin,但相比hooks,hooks更清楚复用的功能来源及功能。原创 2023-06-17 21:15:31 · 7475 阅读 · 3 评论 -
vue2 diff算法及虚拟DOM
概括:diff算法,虚拟DOM中采用的算法,把树形结构按照层级分解,只比较同级元素,不同层级的节点只有创建和删除操作。一、虚拟DOM(1) 什么是虚拟DOM?虚拟 DOM (Virtual DOM,简称 VDOM) 是一种编程概念,意为将目标所需的 UI 通过数据结构“虚拟”地表示出来,保存在内存中,然后将真实的 DOM 与之保持同步。这个概念是由React率先开拓,随后在许多不同的框架中都有不同的实现,当然也包括 Vue。虚拟DOM本质上就是用来描述真实DOM的JavaScript对象原创 2023-02-13 22:06:01 · 1207 阅读 · 0 评论 -
vite vue自动加载api(再也不用每个文件引入ref、reactive、vue-router)
可以解决 每次定义数据都需要引入响应式ref、reactive等其他api的烦恼 1.安装自动引入插件 2.vite.config.ts 配置自动引入插件 解决方法 可以去.eslintrc.cjs 文件中 把 no-undef关闭校验。如果 会报以下提示 她说告诉你 不知道ref是什么。这时候呢 就可以去使用 不再去引入ref。原创 2022-12-12 21:45:00 · 1254 阅读 · 0 评论 -
vue3 封装单选框组件
一、封装思想:在父组件定义数据 传入给子组件 并绑定 v-model 获取当前选中的值modelValue 可以接收到父组件 v-model 绑定的值父组件传递数据 并绑定v-model 拿到子组件选中的值原创 2022-12-08 20:14:08 · 873 阅读 · 0 评论 -
vue axios封装及调用 (可复用)
主要对axios做了二次封装,添加了请求、响应拦截器,不用再去考虑是post请求的传参还是get请求的传参原创 2022-11-21 10:17:51 · 470 阅读 · 0 评论 -
vue+ts中引入组件自动提示 declare module
可以发现 用到了ts中的 declare module 意为声明模块,可以让vue知道这是一个组件,当然我们自己定义的组件,使用相同的语法同样可以实现。在我们引入vant UI 组件库时 只要我们输入一个原创 2022-11-14 19:10:44 · 5156 阅读 · 0 评论 -
vue3 封装使用 pinia (可直接使用,包含数据持久化)
Pinia是 Vue 的存储库,它允许您跨组件/页面共享状态,与vuex功能一样。为什么不在用vuex了呢?Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子,结合了 Vuex 5 核心团队讨论中的许多想法。最终,我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容,并决定实现它 取而代之的是新的建议。与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的规范,提供了 Composition-API 风格的 API原创 2022-11-12 19:30:00 · 3509 阅读 · 1 评论 -
vite vue引入svg图标及封装 (轻松上手)
svg特征Preloading所有图标都是在项目运行时生成的,只需要操作一次dom即可。高性能内置缓存,仅在文件被修改时才会重新生成。一、如何使用1.安装vite-plugin-svg-icons插件node version:>=12.0.0vite version:>=2.0.02.使用插件vite.config.ts原创 2022-11-10 21:00:00 · 1481 阅读 · 0 评论 -
vue 移动端实现自动适配 postcss-px-to-viewport
postcss-px-to-viewport 是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位。补充:如果设计图是750的话需要单独判断,因为vant是根据375设计稿去做的,如果是读取vant目录文件的话采用375 其他采用750。是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位。如果设计图大小是375 就设置375就好了 750 同理。转换成vw 相当于 375就是100vw。原创 2022-11-08 19:59:07 · 1330 阅读 · 0 评论 -
微信公众号分享
如果不做任何的代码优化 直接点击右上角的分享出来的效果 只是当前的标题 并且是没有任何图片效果的。如果做了代码优化 就可以把标题、描述、图片 都可以替换成动态的。3. 掉接口拿sdk需要的参数 可参考。2.需要分享的页面中引入。1. 下载微信sdk包。原创 2022-11-02 20:00:00 · 399 阅读 · 0 评论 -
vue使用pinia (vue2/vue3)
inia是什么?Pinia 是 Vue.js 的轻量级状态管理库官方网站:Pinia中文文档: 介绍 | Pinia 中文文档pinia与vuex4相同是vue 官方 状态管理工具(作者是 Vue 核心团队成员)是vue开发者工具支持pinia不同pinia相比vuex4,对于vue3的 兼容性 更好pinia相比vuex4,具备完善的 类型推荐 => 对 TS 支持很友好Pinia 的 API 设计非常接近 Vuex 5 的提案。vuex只能有一个根级别的状态,原创 2022-09-23 20:00:00 · 7106 阅读 · 0 评论 -
npm Node Sass version 7.0.1 is incompatible with ^4.0.0.
npm Node Sass version 7.0.1 is incompatible with ^4.0.0.或者throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nError: Cannot find module 'node-sass'都是由于升级node后导致sass不兼容原创 2022-09-22 09:11:17 · 266 阅读 · 0 评论 -
vue3中<script setup> 和 setup函数的区别
是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 语法,具有以下特点:更少的样板内容,更简洁的代码。能够使用纯 TypeScript 声明 props 和自定义事件。更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数,避免了渲染上下文代理对象)。更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。简单来说<script setup>就是 set原创 2022-09-14 19:27:04 · 5179 阅读 · 3 评论 -
vue混入mixin
Mixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时,所有 mixin 对象的选项将被“混合”进入该组件本身的选项。mixin 混入可以理解为在本身组件上 加一个小的vue,可以共同使用本身组件与mixin上的一些功能本质上和vue 是没有区别的...原创 2022-08-02 20:57:32 · 1087 阅读 · 0 评论 -
vue 自定义指令 自己实现 v-if 和 v-show
通过自定义指令实现v-if 和 v-show ,v-show 就是把当前元素 设置display:none / block 来控制显隐,而 v-if 来把当前页面元素是否删除原创 2022-08-01 19:37:43 · 4042 阅读 · 1 评论 -
uniapp 上传文件 封装方法
uniapp 上传文件封装原创 2022-05-19 20:33:44 · 1629 阅读 · 0 评论 -
vue 去除控制台 console.log
vue 去除控制台 console.log原创 2022-04-06 15:10:50 · 1646 阅读 · 0 评论 -
vue h5 公众号支付
由于微信浏览器的限制无法从微信浏览器调起微信支付,需要对接公众号的支付后端的小伙伴需要做一些微信公众号的配置(商户目录 、域名) 以及 微信商户平台的配置前端主要的是通过openid 获取 code 来调起后端的接口拿到支付的参数 来对接微信的sdk的方法首先通过链接 微信官方平台的链接来获取 code微信开放文档https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=${encode..原创 2022-02-11 18:01:03 · 803 阅读 · 3 评论 -
Vue路由中的hash和history模式
hash和history最明显的区别就是路径上 hash比history多一个/#一、hash模式在我们发请求时 例如http://localhost:8080/#/login中的 #/后面的被称为hash,当hash值发生变化时,浏览器并不会重新发送请求 发请求时并不会把hash带到浏览器请求中,但是会触发 window.hashchange事件,在这个事件参数中就可以获取到hash值,之后就会根据hash值的变化去更换路由。window.onhashchange = (e) =&...原创 2021-10-24 13:42:27 · 554 阅读 · 0 评论 -
vue 登录时记住密码 + 加密
思路 登录成功时 记录选中记住密码状态 到localstorage, 账号密码 加密后存到cookie。npm inpminstall crypto-jsimport CryptoJS from 'crypto-js'export default { data () { return { loginForm: { account: '', password: '' }, rememberPassword...原创 2021-10-08 20:30:28 · 889 阅读 · 0 评论 -
el-carousel 自定义 指示灯
在element中提供的 只能是在指定位置上设置 所以通过属性无法设置其他 位置 所以我们只能去手动添加位置效果图<template> <div class="container-swiper"> <div class="smallMask2" v-if="$store.state.search.isShowSearchHistory" ></div> <div cl...原创 2021-10-07 19:41:28 · 2721 阅读 · 0 评论 -
vue 封装axios 并省略写 data、params参数
import axios from 'axios'import store from '@/store/index'import router from '@/router/index'export const request = axios.create({ baseURL: 'http://xxx基地址/'})export default (url, method, paramsData) => { return request({ url, method...原创 2021-10-07 19:30:28 · 704 阅读 · 0 评论 -
vue使用Element el-upload 组件
一、基本使用最近研究了一下 el-upload组件 踩了一些小坑 写起来大家学习一下很经常的一件事情 经常会去直接拷贝 element的的组件去使用 但是用到上传组件时 就会遇到坑了如果你直接去使用upload 你肯定会遇见这个错误而且 上传的图片 可能会突然消失 这时候如果你没有接口 你是完全不知道为什么移除的 所以 无接口时 只能去猜测是不是因为跨域报错 导致图片消失最终去拿公司的地址调完接口,答案是对的action="https://jsonplaceholder....原创 2021-09-29 20:40:28 · 835 阅读 · 0 评论 -
Vue 实现 H5video 视频标签 禁止快进 最优
可以拖动滚动条 但是还是松开鼠标还是停留在当前位置,如果后退的话还是可以快进到最快的位置,这点还是比较优化较好的<template> <video ref="video" @timeupdate="timeupdate" ></template><script>export default { data() { return { currTime: null,.原创 2021-09-07 21:49:39 · 2362 阅读 · 0 评论 -
vue 文本输入框只允许输入字母、数字、不允许输入特殊字符
一、基本结构<input type="text" v-model="note" maxlength="18"><script>export default { data () { return { note: '', } }}</script>二、监听表单输入的内容 watch: { // 只允许输入字母 note (newValue, oldValue) { console.l..原创 2021-08-31 17:46:46 · 20846 阅读 · 0 评论 -
vue手写tab栏 下边框滑动效果
之前写过的可能只是 点击哪个哪个进行高亮,今天来学习一下滑动效果,当鼠标经过时,他会根据当前的位置进行滑动到鼠标经过的位置,实现的思路有很多,下面是我自己的思路。效果图实现思路:用定位的方式固定移动tab边框的位置,根据索引计算left的位置, 由于自己设置的盒子正好100px,你也可以根据自己的tab大小进行修改<template> <div id="app"> <!-- 父盒子 --> <div class="tab"...原创 2021-08-23 22:30:22 · 1307 阅读 · 0 评论 -
vue如何组件强制刷新组件
之前没遇到过直接强制刷新组件的,都是通过ajax数据回来 重新请求更一下页面,面试题遇到了还是总结一下一、 强制刷新 this.$router.go(0) this.$router.go( ) 如果未向该函数传参或delta相等于0,则该函数与调用location.reload()具有相同的效果。location.reload()Location.reload()方法用来刷新当前页面。该方法只有一个参数,当值为true时,将强制浏览器从服务器加载页面资源,当值为fals...原创 2021-08-18 22:11:41 · 3273 阅读 · 0 评论 -
vue重置data数据
Object.assign(this.$data, this.$options.data.call(this))Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。this.$data 当前的data数据this.$options Vue创建实例时的数据...原创 2021-08-18 21:05:39 · 140 阅读 · 0 评论 -
Vue watch和computed的区别
watch computed 定义格式 必须监听存在的属性(data、props、computed) 不能和data定义的变量相同 异步 支持异步操作 不支持异步 开销 适合一些开销较大的操作 适合做一些简单依赖的计算 对于computed能做的 watch都可以做,至于选择哪个去做,都应该去看使用场景一、使用场景第一个输入框+第二个输入框 进行拼接 <input type="text" v-model="num...原创 2021-08-15 15:19:39 · 417 阅读 · 0 评论 -
vue 路由传参及解决动态路由传参刷新会消失问题
vue传参大致分为路由传参(?拼接传参)和动态路由传参一、动态路由传参定义路由const routes = [ { path: '/first', name:'first', component:()=>import( '../components/first.vue' ) // component:first }, { path: '/second', name:'second', component:()=&原创 2021-08-13 21:58:35 · 4692 阅读 · 0 评论 -
webpack打包vue项目进行打包优化
一、理解打包当项目上线后,用户不可能页通过localhost:8080访问我们的页面,只能把项目放到服务器中,才能提供给用户访问,所以vue-cli内部集成的webpack,把vue、less、js等打包成浏览器可直接执行的代码。二、进行打包打包命令 num run build输入完命令后 会在项目的根目录创建一个dist目录 这个目录里面就是我们打包后的结果。dist目录下才是浏览器认识的代码,之前可以运行是通过脚手架工具提供给我们的否则浏览器是不认识.vue文件。js文...原创 2021-08-08 00:21:11 · 3912 阅读 · 2 评论 -
vue项目中使用样式穿透
在平常开发项目中经常会遇到 父子组件嵌套,但是使用子组件时更多是为了复用,使用子组件时即不想修改子组件原来的样式,又想对它进行一些操作 这时候就用到了 样式穿透1.外层容器 >>> 在less中使用2.外层容器 /deep/ 在less中使用 3.外层容器 ::v-deep 在scss中使用如果你发现第一个不能实现 就用其他的试一试...原创 2021-08-06 21:53:14 · 261 阅读 · 0 评论 -
vue3.0手写dialog提示框
实现效果组件代码<template> <div class="xtx-dialog" v-show="visible" :class="{fade:visible}" > <div class="wrapper" :class="{fade:visible}"> <div class="header"> <h3>{{title}}</h3> <a href=".原创 2021-08-04 19:51:25 · 968 阅读 · 0 评论 -
vue项目中 自动加载注册组件
使用场景:在开发项目中 经常会注册一些全局公共组件,当项目全部开发完了就会出现下面的这种现象每次都要引入注册非常的麻烦 所以webpack 提供 自动引入注册组件https://webpack.js.org/guides/dependency-management/#require-context// webpack提供// context(目录路径,是否加载子目录,加载文件的匹配正则)const importFn = require.context('./', false...原创 2021-08-04 16:50:32 · 326 阅读 · 0 评论 -
vuex持久化插件应用vuex-persistedstate
在我们之前都是手动 把数据存到 localstoreage 和cookie中 通过vuex每次去获取,除了存储到我们也可以通过 一个插件解决 手动去存储安装vuex的持久化插件npm i vuex-persistedstate使用vuex-persistedstate插件来进行持久化store/index.js中,使用插件来做持久化。import { createStore } from 'vuex'+ import createPersistedstate from 'vuex-原创 2021-08-02 14:22:03 · 351 阅读 · 2 评论 -
vue手写Element提示框组件(confirm)
效果图组件<template> <div class="xtx-confirm" :class="{fade}"> <div class="wrapper" :class="{fade}"> <div class="header"> <h3>{{title}}</h3> <a @click="cancelCallback()" href="JavaSc..原创 2021-07-31 20:10:42 · 1403 阅读 · 4 评论 -
vue实现第三方登录——qq
目录一、介绍如何申请QQ登录解决点击登录后打开一个新窗口二、vue项目中使用(1)引入使用(2)自动生成的代码转换a链接跳转(3)将测试地址映射到本地三、登陆后的三条路线第一条路线第二条路线第三条路线一、介绍整体流程 在登录页面,QQ登录图片处,赋予其打开QQ登录页面功能。 回跳的页面得到QQ给的唯一标识openId,根据openId去后台查询是否已经绑定过账户。 如果绑定过,完成登录。 没有绑定过...原创 2021-07-30 21:10:10 · 9988 阅读 · 19 评论 -
vue 手写分页组件
效果图初始结构<template> <div class="xtx-pagination"> <a href="javascript:;" class="disabled">上一页</a> <span>...</span> <a href="javascript:;" class="active">3</a> <a href="javascript:;"&g原创 2021-07-29 14:59:00 · 462 阅读 · 0 评论 -
vue手写按钮状态组件
实现效果用插槽来支持自定义文案用props来传入指定的大小,风格 样式使用组件 <XtxButton type="gray" size="mini">加入购物车</XtxButton> <XtxButton type="plain" size="small">加入购物车</XtxButton> <XtxButton type="primary" size="middle">加入购物车</XtxButto..原创 2021-07-29 11:16:40 · 194 阅读 · 0 评论