妙思维JS++
跟随小野团队,深入学习
落花流雨
这个作者很懒,什么都没留下…
展开
-
防抖和节流实现原理
防抖或是节流:限制函数的执行次数 防抖:通过 settimeout的方式,在一定的时间间隔内,将多次触发变成一次触发 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防抖和节流</t原创 2020-12-20 17:36:42 · 1039 阅读 · 0 评论 -
Vue2和Vue3开发组件有什么区别
Vue2和Vue3开发组件有什么区别 总结: Vue2 与 Vue 3其实概念与理念都是一样的。只是有一些属性获取方式和声名和定义方式稍微变了 我觉得 Vue3 给我们前端开发者带来了全新的开发体验,更好的使用弹性,可控度也得到了大大的提升。 如果你是一个学过或者接触过 React 然后现在想使用Vue的话,应该特别兴奋,因为很多使用方式都和React非常相近了 ! 全新的合成式API(Composition API)可以提升代码的解耦程度 —— 特别是大型的前端应用,效果会更加明显。还有就是按需引用的有了转载 2020-08-30 17:44:56 · 975 阅读 · 0 评论 -
基于vue实现单选和多选功能
单选 <template> <div class="wrap"> <div class="single"> <ul class="box"> <li v-for="(c,index) in cities" :class="{checked:index==currentIndex}" @click="changeList(index,c)"原创 2020-06-09 00:19:41 · 2111 阅读 · 0 评论 -
vue项目之跨域解决方案
跨域常见解决方案 jsonp (项目基本不用) 原理:动态生成script标签,通过src属性加载 缺点:不支持POST请求,支持get请求 应用场景:有些第三方数据接口可能会使用jsonp解决跨域问题,工作中不怎么用。 中间服务器代理 A前端部署地址:127.0.0.1:8000 B中间服务器:127.0.0.1:8000 C目标服务器地址:127.0.0.1:8888 因为浏览器的同源策略,A 和 c 存在跨域问题,A 无法访问 服务器c 解决:因为跨域问题仅存在于浏览器(**服务器请求服务原创 2020-05-15 00:08:51 · 2788 阅读 · 0 评论 -
Vue中v-if和v-for为何不能连用
Vue中v-if和v-for为何不能连用? <div v-for="(item, index) in list" :key="index" v-if="flag"> {{ item }} </div> 原因分析 v-for 会比 v-if优先执行,当一个标签上面同时存在:v-for 和 v-if 的时候,会先执行v-for循环, 然后去看循环出来的每个div上面flag的值,是真还是假。如果flag为true,就显示 ,否则就不显示 这样就造成了不必要的性能浪费 解决方案 v-f原创 2021-01-30 11:28:16 · 834 阅读 · 0 评论 -
页面刷新vuex的state数据丢失这么办~
vue单页面应用刷新网页后vuex的state数据丢失的解决方案 首先感谢各位博主的分享,参考文章: https://blog.csdn.net/guzhao593/article/details/81435342 https://blog.csdn.net/gitchatxiaomi/article/details/108914088 1. 刷新页面,vuex的state数据丢失的原因? js代码是运行在内存中的,代码运行时的所有变量、函数也都是保存在内存中的。 进行刷新页面的操作,以前申请的内存被释放,转载 2021-01-08 12:47:44 · 627 阅读 · 0 评论 -
使用事件代理:单选按钮 --点击添加样式
事件代理:父子组件传值 含义:将子元素的事件通过冒泡的形式交由父元素来执行 原理:事件委托是利用事件的冒泡原理来实现的 Event对象提供了一个属性叫target,可以返回事件的目标节点,我们称为事件源 也就是说,target就可以表示为当前的事件操作的dom,但是不是真正操作dom 页面文件 <template> <div class=""> <btn-radios :subjects="subjects" /> </div> </te原创 2020-09-26 13:23:36 · 309 阅读 · 0 评论 -
前端实现模糊查询
前端实现模糊查询 搜索需求: 搜索框为空,默认展示下面的搜索历史,隐藏搜索列表 如果用户输入搜索内容: 有搜索结果展示:搜索结果, 没有搜索结果展示:暂无搜索内容 点击搜索列表的选项,自动填充到搜索框 具体代码如下: 工具类: /** * * @param {*} fn * @param {*} delay * * 节流函数throttle:在delay时间内,时间只触发一次 * 防抖函数:在delay时间后,输入完成后多长时间才会触发一次;如果在输入时间内,用户再次输入就会重原创 2020-09-26 11:17:46 · 2901 阅读 · 0 评论 -
过滤器封装 filters
过滤器封装 过滤器文件 filters 文件路径:src / filters / order.js export default { setOrderStatus (status) { switch (status) { case 1: return '待付款'; break; case 2: return '待发货'; break; case 3: return '待收货';原创 2020-08-29 08:56:57 · 356 阅读 · 0 评论 -
基于vue自定义封装 toast组件
自定义toast组件 原文首发:https://www.jianshu.com/p/0891ae3a7e6d 在这里首先感谢博主的分享,公司项目中需要用到toast组件。 利用空余时间,按照博主分享的内容,一步步实现了。 以此当做学习记录一下。 第一步:在components/新建toast文件夹(存放:toast.vue 和 index.js) toast.vue <template> <div class="wrap" v-if="showWrap" :class="showC转载 2020-06-11 23:22:53 · 736 阅读 · 1 评论