随笔分类 -  前端

1 2 下一页
vue动态绑定class的最常用几种方式：
摘要：第一种：（最简单的绑定） 1.绑定单个class html部分： <div :class="{'active':isActive}"></div> js部分：判断是否绑定一个active data() { return { isActive: true }; } 结果渲染为： <div class= 阅读全文
posted @ 2021-06-10 12:45 潜跃 阅读(342) 评论(0) 推荐(0)
JS常用验证正则表达式
摘要：1.用户名正则 //用户名正则，4到16位（字母，数字，下划线，减号） var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uPattern.test("dishait")); 2.密码强度正则 //密码强度正则，最少6位，包括 阅读全文
posted @ 2021-06-09 16:28 潜跃 阅读(168) 评论(0) 推荐(0)
懒加载
摘要：1、什么是懒加载？ 懒加载也就是延迟加载。 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 2、为什么要使用懒加载？ 阅读全文
posted @ 2021-05-17 17:54 潜跃 阅读(351) 评论(0) 推荐(0)
uni—父子组件通讯传值注意事项
摘要：不能在子组件中直接操作父组件传过来的值，需要在子组件中重新定义赋值一个新的变量之后才可以使用(否则在微信小程序中会出现一些效果无法实现) 阅读全文
posted @ 2021-04-24 18:19 潜跃 阅读(137) 评论(0) 推荐(0)
vue—出现avoid using JavaScript unary operator as property name: "delete(index)"错误
摘要：JS的关键字中有delete，所以不能使用，更换方法名即可 阅读全文
posted @ 2021-04-23 15:16 潜跃 阅读(296) 评论(0) 推荐(0)
css中:after和:before的作用及使用方法
摘要：1. :before 和 :after 的主要作用是在元素内容前后加上指定内容，示例： HTML代码： <p>你好</p> CSS代码： p:before{ content: 'Hello'; color: red; } p:after{ content: 'Tom'; color: red; } 阅读全文
posted @ 2021-04-20 16:56 潜跃 阅读(7881) 评论(0) 推荐(0)
vue—封装无数据时默认展示组件
摘要：效果图： 子组件： <template> <view class="nothing animated fadeIn"> <image src="../../static/common/nothing.png" mode="widthFix"></image> </view> </template> 阅读全文
posted @ 2021-04-14 17:52 潜跃 阅读(336) 评论(0) 推荐(0)
vue—组件封装（上拉加载功能）
摘要：直接使用uniapp插件市场提供的LoadMore插件即可 阅读全文
posted @ 2021-04-13 15:55 潜跃 阅读(219) 评论(0) 推荐(0)
vue—顶部选项卡功能的组件封装
摘要：效果图： 页面可以左右滑动，上面选项卡主题也会跟着动 功能实现： 子组件： <template> <view> <!-- 顶部选项卡功能 --> <view class="uni-tab-bar"> <scroll-view scroll-x="true" class="uni-swiper-tab 阅读全文
posted @ 2021-04-12 18:33 潜跃 阅读(434) 评论(0) 推荐(0)
vue—封装组件（列表样式）
摘要：效果图： 主要就是需要把写的vue前端页面中的每个数据抽离出来，方便后续的引用与修改 原来的vue代码： <template> <view> <view class="index-list"> <view class="index-list1"> <view class=""> <image src 阅读全文
posted @ 2021-04-09 11:35 潜跃 阅读(1164) 评论(0) 推荐(0)
vue—计算属性(computer)
摘要： 阅读全文
posted @ 2021-04-07 15:17 潜跃 阅读(2307) 评论(0) 推荐(0)
vue—监听属性(watch)
摘要： 阅读全文
posted @ 2021-04-07 15:15 潜跃 阅读(67) 评论(0) 推荐(0)
uniapp—flex布局
摘要：Flex 布局教程：语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程：实例篇 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 阅读全文
posted @ 2021-04-06 15:04 潜跃 阅读(403) 评论(0) 推荐(0)
uniapp的返回顶部按钮
摘要：效果图： 1、HTML部分 <!-- 返回顶部按钮 --> <view class="back-btn" @click="toTop" :style="{'display':(flag false? 'none':'block')}"> <image src="../../static/toTop1 阅读全文
posted @ 2021-03-29 09:20 潜跃 阅读(979) 评论(0) 推荐(0)
如果遇到需要图片和视频一起显示的业务，可以这么做
摘要：效果图： vue： <div class="body"> <div class="image-item"> <ul class="albumList"> <li class="img-box" @click="imgBoxClick(item)" v-for="(item,index) in ima 阅读全文
posted @ 2021-03-27 13:54 潜跃 阅读(243) 评论(0) 推荐(0)
H5页面富文本展示图片之间存在空隙
摘要：解决办法： 在对应页面中的请求后端的方法中添加以下有语句： 然后在全局文件，App.vue中添加样式： 问题解决 阅读全文
posted @ 2021-03-12 09:36 潜跃 阅读(684) 评论(0) 推荐(0)
如何关闭eslint语法校验
摘要：1.找到webpack.base.conf.js文件： 位置在build文件夹下 2、注释下面这行代码 //...(config.dev.useEslint ? [createLintingRule()] : []), 3、重启项目即可 阅读全文
posted @ 2021-02-28 15:20 潜跃 阅读(602) 评论(0) 推荐(0)
vue父子组件如何进行通讯
摘要：组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。 在说如何实现通信之前，我们先来建两个组 阅读全文
posted @ 2021-02-18 13:25 潜跃 阅读(2131) 评论(0) 推荐(0)
vue前端如何把对象转化成数组
摘要：使用es6的新方法： const a = { a: 1, b: 2, c: 3, d: 4, } console.log(Object.keys(a)) console.log(Object.values(a)) 阅读全文
posted @ 2021-02-17 12:31 潜跃 阅读(13930) 评论(0) 推荐(0)
vue实现在进行增删改操作后刷新页面
摘要：问题 通常在后台管理项目中，对数据进行增删改查是常规操作。在进行这些操作后，需要手动刷新才能更新列表。本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据。 解决方案 || 以删除为例： 1.强制刷新：this.$forceUpdate() 2.使用window.reload( ) 阅读全文
posted @ 2021-01-28 11:03 潜跃 阅读(5559) 评论(0) 推荐(0)

1 2 下一页