![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
大前端
文章平均质量分 62
web,小程序,app
GengMS_DEV
某不知名招投标数字化公司
展开
-
【大前端】vue,jq,uniapp ajax默认的请求格式
vue,jq,uniapp ajax默认的请求格式文章目录vue,jq,uniapp ajax默认的请求格式常见的内容类型(content-type)jq默认请求格式默认内容类型:multipart/form-data请求格式VUE默认请求格式:默认的内容格式设置请求格式:uniapp常见的内容类型(content-type)application/x-www-form-urlencoded 表单中默认的encType,表单数据被编码为key/value格式发送到服务器application/js原创 2021-06-09 20:54:03 · 721 阅读 · 0 评论 -
【大前端】uniapp上传图片
uniapp上传图片看本篇文章之前建议看下本篇文章直接上代码uni.chooseImage({ success: (chooseImageRes) => { //获取文件的路径 const tempFilePaths = chooseImageRes.tempFilePaths; let that = this; uni.uploadFile({ url: getApp().globalData.login+'uploa原创 2021-06-09 20:57:27 · 338 阅读 · 0 评论 -
【大前端】说说vue的导航守卫
说说vue的导航守卫文章目录说说vue的导航守卫全局守卫全局前置守卫全局解析守卫全局后置钩子路由独享的守卫组件内的守卫完整的导航解析流程全局守卫全局前置守卫格式:router.beforeEach((to, from, next) => { // ...})参数说明:to :Route:即将要进入的目标路由对象from:Route :当前导航正要离开的路由next: Function:next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confi原创 2021-02-01 17:07:28 · 224 阅读 · 0 评论 -
【大前端】说说vue的编程式导航
说说vue的编程式导航文章目录说说vue的编程式导航router.push()router.go(n)router.go(n)除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push或者其他方法router.push()使用router.push()或者<router-link>原创 2021-01-30 19:42:10 · 291 阅读 · 0 评论 -
【大前端】说说的vue-router的动态路由
说说的vue-router的动态路由文章目录说说的vue-router的动态路由1.params设置法2.万能匹配模式那如何实现404错误呢?1.params设置法如果一个路由路径为/home/:id,那么不管/home/user1还是/home/user2都会跳转到/home/:id所对应组件注意是/home/:id而不是/home:id一个路径参数使用:标记,当匹配到一个路由时,参数值会被设置到this.$route.params.可以在所要跳转到的组件内用this.$route.pa原创 2021-01-29 17:21:44 · 192 阅读 · 0 评论 -
【大前端】说说vue的$root,$parent,$refs和$children
说说vue的$root,$parent,$refs和$children文章目录说说vue的\$root,\$parent,\$refs和\$children$root$parent$refs$children$root访问根元素。语法:this.$root.属性名。在普通html工程内的用法看官网即可。如果在vue-cli工程内使用$root:有人可能认为根元素是App.vue。但是其实是main.js中new Vue这个实例,在new Vue这个实例中定义data即可$root可以将根组原创 2021-01-27 20:24:37 · 1255 阅读 · 1 评论 -
【大前端】说说vue的插槽
说说vue的插槽文章目录说说vue的插槽后备内容具名插槽插槽的编译作用域插槽缩写具名插槽缩写本篇对最基础内容废弃语法不再解释,主要对实际场景中可能运用出错的知识点进行归纳总结插槽的出现,增加了组件可复用的场景,即使业务场景不一样,只要模板差不多就可以使用插槽。后备内容有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。可以像下面来实现后备内容:子组件:<button type="submit"> <sl原创 2021-01-26 18:01:35 · 311 阅读 · 1 评论 -
【大前端】说说vue的自定义事件
说说vue的自定义事件文章目录说说vue的自定义事件基本语法格式.sync修饰符基本语法格式子组件:methods:{ send(){ this.$emit('my-event') }}父组件接受自定义事件并设置触发对应事件<my-component @my-event="doSomething"></my-component>不同于组件和prop,时间名不会被用作一个JavaScript变量名或property 名,所以就没有理由使用 camelCase原创 2021-01-25 17:15:56 · 150 阅读 · 0 评论 -
【大前端】说说Vue的动态组件
说说Vue的动态组件在动态组件上使用keep-alive使用<component>标签或者使用<router-like>标签默认页面或组件切换的时候,会重新创建组件。如果应用在频繁切换组件的场景下会很影响性能。如果要组件切换间,组件不会频繁的创建销毁,那么可以在外层包裹一层keep-alive标签。实现类似缓存的功能。以此来降低性能消耗和保存页面状态处理加载状态const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `原创 2021-01-24 18:03:52 · 245 阅读 · 1 评论 -
【大前端】说说vue的组件注册(全局注册和局部注册)
说说vue的组件注册(全局注册和局部注册)文章目录说说vue的组件注册(全局注册和局部注册)组件名规范使用kebab-case:使用PascalCase全局注册局部注册组件名规范定义组件名的方式有两种使用kebab-case:Vue.component(‘my-component-name’, 组件)当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 。使用PascalCaseVue.component(原创 2021-01-24 16:39:26 · 466 阅读 · 0 评论 -
【大前端】说说vue的表单绑定
说说vue的表单绑定文章目录说说vue的表单绑定复选框单选框选择框修饰符.lazy.number.trim本篇就不说单选框和文本域了,那个直接v-model就行复选框如果复选框绑定到的data对象是:数组,那么默认绑定到复选框的value值,如果没有value值,则选中为null。非数组,那么默认绑定到复选框是否选中的布尔值,选中为true,未选中为false.复选框:<input type="checkbox" v-model="toggle" true-valu原创 2021-01-23 18:18:38 · 121 阅读 · 0 评论 -
【大前端】说说vue的事件处理
说说vue的事件处理文章目录说说vue的事件处理事件修饰符按键修饰符按键码系统修饰按键.exact修饰符鼠标按钮修饰符为什么在HTML中监听事件?事件修饰符stop防止事件传递prevent阻止默认事件capturecapture 实现捕获触发事件 当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。 就是谁有该事件修饰符,就先触发谁。self只有点击当前元素时候,才会触发事件处理函数once(2.4.0新增)只会触发一次事件函数passive(2.3.原创 2021-01-22 17:56:04 · 166 阅读 · 0 评论 -
【大前端】说说vue的列表渲染
说说vue的列表渲染文章目录说说vue的列表渲染v-for里渲染对象维护状态数组更新检测对于对象对于数组声明响应式 property渲染内容为方法返回值本篇文章主要讲解vue列表渲染方面较深的点基础例子与讲解可以看官网https://cn.vuejs.org/v2/guide/list.htmlv-for里渲染对象如果列表渲染为对象,那么可以使用v-for的参数分别获取对象的键值与序号举例:<div v-for="(value, name, index) in object">原创 2021-01-21 14:38:56 · 480 阅读 · 0 评论 -
【大前端】说说vue的Class与Style绑定
说说vue的Class与Style绑定废话不多说,直接开门见山Class绑定对象语法html内嵌法<div v-bind:class="{ 类名: 决定类名是否生效的布尔值,类名: 决定类名是否生效的布尔值,… }"></div>绑定data法除了上面内嵌在html内的写法,同理,类名的配置也可以直接写在data里<div :class="classObject" ></div>data(){ return{ classObj原创 2021-01-20 16:44:00 · 250 阅读 · 0 评论 -
【大前端】说说vue的侦听器
说说vue的侦听器文章目录说说vue的侦听器简单语法:复杂语法:复杂语法对应属性immediatedeep(深度监听)上次这篇文章说了一下计算属性,今天简单说一下watch(侦听器)简单语法:watch和data同级export default { watch: { 要监听的属性名: function (val) { //val是变化之后的新值 //要执行的操作 } }}复杂语法:export default { watch: {原创 2021-01-19 16:30:19 · 287 阅读 · 2 评论 -
【大前端】说说vue的计算属性
说说vue的计算属性为什么出现计算属性功能便于维护这里我们举vue官网的例子<div id="example"> {{ message.split('').reverse().join('') }}</div>对于属性的附加运算完全可以这样写在模板里,不用多写什么方法。但是模板设计的初衷是用于简单运算如果模板中放入太多的逻辑会让模板过重以致难以维护所以 任何复杂逻辑,你可以使用方法,计算属性或者watch区别下边来讲执行效率计算属性是基于它们的响应式依赖原创 2021-01-18 12:49:50 · 258 阅读 · 0 评论 -
【大前端】快速开启你的vue之路(快速安装vue环境以及创建项目)
【大前端】快速开启你的vue之路(快速安装vue以及创建项目)废话不多说,直接进正题1.安装node.js(8.9以上)官网下载地址:https://nodejs.org/zh-cn/1.1查看node是否安装成功输入node -v出现版本号就说明成功了,可以看出我这里用的14.0.0好久没更新了,我这个可能不是长期支持版,大家可以上官网下载长期支持版,更加稳定2.下载cnpm使用淘宝NPM镜像源下载比较快 命令:npm install -g cnpm --regist原创 2021-01-17 16:32:37 · 222 阅读 · 0 评论 -
【大前端】uniapp如何实现回顶效果(滚动条监听)
【大前端】uniapp如何实现回顶效果(滚动条监听)对于较长的页面,使用回顶特效是很能提升用户感受的。其实uniapp中实现此功能也非常简单,只需要使用一个api以及一个生命周期函数生命周期函数:onPageScroll(e)onPageScroll(e)相当于对当前页面进行滚动条监听。e是每次滚动屏幕返回的对象,其中scrollTop属性为当前位置距顶部的距离;代码示例:onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮 if (e.scrollTop &原创 2020-09-05 07:53:48 · 1541 阅读 · 2 评论 -
vue如何引入本地图片?只需要添加一个关键字
vue如何引入本地图片?只需要添加一个关键字vue在引入本地图片时,直接使用相对路径是不可以的。需要添加require 关键字。具体使用方法,举例:在data里新建个imgUrl地址,具体如下:data(){ return{ imgUrl:require("./assets/Homehomepagemenu.png") }}然后就可以直接在html里添加了。<template> <img :src="imgUrl" /></template>原创 2020-08-29 11:14:51 · 1312 阅读 · 0 评论 -
uniapp调出拨号菜单
调出拨号菜单主要用在介绍的页面,实现这个功能非常简单调用uni.makePhoneCall(OBJECT) api参数名类型必填说明phoneNumberString是需要拨打的电话号码successFunction否接口调用成功的回调failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)uni.makePhoneCall({ phoneNumber原创 2020-08-28 09:30:06 · 1258 阅读 · 0 评论 -
uniapp实现不同端不同效果,跨端兼容条件编译
uniapp实现不同端不同效果,跨端兼容条件编译仅用一个页面文件,可以使在不同端有不同的显示效果,而不用新建页面文件。这就是uniapp条件编译的作用。文章目录uniapp实现不同端不同效果,跨端兼容条件编译条件编译介绍写法:`%PLATFORM%`可取值如下:官方写法举例:支持的文件static目录的条件编译官方例子:整体目录条件编译条件编译介绍条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。写法:以#ifdef或 #ifndef 加 %PL原创 2020-08-26 11:49:54 · 28434 阅读 · 0 评论 -
uniapp实现预览图片,预览图片列表并保存到手机
uniapp预览图片,预览图片列表并保存到手机uniapp给我们提供很多现成的接口,这篇讲解一下图片预览接口 - uni.previewImage(OBJECT)文章目录uniapp预览图片,预览图片列表并保存到手机OBJECT 参数说明longPressActions 参数说明success 返回参数说明实例:***话不多说,直接上干货***OBJECT 参数说明参数名类型必填说明currentString/Number详见下方说明详见下方说明urlsArr原创 2020-08-25 14:25:59 · 27583 阅读 · 0 评论 -
uniapp实现上传图片并显示
uniapp实现上传图片并显示uniapp为我们提供了非常多的api接口,当然包括上传图片的接口,可以直接使用文章目录uniapp实现上传图片并显示uniapp图片上传接口 - uni.chooseImage(OBJECT)success 返回参数说明File 对象结构如下示例:uniapp图片上传接口 - uni.chooseImage(OBJECT)参数名类型必填说明平台差异说明countNumber否最多可以选择的图片张数,默认9见下方说明sizeTyp原创 2020-08-25 13:54:04 · 42252 阅读 · 7 评论 -
uniapp如何实现上拉加载(uniapp懒加载)?其实简简单单
uniapp如何实现上拉加载(uniapp懒加载),其实简简单单不管是微信小程序,app上拉加载功能我感觉用的都是很多的,尤其是电商项目。文章目录uniapp如何实现上拉加载(uniapp懒加载),其实简简单单第一步开启上拉加载功能:第二步添加指定生命周期函数第一步开启上拉加载功能:需要在pages.json文件的globalStyle对象中添加onReachBottomDistance属性,并赋予指定值(属性值为相对于底部的距离),如图:第二步添加指定生命周期函数在需要使用功能的页原创 2020-08-24 10:19:48 · 28119 阅读 · 0 评论 -
uniapp如何下拉刷新?其实简简单单
uniapp如何上拉刷新?其实简简单单不论是微信小程序和app上拉刷新功能都是非常常用的,可以说是每个app的标配。话不多说,直接上干货第一步:1.1app全局开启下拉刷新需要在pages.json文件的globalStyle对象中开启enablePullDownRefresh属性,如图:1.2 app中单个页面开启下拉刷新在pages.json文件中的pages数组中找到对应的页面,并在对应页面的style属性中开启enablePullDownRefresh,如图:下拉刷新功能开启原创 2020-08-24 09:48:11 · 40305 阅读 · 1 评论 -
使用uniapp原生组件配置一个基础的底部tabbar
使用uniapp原生组件配置底部tabbar如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。文章目录使用uniapp原生组件配置底部tabbar开始配置tabbar常用的配置项介绍:tabbar - list 配置项介绍:参考代码:开始配置tabbar配置选项是和pages同级的tabbar常用的配置项介绍:属性介绍colortab 上的文字默认颜色selectedColortab 上的文字选中原创 2020-08-23 11:22:40 · 30746 阅读 · 1 评论 -
简简单单三两步,让你学会在uniapp中引入并使用iconfon图标
uniapp中使用网络字体图标(iconfont)我发现越来越多的人抛弃了像Font Awesome这样的图标库,原来可能是图标过于单调和缺少社区活跃度带来的很多优秀的字体图标创作者,当然上面也可能是我 个人的错觉。画不多哔哔,直接开始正题。前言:uniapp中不支持Symbol多色字体,所以我们以下介绍的为Unicode,和Font class在uniapp中的本地引入用法和网络css引入方法Unicode和font class本地资源引入方法:第一步:第二步:在static目录下新原创 2020-08-22 20:32:35 · 29179 阅读 · 1 评论 -
【web前端】前端性能优化指南,还不来看看?
【web前端】前端性能优化指南,还不来看看虽然现在网速已经非常快了,但是对于极致性能的追求一直从未停止过,那怕提升1s,也是用户体验的一大步提升。文章目录【web前端】前端性能优化指南,还不来看看1.图片资源优化1.1图片大小适中1.2使用精灵图1.3使用字体图标1.4使用WebP格式的图片2设置浏览器缓存3 项目代码优化&资源打包压缩⭐3.1代码建议:4使用CDN网络传输性能测试工具:Page Speed废话多说,这篇文章就基础的讲一下前端页面的优化项都有哪些1.图片资源优化1.原创 2020-08-10 16:24:16 · 27434 阅读 · 1 评论 -
图解css3弹性布局/弹性盒子/Flex Box
css3弹性布局,弹性盒子知识点详解文章目录css3弹性布局,弹性盒子知识点详解1.flex-direction2.justify-content3.align-items4.flex-wrap5.align-content6.align-self弹性盒子是 CSS3 的一种新的布局模式。废话不多哔哔,直接上干货HTML代码 <div> <div > 1. <img src="https://csdnimg.cn/cdn/content-toolb原创 2020-07-24 15:37:39 · 27764 阅读 · 0 评论 -
【vue】vue父子组件那些事(最全知识点)看这一篇就够了!
【vue】vue父子组件那些事(最全知识点)看这一篇就够了!父子之间之间的通信1.父传子(props)需要在vue实例中添加props事件,如下所示html:<cpn :movies="movies"> </cpn>vue:props:{ // 提供一些默认值,以及必传值 movies:{ type:Array, //这里数组或者对象,默认值必须是一个函数 default(){ return["sdf原创 2020-05-30 18:05:55 · 24948 阅读 · 0 评论 -
【Vue】什么?2020年了,你连vue都没学,还不快来入门!
【Vue】什么?2020年了,你连vue都没学,还不快来入门!前言,本篇为vue的特别基础指令篇,适用于还没入门或者刚刚入门的同学。vue大佬可以到我空间看看别的,哈哈重点组件配置及用法(基础篇)基本指令篇1.v-text往元素内部添加文本内容,相当于JS中的innerText两种用法:<div v-text="content"></div><...原创 2020-04-30 10:44:21 · 49131 阅读 · 5 评论 -
【vue】vue-cli,vue-router重点组件(详细配置及用法说明)
【vue】vue-cli,vue-router重点组件(详细配置及用法说明)1. vue-cli:创建项目基本结构的工具原创 2020-04-30 10:38:54 · 26223 阅读 · 0 评论 -
【UI】10套抗疫图标,疫情图标,图标素材(免费)!
【UI】抗疫图标,疫情图标素材(免费)知名的免费图标网站 Iconfinder 要和大家一起对抗新冠病毒,和图标设计师联手推出一系列「防疫免费图标集」(Coronavirus awareness icons),超过 200 个与公共卫生、病毒传播相关图标,这些图案包括常见的 PNG 和 SVG 格式,可以将它们加入标志、海报、传单或类似的内容使用。值得一试的三个理由:Iconfinde...原创 2020-03-30 18:29:33 · 34296 阅读 · 0 评论 -
【echarts】echarts实现疫情地图(一看就会篇)
echarts实现疫情地图(一看就会篇)echarts相比于highcharts更加简单上手,所以现在我个人觉得echarts的使用者是比highcharts多的,前面我介绍过highcharts实现疫情地图的方式,所以今天来补充一下echarts的使用方法一.echarts介绍ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容...原创 2020-03-29 11:01:09 · 62819 阅读 · 12 评论 -
【highcharts】highcharts(highmaps)实现疫情地图(一看就会篇)
【highcharts】highcharts(highmaps)实现疫情地图有人可能问为什么不用echarts,echarts简单容易上手啊,因为echarts他官网没有地图数据的下载地址需要自己上网搜比较麻烦,并且highcharts官网有全世界的地图,大到世界地图小到世界各地市区地图,都是比较全的,后期加个下钻功能也是比较方便容易的。一,highcharts使用介绍Highchart...原创 2020-03-27 11:51:47 · 30892 阅读 · 0 评论 -
HTML列表标签--详解
html列表无序列表无序列表使用粗型圆点(典型小圆点)。无序列表用 ul 标签,无序列表项用 li 标签 <ul type="" > <li>冬瓜</li> <li>西瓜</li> <li>南瓜</li> <li>北瓜</li> </ul>浏览器效果...原创 2020-02-18 11:49:41 · 26036 阅读 · 2 评论 -
【css选择器】史上最全css选择器语法/使用介绍
css选择器(css1-css3)学习css最基础也是最重要的就是学好css的选择器,它不仅能帮助你提高效率,还可以简化代码;选择器例子说明css.class.className选中类名为className的元素1#id.ID_Name选中ID名为ID_Name的元素1*.*选中所有元素2elementdiv选中所有div元素1...原创 2020-02-20 16:27:23 · 27051 阅读 · 0 评论 -
【前端】小白都能快速入门的前端插件(2020),还不快来用。
小白都能快速入门的前端插件,还不快来用。前言: 为什么要用插件,有什么好处?使用前端插件能够简化代码,降低维护成本;提高效率,就那现在依旧用的人很多的jq。虽然能完成工作,但是对dom的重复调用会很消耗性能,拖延网页打开的速度。对于程序员本身而说,可以以很简单并且很快的速度完成工作,用剩下的那点事件看会电影不行吗?fontawesome(字体图标)Font Awesome 字体...原创 2020-02-27 23:32:52 · 27144 阅读 · 0 评论 -
【js】js和jq实现回顶动画效果和滚动条监听事件详解
js/jq实现回顶动画效果在平常的网站中为了优化用户体验,可以说回顶效果是应用最多的js特效了。废话不多说,直接开门见山。html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content...原创 2020-03-06 10:07:25 · 26066 阅读 · 0 评论