08 2021 档案
摘要：在vue2中通过Object.defineProperty实现数据响应式，组件初始化时，对data中的item进行递归遍历，对item的每一个属性进行劫持，添加set,get方法。后来新加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会视
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：keep-alive 有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transitio
阅读全文
摘要：说明 点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据 刷新页面参数丢失 编程式导航 方法一：通过 params 传参 路由配置如下 { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detai
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：v-if判断active满足0的时候写法是：v-if="active 0" 那如果active同时要满足0，1，2三个值的时候，如果在v-if里用 || 并列写 如：v-if="active 0 || active 1 || active 2" 写法很明了，但是很不简介 一：最简便的写法就是 //[
阅读全文
摘要：页面通过路由调转后，新页面停留的位置与上一级页面一致 解决 配置路由 const router = new VueRouter({ scrollBehavior: () => ({ y: 0 }), routes: [...] }) // 可能是使用组件缓存时 再次切换到此组件 路由不触发mount
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：数组的常用方法 length length 是一个可读可写的属性，用来表示数组的长度（即数组元素个数）。通过访问 length 属性，可以获取数组长度；而通过修改 length 的值，可以增加或减少数组元素，甚至可以完全清空数组元素。 length 属性的读、写操作示例如下： var arr = [
阅读全文
摘要：1、all 如果数组所有元素满足函数条件，则返回true。调用时，如果省略第二个参数，则默认传递布尔值。 const all = (arr, fn = Boolean) => arr.every(fn); all([4, 2, 3], x => x > 1); // true all([1, 2,
阅读全文
摘要：vue-awesome-swiper 安装 npm install vue-awesome-swiper@3 引用 /*全局引入*/ import VueAwesomeSwiper from 'vue-awesome-swiper'; import "swiper/dist/css/swiper.c
阅读全文
摘要：<router-link> 标签是用于在Vue不同页面之间跳转，但它不是跳转到外部链接，相反，我们一般使用 <a> 标签跳转到外部链接。 扩展<router-link>组件非常简单，只需将它包装到我们自己的定制组件中。Ok，我们需要构建一个AppLink组件来处理链接，无论是外部的还是内部的。 Ap
阅读全文
摘要：多行文本垂直居中 父级 display: table; 子级 display: table-cell; vertical-align: middle; text-align: center; 文本对齐方式 CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也是非常的简单 p{ t
阅读全文
摘要：CSS特性可以轻松创建一个可滚动的容器? CSS scroll snap 可以做到这一点。在早期的前端开发中，我依靠 JS 插件来创建滑块组件。有时，我们需要一种简单的方法来快速将元素制作成可滚动的容器。现在，多亏了 CSSS scroll snap ，我们可以简单做到这一点。 为什么要使用 CSS
阅读全文
摘要：效果图-在线体验 样式代码 .wrap_div1 { position: relative; width: 260px; height: 430px; overflow: hidden; border: 1px solid red; } .boxCSS { width: 100%; height:
阅读全文
摘要：[Vue warn]: Error in nextTick: "TypeError: Converting circular structure to JSON --> starting at object with constructor 'Vue' | property '$options' -
阅读全文
摘要：vue-infinite-scroll 安装 npm install vue-infinite-scroll --save 尽管官方也推荐了几种载入方式，但“最vue”的方式肯定是在main.js中加入 import infiniteScroll from 'vue-infinite-scroll'
阅读全文
摘要：演示 Top.vue <template> <div class="goTop" v-show="goTopShow" @click="goTop"> <!-- 我使用的是图，可以使用文字代替，自定义样式 --> <img src="./assets/images/btn/top.png" alt=
阅读全文
摘要：出于业务需求需要做按钮的点击防抖，开始的打算是二次封装 element-ui的el-button来实现的，然后就做了，但又觉得这样不够简洁，然后就看看广大的掘友大都是怎么做的呢，关于防抖节流的处理，发现大家都是用vue自定义指令做的，看了看vue自定义指令也不麻烦，便自己动手也撸一个，如下 v-de
阅读全文
摘要：html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> * { padding: 0; margin: 0; list-style: none } #wrap {
阅读全文
摘要：安装-官网 npm install vue-infinite-loading -S or <script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script> vue中使用 引入
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旋转长方形</title> </head> <style type="text/css"> *{ margin:0; padding:0; } #box{ width: 500px
阅读全文
摘要：效果图 上图展示有两种方式（以下代码演示只粘贴主要样式和逻辑代码） 方式一：是通过组件卸载的方式 方式二：是通过弹窗内部控制显示和隐藏 主要公共样式代码 // 弹窗 .popup-mask { position: fixed; top: 0; left: 0; bottom: 0; right: 0
阅读全文
