一、Node中socket.io基础1、是什么Socket.IO类库，是在服务器和浏览器之间提供一个共享接口，其可以用于实现以下几种通信方式： HTML5中的WebSocket通信Flash中使用的WebSocket通信XHR轮询JSONP轮询Forever Iframe在通信时，客户端与服务器端可以使用相同的API2、怎么用原理：创建Scoket.IO服务器，该服务器依赖于一个已经创建的HTTP服务器 服务器端引入 var http=require(http) var sio=require(socket.io) var server=http.crea...
一个vue+express 构建的后台管理系统 说明： vue+express 构建的后台管理系统,包括登录、注册、表格的增删改查 github 在线 搭建vue项目： 1.安装vue-cli脚手架 npm install -g vue-cli2.创建基于webpack模版的项目 vue init webpack my-express3.安装包依赖并运行 cd my-express npm install npm run devvue项目基于iview-admin改造的 通过应用生成器工具 express创建一个应用的骨架： 1.连接数据库 在config创建db.js var mysql ...
之前用jquery实现还很简单，然后用vue就一直不行，然后在网上找了很多，又仔细看了vue官网 的过渡&动画，发现其实很简单 (可以多看vue官网 过渡&动画 实现更多效果) 1、实际效果2、代码<!--css--> .box{height:200px;width: 200px;background-color:black; } .draw-enter-active, .draw-leave-active {transition: all 1s ease; } .draw-enter, .draw-leave-to /* .fade-leave-active below version 2.1.8 */ {height: 0; }<div id...
在使用vue实现聊天页面的时候，聊天数据动态加到页面中，需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的，报错信息如下：VM14383:27 [Vue warn]: Failed to resolve directive: chat-scroll (found in <Hello>)这个一直找不到原因，可能是我vue的版本是2.2不支持吧。。。后来找到一个解决办法： 添加watch方法，监听数据变量的...
使用vue来做一些小巧的动画效果是非常方便的，今天本人想使用vue的transition来完成一个滑动过渡效果，这里和大家分享一下。 直接上源代码： <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue滑动效果</title><style>.d {position: absolute;border: 1px solid red;width: 30px;height: 30px;}@keyframes show {0% {opacity: 0;left: 32px;}100% {opacity: 1;left: 0;}}@keyframes hide {0% {opacity: 1;left: 0;}1...
其实像这类的文章网上已经有很多很好的,写这篇文章，相当于是做个笔记，以防以后忘记用到的：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 = ...
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 () {/...
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中自行...
本文介绍了用ES6的class模仿Vue写一个双向绑定的示例代码，分享给大家，具体如下：最终效果如下：构造器(constructor)构造一个TinyVue对象，包含基本的el，data，methods class TinyVue{constructor({el, data, methods}){this.$data = datathis.$el = document.querySelector(el)this.$methods = methods// 初始化this._compile()this._updater()this._watcher()} } 编译器(compile)用于解析绑定到输入框和下拉框的v-model和元素的...
看到一篇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...
场景 在实际的项目开发中会出现这样的场景，项目中需要多个模块（单页或者多页应用）配合使用的情况，而vue-cli默认只提供了单入口打包，所以就想到对vue-cli进行扩展 实现 首先得知道webpack是提供了多入口打包，那就可以从这里开始改造 新建build/entry.js const path = require(path) const fs = require(fs) const moduleDir = path.resolve(__dirname, ../src/modules) let entryObj = {} let moduleItems = fs.readdirSync(m...