这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍，既然是从入门到实战，我直接将平时项目中需要实现的一些效果拆分成模块。你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查，再回过头来看我的实现代码。记住，通读Vue文档真的很重要，很重要！ 这里的Vue以单文件的形式引入，另外代码在实现上会一步步的进行优化，客官不要着急！ 下面是一个样式稍微丑陋，但功能OK的选项卡。 <!DOCTYPE html> <ht...
在正常的js中。我们如果要实现点击选中active然后其他取消的效果，我们可以定义一个类，当点击的时候给给多有的dom取消active的类，给当前元素加上这个类名，说的很啰嗦，直接来看代码说话吧（表示楼主用的是jq）:<style>* {margin: 0;padding: 0;}li {list-style: none;width: 100px;margin-top: 10px;border: 1px solid red;}li:active {cursor: pointer;}.active {background-color: aqua;}</style><script src="http://g.ydbcd...
简介： transition方法的使用transition内置方法transition-group animate库实现过渡动画 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib\vue.js"></script><link rel="stylesheet" href="lib\animate.css" rel="external nofollow" ><sty...
CodePen 地址 前端使用 SPA 之后，能获得更多的控制权，比如页面切换动画，使用后端页面我们可能做不了上面的效果，或者做出来会出现明显的闪屏。因为所有资源都需要重新加载。 今天使用 vue，vue-router，animejs 来讲解如何上面的效果是如何实现的。 步骤 点击菜单，生成 Bubble，开始执行入场动画页面跳转执行退场动画函数式调用组件 我希望效果是通过一个对象去调用，而不是 v-show, v-if 之类的指令，并且为了保持统一，仍然使...
本篇教程将以计数器及列表展示两个例子来讲解Vuex的简单用法。 本案例github 从安装到启动初始页面的过程都直接跳过。注意安装时选择需要路由。 首先，src目录下新建store目录及相应文件，结构如下：index.js文件内容： import Vue from "vue" import Vuex from vuexVue.use(Vuex); //务必在new Vuex.Store之前use一下export default new Vuex.Store({state:{count:0 //计数器的count},mutations:{increment(state){state.coun...
上次写了一个简单的图片轮播，这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外，也可以嵌入任何内容的标签进行滚动，里面用了slot进行封装。 父： <template><div id="app"><er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/index.json" :isOrNotButton=false><template scope="props">-----使用子组件传过来的值，封装slot<div class="articleList-box...
组件被包在一个高度固定的div mounted () {var boDiv = document.getElementById(this.id);if(boDiv == undefined){return;}var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener(DOMMouseScroll, function(event) { //火狐var evt = window.event || arguments[0]if (evt.detail <= -3) { boDiv.scrollTop=boDiv.scrollTop-10} else if (evt.detail >= 3) {boDiv.scrollTop=boDiv.scro...
前言 本文题目中虽然写有vue和react,但是并非vue和react相关知识，而是最基本的html5和css3的一些知识，之所以写vue，是因为我最近项目中用到了类似效果，我用vue相关知识实现并不雅观，用html5和css3实现，则更加完美。 项目案例 项目中有如下效果：好多展开收起，对于这个的实现，我一开始用了vue一些比较挫的dom操作，就是父元素toggleClass一个类名，进行子元素的显示和隐藏。 由于这个方法是通用方法，项目中好多地方使用，代...
图片轮播是前端中经常需要实现的一个功能。最近学习Vue.js，就针对Swiper进行封装，实现一个简单的图片轮播组件。 一、Swiper 在实现封装之前，先介绍一下Swiper。 Swiper是纯Javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择。Swiper的应用场景广泛，实现效果很好，下面个...
最近在用vue尝试着做移动端的项目。希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来（返回不用重新加载），关闭的界面能被销毁掉（再进入时重新加载）。例如对a->b->c 前进（b,c）刷新，c->b->a 后退（b,a）不刷新。 由于 keep-alive 会把所有加载的过的界面都缓存起来，没法实现返回时将界面销毁掉，导致再进入时没有重新加载这个界面。于是首先想到的方案是在点击界面上返回按钮的时候，调用 this.$destroy(true)...
一个简单的基于vue.js的无缝滚动 :feet:在线文档demo :ear_of_rice:小demo :blue_book:English Document 安装 NPM npm install vue-seamless-scroll --save 使用 ES6 详情的demo页面 example-src/App.vue // **main.js** import Vue from vue import scroll from vue-seamless-scroll Vue.use(scroll) <template><vue-seamless-scroll></vue-seamless-scroll> </template> // 或者你可以自己设置全局注册的组件名 默认注册的组件...
过渡效果在交互体验中的重要性不言而喻。以往我们使用js或Jquery添加或移除元素的类（class），搭配CSS中定义好的样式，再引用一些javascript库之后，可以做作出非常复杂，惊艳的动态效果，不过这套方法还是太繁琐。 vue.js内置了一套过渡系统，可以在元素从DOM中插入或移除时自动应用过渡效果。vue会在是党的时机触发css过渡或者动画，你也可以提供相应的javascript钩子函数在过渡过程中执行自定义的DOM操作。 每个过渡效果，都需...
本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码，供大家参考，具体内容如下 先上效果图：这个左右滑动以及上下滑动主要使用了Swiper的轮播功能，首先是该自定义组件的代码：<template> <div class="s-slider"> <swiper :options="horizontalSwiperOptions" ref="horizontalSwiper"> <swiper-slide class="left" ref="left" v-bind:style="{background:getRandomColor()}"> <slot name="left"></slot> </swiper-slide> ...
基于flexible.js 的 Vue 组件 前言： 目前手头的移动端Vue项目是用手淘的 lib-flexible 作适配的，并用px2rem 来自动转换成rem。关于lib-flexible和px2rem的配置，请移步 vue-cli 配置 flexible 。由于使用rem作适配，导致现有的很多移动端UI框架不能与之很好的配合，往往需要大动干戈更改UI框架的样式，背离了使用UI框架达到快速开发的初衷。为了以后项目的组件复用，以及提高开发可复用组件的能力，特把平时项目中 常用的、简单的...
Vue导航栏 用Vue写手机端的项目，经常会写底部导航栏，我这里总结一套比较方便实用的底部导航栏方法，并且可以解决浏览器刷新选中状态消失的问题。也可以选择自适应屏幕。看一下效果，底部的图标全是UI给的选中和未选中样式的图片，根据公司要求，你也可能会用fontsize去写。（全部代码黏贴到本文的最后面了）1、首先把这些小图片放到src/assets路径下面（自动base64编码）2、在data（）里边定义一个选中对应的变量isSelect...