vue 的学习
树沙&
javaScript
展开
-
vue中时间格式化组件库moment.js的使用
1 首先在vue项目中npm install moment --save2 定义时间格式化全局过滤器在main.js中 导入组件import moment from 'moment'Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') { return moment(dat...原创 2018-05-14 15:23:05 · 61628 阅读 · 1 评论 -
vue项目中使用webscoket心跳重连
首先在created定义心跳检测对象that.websock.send("ping") send方法是webscoket自带的一种给服务器发送消息的方法that.heartCheck = heartCheck 表示把heartCheck对象等于在data上面定义的heartCheck 对象然后把原来的heartCheck = null 来释放掉 避免内存泄露that.ini...原创 2019-02-19 10:22:00 · 6668 阅读 · 0 评论 -
vue中webscoket 主动断开连接
我们经常碰到这个需求 在客户端退出的时候 需要断开webscoketwebscoket里面提供了一个方法 webscoket.onclose这里是无法直接清除webscoket对象 必须使用onclose方法...原创 2018-12-12 14:11:34 · 13143 阅读 · 5 评论 -
vue 中把dome拖拽封装成全局自定义指令
1 首先在vue中 我们把拖拽事件进行封装(我这里是把它取名叫common.js)2 定义一个对象3 把需要用到的封装函数写在对象里面4 导出这个对象5 在需要用到拖拽功能的组件中进行引入6 给需要拖拽的元素绑定事件 (我这里是通过标题拖动父元素类似于登录表单拖拽的形式)7 调用对象里面的方法到此vue中封装拖拽功能已经全部实现了...原创 2018-10-24 10:57:29 · 1393 阅读 · 2 评论 -
在 vue中使用 websocket
在methods 里面初始化websocket 在created里面进行调用websocketopen() {websocket连接成功后的触的函数}websocketonmessage(e){ 数据接收后触发的函数}e为后台推送过来的数据websocketclose(){ 关闭后触发的函数}websocketerror(){连接失败后触发的函数} ...原创 2018-09-12 20:48:10 · 14526 阅读 · 5 评论 -
vue-cli打包优化
参考文章https://github.com/kaola-fed/blog/issues/204 https://segmentfault.com/a/1190000013239622打包优化主要是三个方面 下载文件速度慢 解析JS比较慢 渲染比较慢 服务端渲染(SSR)(服务器端渲染是加载最快的一种方式)SEO优化在服务端先将JS进行解析,解析完...原创 2018-09-11 15:00:50 · 3052 阅读 · 0 评论 -
vue 中的非父子间的通信
方法有二 一 在main.js中 创建一个vue的实例 在window下挂载 window.bus = new Vue()然后在 需要传递的数据的组件中 我这里是在home组件里面 向其他地方进行传值 在methods里面进行 handleNodeClick(data) { alert(data.id) bus.$emit('change', data) //d...原创 2018-07-05 15:31:41 · 204 阅读 · 0 评论 -
vue登录验证进行路由拦截
表单验证部分使用elementUI里面提供的简单验证办法<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container" autocomplete="off&原创 2018-06-28 14:23:06 · 1956 阅读 · 0 评论 -
vue中动态添加class类进行显示隐藏
<div class="status_button"> <el-button type="success" @click="checkSite" >查岗</el-button> <el-button type="danger"原创 2018-06-25 16:45:02 · 22415 阅读 · 0 评论 -
vue-cli中使用高德地图
第一步 去高德地图开放平台申请密钥 高德地图开放平台第二部 在vue-cli项目目录结构 里面多了config文件夹和 utils文件夹 config.js里面是这样的 主要是导出密钥 // 高德地图 keyexport const MapKey = '你的密钥key'// 地图限定城市export const MapCityName = '武汉'utils文件夹里面 新建路一个remoteL...原创 2018-06-01 17:28:27 · 16239 阅读 · 8 评论 -
vue-cli中使用echarts
首先在vue脚手架项目中安装echarts 执行npm i echarts --save 或者cnpm i echarts --save然后在main.js中进行配置import echarts from 'echarts'Vue.prototype.$echarts = echarts然后在组件中设计echarts图表<template> <div id="myChart...原创 2018-05-23 09:24:50 · 1559 阅读 · 0 评论 -
vue项目出现替换图片出现404的错误
最近接手了一个项目需要替换logo图标、UI设计好新的图片放进项目中出现localhost:999/images/login-logo.png找不到的错误通过各种写法 require 、 important 发现都没有用结果打印图片发现是一串地址、打印以前的图片是base64位编码结果通过看base64位相关文章和看代码发现对图片的大小做了限制 不能比以前的图片尺寸大太多 否则会出现找...原创 2019-07-10 14:33:09 · 954 阅读 · 0 评论