![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
超人不会飞2021
学无止境…
展开
-
Vue中手写checkbox自定义复选框、单选全选
可以自定义各种样式的单选复选框,比一些组件用起来方便。Vue中手写checkbox自定义复选框、单选框。案例展示,样式就不多阐述了,自己根据情况写。原创 2023-07-21 15:09:23 · 732 阅读 · 0 评论 -
微信小程序组件scroll-view滚动到底部多次触发加载如何解决?
在 iOS 真机上,scroll-view 滚动时会多次触发 scrolltolower 事件的问题,可以设置一个“加载标识”(如 DisableTrigger)来避免重复请求下一页数据。在 onreachBottom 方法中,判断 DisableTrigger 是否为 true,如果是,则执行下一页数据的加载,否则不做任何操作。在 init()方法中,在请求数据前将 DisableTrigger 设置为 false,表示当前正在加载数据。原创 2023-05-23 11:13:07 · 2217 阅读 · 0 评论 -
vue 实现一键复制文字
【代码】vue 实现一键复制文字。原创 2022-09-05 11:11:11 · 450 阅读 · 0 评论 -
vue实现简单的鼠标拖拽横向滚动和 鼠标滚轮横向滚动
以下代码项目中直接使用即可,此种方法是通过鼠标拖拽进行滚动,滑动滚轮无效果。当然快捷键,shift+鼠标滚轮可以控制横向滚动,对用户来说体验不友好。原创 2022-07-20 13:29:42 · 9995 阅读 · 8 评论 -
基于vue3封装一个分页组件
目的:封装一个统一的分页组件,方便复用。分页的本质:分批次查询数据(基于页码page和每页条数pagesize),后端接收到分页参数后,会基于这些参数查询数据库,然后基于数据库进行分页:基于SQL语句(select * from user limit n, m)落的代码:<template> <div class="xtx-pagination"> <a @click='changePage(false)' href="javascript:;" :clas原创 2021-09-29 11:46:37 · 269 阅读 · 0 评论 -
vue3中ref属性的解释和使用方式
组合API-ref属性在vue2.x中,可以通过给元素添加ref='xxx'属性,然后在代码中通过this.$refs.xxx获取到对应的元素然而在vue3中时没有$refs这个东西的,因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取。目标:掌握使用ref属性绑定DOM或组件获取DOM或者组件实例可以使用ref属性,写法和vue2.0需要区分开基于Vue2的方式操作ref-----数组场景<ul> <li v-for="(item, index)原创 2021-09-11 10:04:29 · 20562 阅读 · 0 评论 -
使用Element组件Calendar日历标注当前日期和周六日
使用element日历插件,标注今日日期和周六日实现这种效果的代码如下:<template> <el-calendar v-model="value"> <template slot="dateCell" slot-scope="{ date, data }"> <div class="date-content"> <span class="text">{{ getDay(date) }}</sp原创 2021-09-08 12:34:47 · 5036 阅读 · 4 评论 -
v-model双向绑定的原理分析及使用
vue中v-model使用v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:1. v-bind绑定一个value属性2. v-on指令给当前元素绑定input事件自定义组件使用v-model,应该有以下操作:接收一个value prop触发input事件,并传入新值一般来说我们用v-model是在input中 常见用法如下:<input v-model="inputValue">其实v-model是一种语法糖,v-model 上面原创 2021-08-28 14:09:03 · 2450 阅读 · 0 评论 -
Vue中svg-icon组件的使用方法
svg-icon组件的基本流程:svg-icon是一个全局组件,在src/icons/index.js中定义并注册成立全局组件。在main.js中引入了它额外需要svg-sprite-loader@4.1.3的配合,及对应的vue.config.js中的配置。它的使用格式<svg-icon icon-class="文件名"/> 。这里的文件名就是在src/icons/svg下的文件名如何在新项目使用svg-icon组件 步骤1.安装依赖npm i svg-sprite-loade原创 2021-08-23 19:51:52 · 1716 阅读 · 0 评论 -
element-ui表格table翻页如何让序号延续递增
在使用element-UI的el-table时,我们添加了type=“index” ,如果设置了 index 则显示该行的索引(从 1 开始计算)。但是每一页都是从1开始计算。当我们想要切换页码时,希望序号接着上一页的,实现表格翻页序号递增/延续。下面演示如何实现分页切换时序号递增,代码如下:结构<el-table-column label="序号" type="index" :index="indexAdd" width="50" />js<script>expo原创 2021-08-18 15:34:29 · 2652 阅读 · 0 评论 -
Element-ui Form表单校验-兜底校验-自定义检验规则
用户登录表单-数据双向绑定<template> <div class="form-container"> <el-form label-width="80px"> <el-form-item label="手机号"> <el-input v-model="form.mobile"></el-input> </el-form-item> <el-form-原创 2021-08-17 16:12:13 · 3733 阅读 · 1 评论 -
vue全家桶之vuex状态管理的入门速成秘籍
vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。组件之间共享数据的方式父向子传值:v-bind 属性绑定子向父传值:v-on 事件绑定兄弟组件之间数据共享:EventBus$on 接收数据的那个组件$emit 发送数据的那个组件使用 Vuex 统一管理状态的好处Vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。1、能够在 vuex原创 2021-08-08 21:58:54 · 853 阅读 · 0 评论 -
vue项目在打包时,如何一键去掉所有console.log输出
vue项目在打包时,去掉所有的console.log输出目的: 希望项目上线后想让所有的打印失效 分析 如果自己删除, 那开发还得加回来, 注释也一样啊, 麻烦 能否配置环境变量, 让代码自己来判断呢,配置好就不用我们在来回操作了 那么接下来就是实现方式了: 首先在项目 根目录下配置文件(脚手架环境变量) 在.env.development (开发环境变量) NODE_ENV 变量名随便起, 值不用加引号就是字符串了 NODE_ENV原创 2021-08-05 21:44:58 · 8732 阅读 · 3 评论 -
如何封装一个vue自定义指令自动获取文本框焦点
一个指令定义对象可以提供如下几个钩子函数 (均为可选): bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 1.新建一个文件,命名为directive.jsimp.原创 2021-08-04 20:43:00 · 1354 阅读 · 0 评论 -
vue开发环境怎么使用vue-cli代理服务器解决跨域
目标:解决跨域问题什么是跨域: 网页所在url的协议, 域名, 端口号, 和Ajax请求url的协议, 域名, 端口号有一个对应不上, 就发生跨域 跨域是浏览器对ajax做出的限制 例如我们演示用axios请求网易新闻地址, 发现跨域报错,请求不到数据 http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html 代理转发 如果后端jsonp也不弄, cors也不弄, 就给你个接口地原创 2021-08-03 15:04:08 · 702 阅读 · 0 评论 -
什么是axios拦截器?有哪些作用和使用场景
axios介绍及安装Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 官方资料和介绍从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF使用 npm安装:$ npm install axios或者直接使用 cdn:<script src="ht原创 2021-07-26 19:15:47 · 17793 阅读 · 2 评论