随笔分类 - vue.js
摘要：背景 当我们在js中操作DOM时，往往需要手动为部分特殊的CSS属性 添加特定的前缀 为了减少工作量，提高代码复用性 我们可以将这个工作封装成一个函数 这个函数的任务是： 接收一个CSS属性名，返回 带有浏览器前缀&首字母大写的属性名 函数实现 首先定义一个div标签的style和一个立即执行函数v
阅读全文
摘要：一、mixin(混入)的概念 mixin是一个可以包含任意组件选项的对象 export const mixin = { mounted() { this.handlePlayList() }, methods: { handlePlayList() { throw new Error('compon
阅读全文
摘要：一、介绍 可以在attribute中声明Javascript钩子 <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="en
阅读全文
摘要：当插入或删除包含在transition组件中的元素时 Vue会自动嗅探元素是否应用了CSS过渡，如果是，则会在恰当的时机添加/移除CSS类名 一、过渡类名 在进入/离开的过渡中，会发生6个class的切换 1、v-enter 定义进入过渡的开始状态 在元素被插入前生效，在元素被插入后的下一帧移除 2
阅读全文
摘要：一、需求分析 当用户向上滚动屏幕后，我们希望上方的图片可以有渐变的模糊效果 也就是说 我们需要： 1、监听页面的滚动 2、计算模糊度关于滚动距离的函数 3、设置DOM元素的高斯模糊 二、关于backdrop-filter 这个CSS属性的作用是：对元素后面的所有内容应用过滤效果 <template>
阅读全文
摘要：一、背景需求 当页面有大量数据需要渲染时，我们希望给用户提供一个等待的预期 也就是说，在数据渲染之前，在页面上显示“正在加载”的简易动画 二、实现过程 我们可以把这一部分的代码抽离出来，作为基础/公用组件 // loading.vue <template> <div class="loading">
阅读全文
摘要：一、背景需求 如果在初始化页面的时候，一次性将所有图片资源都加载完毕 可能会降低页面渲染的速度，降低用户体验 我们可以借助 vue-lazyload 插件实现图片的懒加载 当页面被初始化时，只加载 在可视区域内的图片 当用户向下滚动页面时，再去加载剩余的图片资源 二、安装与使用 npm 安装 npm
阅读全文
摘要：在很多情况下，我们需要修改 element-ui 提供的原生样式，来满足项目的需求 然而 常规的CSS写法可能不会生效 因为当我们在源代码中引用 标签时，实际上 浏览器可能会渲染出好几个对应的 class 例如： 引用 时 浏览器会渲染出如下的DOM结构： <label data-v-7cc6060
阅读全文
摘要：一、安装与引入 使用npm安装 npm install animate.css --save 在main.js中引入 import animated from 'animate.css' Vue.use(animated) 二、使用animate动画 animate.css是一款预设的CSS3动画库
阅读全文
摘要：一、背景 在项目中使用最新版本的vue-awesome-swiper插件时，发现分页器的显示有bug 因此决定重新安装旧版本 注意：Swiper6 对应的是 vue-awesome-swiper的最新版本 接下来介绍的是基于Swiper2 的 vue-awesome-swiper的v2.6.7版本
阅读全文
摘要：本文将简单介绍在vue2.x的环境下引入并使用less的流程 1、安装less 在项目的根目录下打开命令行工具，执行命令： npm install less less-loader --save-dev 安装完成后打开 build目录，修改 webpack.base.conf.js 中的相关配置：
阅读全文
摘要：我们可以将一些项目中经常用到的CSS样式封装成变量 从而提高CSS代码的可复用性 ###对于单独的CSS属性，使用varibles 在assets/style目录下，新建 varibles.styl 文件 将属性值赋给自定义的变量 $bgColor = #00bcd4 $headerHight =
阅读全文
摘要：创建新的页面 一般情况下，我们习惯将项目的路由信息存储在src/router/index.js文件中 当我们需要创建新的页面时 就向routes数组添加一个新的对象 并指明新页面的path(路径)、name(名称)和component(组件名称) /:id 表示跳转到此页面时需要附加一个参数 页面之
阅读全文
摘要：在上一篇文章中，我们介绍了vuex的基本概念和使用方法 当需要共享的数据比较简单且都是同步操作时，组件可以跳过Action，直接用 commit 方法调用Mutations 同时我们也可以借助两个辅助函数简化我们的代码 mapState和mapMutations可以接收数组或者对象作为参数 将sto
阅读全文
摘要：一、vuex的概念和作用 vuex是一种专门为vue应用程序开发的状态管理模式 核心是"store"（一个公共管理的仓库）即下图虚线框内的部分 上图呈现了vue组件对状态进行读写的完整事件流： 当组件需要获取状态时，可以直接从State中获取 当组件需要改变状态时： 1- 通过dispatch方法调
阅读全文
摘要：一、背景需求 在页面上渲染一个多级列表的时候，数据往往也具有多个层级 例如：数组的每个元素都是一个对象，对象中的value可能是一个数组 { "ret": true, "data": { "sightName": "大连圣亚海洋世界(AAAA景区)", "bannerImg": "", "categ
阅读全文
摘要：一、背景需求 在页面中，我们希望实现以下功能： 进入页面时，顶部左侧显示返回按钮 当页面向下滚动一定距离时，在可视区域顶部固定“Header”一栏 效果如下： 二、实现思路 1、静态布局 在页面加载完成后、开始滚动前： 将返回按钮所在的div 设置绝对定位，用标志位showAbs设置v-show /
阅读全文
摘要：一、简介 keep-alive是vue的内置组件 当我们使用keep-alive包裹动态组件时，会缓存不活动的组件实例 简而言之，就是将组件(页面)的相关数据和状态载入缓存，防止在页面切换的时候重复渲染DOM 更详细的介绍请参考vue的官方API文档 二、使用方法 在项目根组件中，如果我们用keep
阅读全文
摘要：一、背景 在上一篇文章中，我们介绍了如何实现城市列表随导航条滚动的功能 当用户不断拖动导航条的时候，会频繁地触发功能函数 这样会造成资源的浪费、降低页面运行的速度 因此，我们需要通过函数防抖(debounce)来解决这个问题 二、函数防抖的概念 函数防抖，即限制一个函数在一定时间内只能执行1次 实现
阅读全文
摘要：一、背景需求 在 上一篇文章中，我们实现了点击字母->定位到相应区域的功能 接下来，我们要实现城市列表随导航条滚动而滚动的功能 页面静态布局如下： 二、移动端 touch事件的基础知识 常见的触摸事件包括： touchstart、touchmove、touchend touch对象代表一个触点，每个
阅读全文
浙公网安备 33010602011771号