![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 62
latency_cheng
这个作者很懒,什么都没留下…
展开
-
Vue 中的 v-if 和 v-show
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display。v-if 有配套的 v-else 和 v-else-if 可以使用,并且可以使用渲染一整个组 Title Paragraph 1 Paragraph 2下面的总结是在Vue官网看到的(https://cn.vuejs.org/v2/gui原创 2017-09-29 16:17:03 · 777 阅读 · 0 评论 -
Vue过渡transition实现轮播组件
轮播组件的使用非常广泛,与前写的swiper不同,这个组件实现的是自动轮播的功能。先上效果图: 纵向滚动的轮播一般适用于一些信息的滚动展示 横向滚动的轮播一般适用于banner图的变换 这种组件写起来也其实也不算复杂,但是用Vue的transition组件会更加简单。1、Vue过渡组件transition ...原创 2018-10-25 16:01:45 · 6525 阅读 · 3 评论 -
Vue滑动翻页组件swiper的实现---第一版
关于滑动翻页,有很多优秀的插件可以使用,但是多多少少都有点大,所以自己试着完成一个组件来实现。(以左右滑动翻页为例)1、主要思路 最主要的就是对三个触摸事件的处理:touchstart、touchmove、touchend 在touchstart事件处理程序中记录一些初始值,比如原始坐标;在touchmove事件处理程序中计算实时滑动的距离,让元素随之一起偏...原创 2018-09-29 11:47:56 · 3109 阅读 · 0 评论 -
Vue滑动翻页组件swiper的实现---第二版
优化的点:1、改变组件结构,滑动组件的宽度由100vw改为自定义SwiperPage.vue<template> <div class="ths_swiper-page"> <t-swiper-wrap> <t-swiper-item> <div class="swiper" style=&原创 2018-10-08 15:45:38 · 2620 阅读 · 0 评论 -
Vue左滑组件slider的实现
slider组件与swiper组件不同,slider滑动时并不翻页,实现的是左滑时,显示右侧内容的功能1、主要思路 思路和swiper组件类似,主要的也就是对三个触摸事件的处理:touchstart、touchmove、touchend 在touchstart事件处理程序中记录一些初始值,比如原始坐标,偏移距离;在touchmove事件处理程序中计算实时...原创 2018-10-09 15:53:56 · 9256 阅读 · 3 评论 -
Vue 使用 vuelidate 实现表单验证
表单验证的应用场景十分广泛,因为网站对用户输入内容的限制是非常必要的。在vue中,我们使用vuelidate方便地实现表单验证。1、安装使用npm安装:npm install vuelidate --save在main.js中引入:import Vuelidate from 'vuelidate'Vue.use(Vuelidate)在组件.vue中引入需要使用的验原创 2017-11-20 11:43:35 · 13175 阅读 · 0 评论 -
Vue 使用 Mint UI 实现左滑删除效果(CellSwipe)
Mint UI 是饿了么开源的,基于 Vue.js 的移动端组件库。关于Mint UI,有文档不够准确详尽,组件略显粗糙,功能不够完善等问题;也有高度组件化,体积小等优点。安装Mint UI:# Vue 1.xnpm install mint-ui@1 -S# Vue 2.0npm install mint-ui -S引入组件:// 引入全部组件im原创 2018-03-16 13:05:22 · 9935 阅读 · 4 评论 -
Vue 单页应用 的 首屏优化
对于单页应用,要在一个页面上为用户提供产品的所有功能,在这个页面加载的时候,首先要加载大量的静态资源,这个加载时间相对比较长。所以我们需要做一些相应的优化,减少响应时间,尽快把首屏显示出来。1、压缩代码无论是否为单页应用,代码的压缩都是要做的。 对于vue-cli生成的项目,在Webpack配置文件中使用了UglifyJsPlugin进行代码的压缩://webpack.prod.conf.jsp原创 2018-04-21 16:59:14 · 3391 阅读 · 0 评论 -
用 vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)
路由跳转前做一些验证,比如登录验证(未登录去登录页),是网站中的普遍需求。对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。贴上文档地址:https://router.vuejs.org/zh-c原创 2017-11-20 10:54:58 · 106710 阅读 · 1 评论 -
Vue 组件实现表单的双向绑定
下面是一个简单的货币输入的自定义控件,来自https://cn.vuejs.org/v2/guide/components.html: {{price}} Vue.component('currency-input',{ template: '' + '' + '$ ' + '',原创 2017-10-10 15:23:44 · 3853 阅读 · 0 评论 -
Vue 中的按键别名(.enter)和修饰键(.ctrl)
1、按键别名在监听键盘事件时,我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符:对于一些常用键,Vue 还提供了按键别名: 全部的按键别名: .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right2、修饰键除了原创 2017-09-30 12:55:31 · 18736 阅读 · 5 评论 -
用 vue-router 实现 tab 标签页(单页面)
vue-router 是 Vue.js 官方的路由插件,适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来,vue-router 会把各个组件渲染到正确的地方。首先,.vue中的内容非常简单,创建标签,并指定路径,渲染路由匹配到的组件。原创 2017-10-17 16:20:57 · 18201 阅读 · 3 评论 -
JavaScript 监听元素是否进入/移出可视区域
JavaScript 监听元素是否进入/移出可视区域常规操作防抖节流IntersectionObserver兼容的代码常规操作 通常的做法是,监听srcoll事件,根据元素的offset来判断。window.addEventListener('scroll', this.scrollHandle, true); 使用getBoundingClientRec()来获取元素的位置。sc...原创 2018-12-11 23:13:27 · 20198 阅读 · 0 评论