草庐IT

Vue-Router

全部标签

【源码系列#05】Vue3响应式原理(Ref)

Ref&ShallowRefref:接受一个参数值并返回一个响应式且可改变的ref对象。ref对象拥有一个指向内部值的单一属性.value可以将ref看成reactive的一个变形版本,这是由于reactive内部采用Proxy来实现,而Proxy只接受对象作为入参,这才有了ref来解决值类型的数据响应,如果传入ref的是一个对象,内部也会调用reactive方法进行深层响应转换constcount=ref(0)console.log(count.value)//0count.value++console.log(count.value)//1shallowRef:ref()的浅层作用形式。和

构建 dotnet&vue 应用镜像->推送到 Nexus 仓库->部署为 k8s 服务实践

前言前面分享了k8s的部署安装,本篇来点实操,将会把一个.netcore+vue的项目(zhontai),打包构建成docker镜像,推送到nexus镜像仓库,并部署到k8s中准备要实现项目的部署,除了准备要部署的环境(k8s),还需要准备项目所用到的各中间件,本文旨在分享部署的一个整体流程,对项目中所使用到的各中间件(mysql,redis等)的安装使用可自行在本DevOps系列文章中找到一个.netcore+vue的项目使用zhontai项目,之前也有做分享,文章介绍后端Admin.Corev3.7.1前端admin.ui.plusv2.2.0Nexus的安装部署,文章介绍做为镜像仓库使用

uni-app/vue封装etc车牌照输入,获取键盘按键键值

先看下效果如下:动态图如下uniapp的keyup获取不到keyCode和compositionstart,compositionend,所以需要监听input节点的keyup事件,思路以及代码如下:1.将每一个字符用文本框输入,代码如下viewclass="license-input">inputtype="text"class="input-codecode0"/>inputtype="text"class="input-codecode1"/>...view>2.初始化的时候将input下的真是inputdom绑定keyup事件调用skipnext,并传入每一个input的index,同

【源码系列#05】Vue3响应式原理(Ref)

Ref&ShallowRefref:接受一个参数值并返回一个响应式且可改变的ref对象。ref对象拥有一个指向内部值的单一属性.value可以将ref看成reactive的一个变形版本,这是由于reactive内部采用Proxy来实现,而Proxy只接受对象作为入参,这才有了ref来解决值类型的数据响应,如果传入ref的是一个对象,内部也会调用reactive方法进行深层响应转换constcount=ref(0)console.log(count.value)//0count.value++console.log(count.value)//1shallowRef:ref()的浅层作用形式。和

Vue3这个API慎用!可能会有性能问题!

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~背景Vue3有一个API,可能很多人都用过,那就是 watchEffect,他的功能跟 watch 有点类似,但又有些不一样,用法如下,它会去自动收集依赖的响应式数据,响应式数据一变,就会触发函数的重新执行图片谨慎使用!我发现组员们很喜欢用watchEffect,他们的意思是watchEffect比较方便,写起来比较爽其实我个人是很少用 watchEffect 的,因为我感觉:watchEffect 的依赖不够明确watchEffect 可能有性能问题可维护性较差先来说第一点,我举个例子,假如我要监听a

Vue中Scope是怎么做样式隔离的?

scope样式隔离在Vue中,样式隔离是通过 scoped 特性实现的。当在一个组件的  标签上添加 scoped 特性时,Vue会自动为这个样式块中的所有选择器添加一个唯一的属性,以确保这些样式只对当前组件生效,从而达到样式隔离的效果。以下是 scoped 样式隔离的基本原理:「唯一属性添加:」 在编译过程中,Vue会将样式块中的每个选择器都转换为一个带有唯一属性的选择器。例如,如果有一个类似 .my-class 的选择器,可能会被转换成类似 .my-class[data-v-xxxxxxx] 的形式,其中 data-v-xxxxxxx 是一个唯一的属性。「属性注入到组件元素:」 在组件渲染

前端vue制作的h5页面接入微信支付流程(jsapi方式)

h5微信jsapi支付参考链接jsapi介绍准备工作第一步微信授权获取用户openid第二步调起微信支付常见错误参考链接微信支付jsapi官方文档微信网页授权jsapi介绍准备工作公众号商户号备案域名配置应用先参考支付指引接入准备基本步骤1、在商户号关联公众号2、在商户号配置支付授权目录(支付目录+回调目录)3、在公众号配置网页授权域名第一步微信授权获取用户openid参考链接微信网页授权进入页面后从缓存中判断是否已经拿到用户openid,或者地址栏上是否携带code,没有则调用下面代码进行申请用户授权letprotocol=window.location.protocol;lethost=w

【vue3】js + css 实现 视频框选放大:局部细节放大、放大镜效果

一、需求描述实现鼠标框选区域放大显示。需求1:放大按住鼠标左键不放——》向右侧拖动,框选出需要放大的区域后——》松开鼠标——》框选区域放大显示需求2:还原按住鼠标左键不放——》向左侧拖动,框选出随意大小的区域后——》松开鼠标——》视图显示大小还原需求3:多个视频页面中,同时展示多个视频二、实现逻辑记录框选出的需要放大的区域的位置(坐标)和大小(尺寸)将框选大小与原画面大小对比,计算放大倍数计算放大后画面需要平移的数据,使其画面中心点位于原画面展示中心还原功能,即还原画面原始大小三、代码实现1、html部分template> divid="all"class="all"> divv-for="i

Vue接口调用(二)axios用法

Vue接口调用🔥接口调用地址Vue接口调用(一)fetch用法https://blog.csdn.net/m0_55990909/article/details/123957200Vue接口调用(二)axios用法🔥https://blog.csdn.net/m0_55990909/article/details/123981283Vue接口调用(三)async/await用法🔥https://blog.csdn.net/m0_55990909/article/details/123981292axios用法✍目录总览:1.axios的基本特性axios是一个基于Promise用于浏览器和no

【vue脚手架配置代理+github用户搜索案例+vue项目中常用的发送Ajax请求的库+slot插槽】

vue脚手架配置代理+github用户搜索案例+vue项目中常用的发送Ajax请求的库+slot插槽1vue脚手架配置代理2github用户搜索案例2.1静态列表2.2列表展示2.3完善案例3vue项目中常用的发送Ajax请求的库3.1xhr3.2jQuery3.3axios3.4fetch3.5vue-resource4slot插槽4.1效果4.2理解1vue脚手架配置代理下载axios引用axios:importaxiosfrom'axios'解决跨域方法:1>cors:http://t.csdnimg.cn/VdMIT2>jsonp:用的少,只能解决get请求的跨域问题3>配置一个代理服