其实像这类的文章网上已经有很多很好的,写这篇文章，相当于是做个笔记，以防以后忘记用到的：1、 vuex 2、axios 3、vue-route 登陆流程为： 1、提交登陆表单，拿到后台返回的数据 2、将数据存入vuex vuex配置这里直接跳过安装之类的，百度一大堆，我直接上代码 // store index.js import Vue from vue import Vuex from vuexVue.use(Vuex) // 初始化时用sessionStore.getItem(token),这样子刷新页面就无需重新登录 const state = ...
虽然只是一个简单的功能，还是记录一下比较好。页面上有很多个li，要实现点击到哪个就哪个高亮。当年用jq的时候，也挺简单的，就是选中的元素给addClass，然后它的兄弟元素removeClass,再写个active的样式就搞定了。那现在用react要实现类似的操作，我想到的就是用一个currentIndex,通过判断currentIndex在哪个元素实现切换。先上一下效果图：代码：class Category extends React.Component {constructor(props) {super(props)this...
Vue 模糊查询功能原理：原生js的search() 方法，用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。input输入框，模糊查询 <template><div><input type="text" placeholder="请输入..." v-model="searchVal"><ul><li v-for="(item,index) in NewItems" :key="index" :value="item.value" v-text="item.name"></li></ul></div> </template> <script> export default {n...
本人野生程序员一名，了解了一些微服务架构、前后端分离、SPA的知识后就想试试做点什么东西。之前一直做后端，前端只是有基础知识。之前学习过angularjs，但当时就是一脸懵逼（完全看不懂是啥）就放弃了。最近又学了Vue，这次感觉总算明白了一些，但其中也跳过很多坑（应该还会更多），在这里写下来记录一下吧。 说回主题，之前传统登录认证的方法基本是由服务器端提供一个登录页面，页面中的一个form输入username和password后POST...
本文介绍了基于Vue2x的图片预览插件的示例代码，分享给大家，具体如下： 先来看下DemoLiveDemo关于开发Vue插件的几种方式 （具体请移步官网）Vue官网MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {// 逻辑...}// 2. 添加全局资源Vue.directive(my-directive, {bind (el, binding, vnode, oldVnode) {// 逻辑...}...})// 3. 注入组件Vue.mixin({created: function () {/...
做网站经常会遇到弹出对话框获取用户输入或弹出对话框让用户确认某个操作之类的情景，有一个基于AngularJS的扩展模块可以帮我们优雅地完成这类事情：ngDialog。 ngDialog在github上提供了一个示例网页，演示了它的各种用法，在这里：https://github.com/likeastore/ngDialog/blob/master/example/index.html。ngDialog的github主页的readme也对常用的指令和服务做了较为详细的介绍，可以参考。我这篇就纯粹是参考ngDialog的示例来的...
Vue嵌套路由：实现效果(路由三层嵌套，点击一级tab显示二级tab效果，二级tab点击切换对应内容,不在tab区域里的内容，切换时不重复渲染)： Demo访问时路径：http://IP:端口/#/routers/1.建立案例文件夹 page/routers/1 routers/index.vue <template><div><router-link :to="{name: rindex_rhome}" class="rlink" :class="{active:selected == 1}" @click.native="tabck(1)">首页</router-link><router-link :to="{name: rindex_rnew...
vue： V2.5.11 此篇尽量详细，清楚的讲解vue插件的开发到npm的发布，想想将你自己做的东西展示给广大“网民”，心里还是有点小激动的...…^_^ 先上一下插件效果图------github传送门下面我们就来说说详细做法： 1. 初始化项目 vue init webpack-simple vue-pay-keyboard使用vue创建一个简单的项目，删除src中除了main.js和app.vue外的文件，清空app.vue中无用内容整理完后项目目录2.编写插件 vue-pay-pop (源码大家可到github中自行...
React Native日期时间选择组件：react-native-datepicker，支持安卓和IOS双平台，支持单独选择日期、单独选择时间和选择日期和时间，支持自定义日期格式。 效果图安装方法 npm install react-native-datepicker --save示例代码 <Text style={styles.instructions}>time: {this.state.time}</Text><DatePickerstyle={{width: 200}}date={this.state.datetime}mode="datetime"format="YYYY-MM-DD HH:mm"confirmBtnText="确定"cancelB...
前言：此文需要有一定react，redux基础，具体学习资料请科学上网。 使用create-react-app脚手架 具体基础配置请参考 配合antd组件实现的管理系统demo,线上地址 开发前反思 1. 按需加载 webpack的 import 动态加载的模块的函数，import(参数)，参数为模块地址。 注意： import 后会返回一个promise对象。 import(/components/chart).then(mud => {dosomething(mod) }); 本demo构建了异步加载组件Bundle,具体代码请见 class Bundle e...
看到一篇Implementing an Infinite Scroll with Vue.js , 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考.从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件等等, 我这里主要是对原文的重点提取和补充本文技术要点 Vue生命周期axios简单用法moment.js格式化日期图片懒加载结合原生js来写scroll事件请求节流创建项目首先创建一个简单的vue项目 # vue init webpack-sim...
之前一直想要自己试着实现一个分页器，但是一直拖，今天写完，大概照着网易云音乐的样子来完成。这个小例子很简单，通过这个小例子，可以学习到Vue计算属性的使用，并了解到写分页器需要区分的情况。这篇文章会慢慢从头来实现这个小例子，相信你一定会学会，而且看完了我的思路之后说不定会有更棒的思路和想法！ 实现的效果是这样子的：一、先简单布局<template><div class="pageContainer"><ul class="pagesInner"><li class="pag...
实现这里的图形验证码我是用的node里svg-captcha模块,可以全部支持字符和数字，全平台支持，用起来很简单。 1.安装 cnpm i svg-captcha --save2.在使用的地方导入 var svgCaptcha = require(svg-captcha);3.获取验证码 3-1 安装 cookie-parser ,作用是将获取到的session保存到cookie，方便前端访问验证 cnpm i cookie-parser --save 3-2 使用 cookie-parser const cookieParase = require(cookie-parser);app.use(cookieParase());...
本文介绍了react-native 圆弧拖动进度条实现的示例代码，分享给大家，具体如下： 先上效果图因为需求需要实现这个效果图 非原生实现， 难点1：绘制 使用svg难点2：点击事件的处理难点3：封装由于绘制需要是使用svg 此处自行百度 按照svg以及api 教学 视图代码块render() {return (<View pointerEvents={box-only}//事件处理{...this._panResponder.panHandlers}>//实际圆环{this._renderCircleSvg()}// 计算中心距离<Viewstyle={{p...
本文介绍了使用react实现手机号的数据同步显示功能的示例代码，分享给大家，具体如下：要求如下 输入框输入内容数据长度大于0，展示出预览信息光标离开关闭预览信息预览信息每隔4位插入一个特殊字符_,输入内容不变限制长度为13位只允许输入数字（0-9）// Zinput.js import React, {Component } from react; import ./Zinput.css// NOTE: 获取焦点事件 原生onFocus 即可 // NOTE: 离开焦点事件 原生onBlur即可 // NOTE: 输入框数据过...