Vue.js 允许自定义过滤器，一般可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： <!-- 在双花括号中 --> {{ message | capitalize }}<!-- 在 v-bind 中 --> <div v-bind:id="rawId | formatId"></div>可以在一个组件的选项中定义私有的过滤器： filters: {dateFormat： (dataStr) => {var time = new Date(dataStr);function timeAdd...
第一步 安装安装crypto-js第二步 创建在js文件目录下创建一个js文件secret/*** 对页面上输入的密码进行加密传输给后台进行验证，对返回的数据进行解密，在页面展示*/ let CryptoJS = require(crypto-js); // 引入AES源码js export default { /* * 对密码进行加密，传输给后台进行验证 * @param {String} word 需要加密的密码 * @param {String} keyStr 对密码加密的秘钥 * @return {String} 加密的密文 * */ encrypt(word,...
打算用React写对话框已经很长一段时间，现在是时候兑现承诺了。实际上，写起来相当简单。 核心在于使用React的接口React.createPortal(element, domContainer)。该接口将element渲染后的DOM节点嵌入domContainer(通常是document.body)，并保证只嵌入一次。 所以，我们可以这样写一个对话框或模态框： function Dialog() {return React.createPortal( <div>Dialog contents</div>, document.body ) }一个新的div会出现在body内部：一...
首先下载websocket模块，命令行输入 npm install wsnode.js的 模块ws，可用于创建websocket服务，基本的express 和 http模块的使用var express = require(express); var http = require(http); var WebSocket = require(ws); var app = express(); var server = http.createServer(app); var wss = new WebSocket.Server({server}); 创建好服务之后，websocket 服务通过监听 message事件获取来自客户端的数据,然后我们可以给客户端...
前言：网上有许多的图表库，如：Echarts、Tau Charts、ChartJS等等，具体自行百度。 这次我们使用的是：Echarts 官方教程：点击查看 Echarts下载地址：飞机直达 1.下载好之后，把里面的ec-canvas文件夹复制到项目中，如：在项目中建立一个文件夹component ，然后把ec-canvas放到component文件夹里面。2.在pages中新建一个页面，我这边建立了一个echarsDemo页面，然后在echarsDemo目录中的index.json文件中引入图表组件，代码如下：...
昨天在用vue开发项目的时候遇到一个坑，在群友的探讨中，成功的解决了这一问题。具体情形如下：使用vue开发，在页面中有一个人数统计组件，人数统计是要动态变化数据的，由于目前没有真实数据，那么我想的是用随机数和setInterval来改变data里面的数据，从而做到数据实时变化，这样方便与我来做数字翻页动画。代码如下：<template><div class="totel-number"><div class="panel-top"><div class="panel-top_Left"></div><div class...
本文实例讲述了JS实现倒序输出的几种常用方法。分享给大家供大家参考，具体如下： 1.通过split和数组的逆序输出 var num = 123;//输出应该是 3 2 1 num = num +""; //方便split函数 var arr = num.split(""); for(var i=arr.length-1;i>=0;i-–){ console.log(arr[i]); //通过数组i的倒序调用，实现结果的倒序输出。 }2.通过split和reverse function back(num){ num = num + ""; var str=[ ]; str=num.split("").reverse().join...
v-model介绍熟悉Vue的小伙伴们都知道 v-model 是Vue的一个很大的特色，可以实现双向数据绑定。但本质上呢，它不过是语法糖，它负责监听用户的输入事件以更新数据。 以下摘取自Vue官方文档 v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件： text 和 textarea 使用 value 属性和 input 事件；checkbox 和 radio 使用 checked 属性和 change 事件；select 字段将 value 作为 prop 并将 change 作为事件。如何巧妙利用...
一、关于重复造轮子解释下 在npmjs上搜索关于koa路由装饰器的已经有那么几个包了,但是我从几个包中发现作者的思维仅仅限制于前端开发的思想,项目分层不明确,我们开发kow-web项目可以根据java-web中项目分层的思想来写项目,项目结构清晰明了,本人封装这个包也是参考了java-web开发过程中把项目分为四层架构。 1、controllers:路由的控制 2、servers:常用于一些业务逻辑的判断 3、dao:操作数据库的 4、models:关于建表的数据模型 二、...
第一步 去高德地图开放平台申请密钥 高德地图开放平台第二部 在vue-cli项目目录结构 里面多了config文件夹和 utils文件夹 config.js里面是这样的 主要是导出密钥 // 高德地图 key export const MapKey = 你的密钥key // 地图限定城市 export const MapCityName = 武汉utils文件夹里面 新建路一个remoteLoad.js 主要是动态创建script标签 封装了一个函数 传入URL地址（） export default function remoteLoad (url, hasCallback...
在自己做一个简单的后台管理系统时，用的是node作本地数据库，然后用了Element-ui的upload组件来实现图片的上传，中间有遇到那么点小坑，这里记录下，比较坑的一点就是，不知道文件的命名不能带空格，然后改了好久1.index.vue文件这里的话，就是简单点的使用图形界面框架Element-ui的上传组件，然后，action就是服务器端的地址，我这里使用了代理，将localhost:8080代理到你使用node作为服务器的地址就可以了<template><div class=...
前言：vue3.0要用Proxy来实现双向绑定，因此先来尝试一下实现方法。 1 Object.defineProperty 实现原来vue2的实现使用Object.defineProperty，监听set，但对于数组直接下标给数组设置值监听不了。 function observe(data) {if (!data || typeof data !== object) {return;}// 取出所有属性遍历Object.keys(data).forEach(function(key) {defineReactive(data, key, data[key]);}); };function defineReactive(data, key, val) {obs...
本文实例讲述了vue自定义键盘信息、监听数据变化的方法。分享给大家供大家参考，具体如下： @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive(on).keyCodes.ctrl=17; Vue.directive(on).keyCodes.myenter=13;@keydown.a/b/c.... <input type="text" @keydown.c="show">自定义键盘信息: Vue.directive(on).keyCodes.ctrl=17; Vue.directive(on).keyCodes.myenter=13; <!DOCTYPE html> <html lang="en"...
本文实例讲述了vue动画效果实现方法。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com vue动画</title><script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script><link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/2.0/animate.css" rel="external nofollow" /><style>#box{width:400px;margin: 0 auto;}#div1{width:100px;...
本文实例讲述了vue计算属性computed的使用方法。分享给大家供大家参考，具体如下： computed:{b:function(){ //默认调用getreturn 值} } computed:{b:{get:set:} }* computed里面可以放置一些业务逻辑代码，一定记得return <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com vue计算属性computed</title><style></style><script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script...