草庐IT

Vue-Instant

全部标签

vue节流全局指令超级简单

最近后台项目管理系统居多,一直用局部指令节流有些麻烦,这里贴出全局文本框用户输入后0.8秒执行方法的节流指令和按钮节流的点击事件一、输入框节流外部引入指令方式: 1.1:新建debounce.js文件:```import Vue from 'vue'// 自定义防抖Vue.directive('debounce',{  inserted: function (el, binding) {    let timer    el.addEventListener('keyup', () => {      if (timer) {        clearTimeout(timer)      }

Vue3 踩坑记,持续更新

props的.sync在vue3中被移除vue2中写法:组件内部:定义props:{name:String}更新:$emit('update:name','xxxxx')调用组件时::name.sync="name"vue3中:组件内部:定义:props:{name:String},emits:['update:name'],更新:$emit('update:name','xxxxx')调用组件时:v-model:name="name"参考分页控件在setup()里调用this.$xxxx全局方法//getCurrentInstance获取当前实例import{getCurrentInstan

前后端分离Test SpringBoot+Vue

前后端分离前端只需要独立编写客户端代码后端只需独立编写服务端代码提供数据接口前端通过Ajax请求来访问后端的数据接口,将Model展示到View中即可前端HTML—Ajax—RESTful后端数据接口1.创建vue工程下载Node.js$npminstall-g@vue/cli//全局安装vue-cli下载太慢的话可以修改npm映射:$npmconfigsetregistryhttps://registry.npm.taobao.org/改回来:npmconfigsetregistryhttps://registry.npmjs.org/cmd中:>vueui//vue3.0以上支持的图形界面

vue.js 界面添加水印

vue后台管理项目中会加入水印的功能。预览.png第一步新建一个文件watermark.jsletwatermark={}//解决关闭页面是继续循环的问题varsetInterTime=nullletsetWatermark=(str,date)=>{letid='1.23452384164.123412416'if(document.getElementById(id)!==null){//解决在更改界面大小是报错Failedtoexecute‘removeChild’on‘Node’:Thenodetoberemovedisnotachildof//console.log('removeC

前端系列19集-vue3引入高德地图,响应式,自适应

npmi@amap/amap-jsapi-loader--saveimport AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI,可以避免异步加载、重复加载等常见错误加载错误//为地图注册click事件获取鼠标点击出的经纬度坐标 map.on("click", function (e: any) { // 点击事件 }); let infoWindow = new AMap.InfoWindow({ //创建信息窗体 isCustom: false, //使用自定义窗体 anchor: "top-right", //信息窗体的三

Vue中computed与method的区别

两者间区别:1、computed会基于响应数据缓存,在值不变的情况下不会再次计算,而是直接使用缓存中的值;methods不会缓存,调用相同的值计算还是会重新计算;2、diff之前先看data里的数据是否发生变化,如果没有变化computed的方法不会执行,但methods里的方法会执行3、computed是属性调用,不需要加括号。而methods是函数调用,必须要函数执行才可以得到结果。4、绑定方式不同。methods与compute纯get方式都是单向绑定,不可以更改输入框中的值。compute的get与set方式是真正的双向绑定。

Vue如何检测数组变化

原理分析:在数据初始化时调用initData方法,然后通过newObserver对数据进行监测,然后对数据进行判断,如果是数组并且支持原型链,就会执行protoAugment让目标原型链指向arrayMethods,arrayMethods用来改写数组的原型方法。内部会采用函数劫持的方式,当用户调用这些方法(push,pop,shift,unshift,sort,splice,reverse)之后,还会调用原数组的方法进行更新数组。拿到原数组的方法,然后重新定义这些方法。用户调方法时走的是重写的mutator函数,这个函数还是会调用数组原有的方法,重写的mutator函数中会调用原生的方法,对

Vue+SpringBoot根据url返回文件流给前端下载文件(多个图片zip下载)

后端单个文件下载packagecom.ruoyi.common;importcom.ruoyi.project.system.domain.TSystemFile;importorg.springframework.web.bind.annotation.GetMapping;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;importjavax.servlet.http.HttpServletRes

Vue环境安装

Vue环境安装一、node.js安装1、下载2、配置环境变量3、配置默认安装目录及淘宝源二、安装Vue及脚手架1、安装Vue.js2、安装vue脚手架三、创建新项目一、node.js安装1、下载点击node去官网下载最新版node.js选择合适的版本,我这里选择的是zip文件。2、配置环境变量将下载后的文件解压到某一文件目录下,然后配置环境变量,步骤如下打开node解压后的文件,如下所示在目录下需要node_cache、node_modules、node_global三个文件,若没有则新建。node_cache作为缓存目录,node_global为默认安装目录。鼠标右键点击“我的电脑”图标,选

vue 监听元素高度变化

要监听元素高度变化,你可以使用Vue.js的$watch方法。首先,在你的Vue组件的data中声明一个变量来存储元素的高度:data(){return{elementHeight:0}}然后,在mounted钩子函数中使用$watch方法监听elementHeight变量:mounted(){this.$watch('elementHeight',newHeight=>{//当elementHeight变化时,这里的代码将会执行console.log(`元素的新高度是:${newHeight}`)})}在你的模板中,你可以使用元素的offsetHeight属性来获取它的高度:template