在日常开发中，我们前端必不可少的需要像后端请求数据。 但是一般前后端分离，所以域名、端口等肯定不尽相同，这样就不可避免的会遇到浏览器的同源策略限制。 在一般情况下，后端都会设置请求跨域允许的来源、方法等。 但是也保不准后端疏忽而忘记这个问题。 那为了不影响我们的开发，前端只能被动的去找后端解决跨域问题。 其实，我们前端也可以解决跨域问题，那就是使用代理。 举个例子： 我请求的地址是这个：http://192.168.12...
关于video.js video.js是一个拥有h5背景的网络视频播放器，同时支持h5以及Flash视频播放（可加载本地静态资源视频以及网络链接视频） 官网：videojs.com/ 安装 npm install video.js main.js中引入 import Video from video.js import video.js/dist/video-js.css Vue.prototype.$video = Video使用 <div class="demo1-video"> <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls //确定...
需求背景，工作中需要实现一个自定义打印模板的需求，能够实现单个及多个dom元素的同时拖拽，也能通过外部的input元素修改dom元素的样式。在npm和GitHub上找了各种已有的vue组件，不够灵活，效果都不是自己想要的 1.vue自定义指令 Vue.directive(dragx, (el, binding, vnode) => {// 默认参数let defaultOpts = {dragDirection: n, e, s, w, ne, se, sw, nw, all,dragContainerId: , //dragBarClass: , // 类选择器canDrag: true,c...
Vue 使用计时器实现跑马灯效果，代码如下所示： <!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"><script src="../Vue/vue.js"></script><link href="lib/bootstrap-3.3.7/css/bootstrap.css" rel="external nofollow" rel="stylesheet"><title>跑马灯</title><style type="text/css...
axios 基于http客户端的promise，面向浏览器和nodejs 特色 ?浏览器端发起XMLHttpRequests请求 ?node端发起http请求 ?支持Promise API ?监听请求和返回 ?转化请求和返回 ?取消请求 ?自动转化json数据 ?客户端支持抵御 安装 使用npm： $ npm i axiso 为了解决post默认使用的是x-www-from-urlencoded 去请求数据，导致请求参数无法传递到后台，所以还需要安装一个插件QS $ npm install qs 一个命令全部解决 $ npm install --save axio...
一. Lodop与C-Lodop的区别 Lodop打印控件是浏览器插件，与浏览器紧密结合来实现本地打印，是一种内嵌到浏览器里交互方式。（适用浏览器：ie系列、火狐51版及历史版本、谷歌44版及历史版本。（新版火狐及谷歌不再支持np插件，也不能使用lodop）） C-Lodop打印服务是以提供服务方式解决web打印，摆脱了对浏览器的依赖，解决了新版谷歌（45版及后续版本）、64位火狐、edge等浏览器不再支持Lodop插件方式的情况，C-Lodop打印服务支持所...
本文实例讲述了vue使用websocket的方法。分享给大家供大家参考，具体如下： 最近项目需要使用到websocket 但是框架是vue 网上查阅很多资料 vue-websocket 老是连接不上 索性就不适用封装的插件了，直接使用原生的websocket 我这边需求是 只需要接受就好 不需要发送 代码如下： 爬坑之路：vue里面this指向问题 第一版 使用原生js mounted(){console.log(this)----------------------------------------------------------this指向...
在开发项目过程中几乎所有接口都需要知道它的返回状态，比如失败或者成功，在移动端通常后台会返回结果，而我们只需要一个弹窗来弹出来结果就可以了。但是这个弹窗如果在整个项目里需要手动去每一个都定义，那是非常庞大的代码量，而且维护起来非常的麻烦。通常做法就是绑定在原型上一个公共方法，比如this.message(后台返回接口信息)。 这样看似省力了很多其实还是很麻烦。 如果使用了proxy做一个全局代理，那么就完全不一样了。不...
众所周知，vue可以用来开发移动端app，可以使用hbuilder将build好的vue打包成一个移动端app，但是用过之后就会发现，使用cookies或者session保存登录的token，在手机端无法保存，每次打开app依然提示登录。那么我们可以使用localStorage来保存登录信息就可以了，具体代码如下 1、vuex stroe代码 index.js import Vue from vue import vuex from vuex import { login, logout, getInfo } from @/api/login import { getToken, setTo...
本文实例为大家分享了Vue使用localStorage存储数据的具体代码，供大家参考，具体内容如下 通过下面这个案例来了解localStorage的基本使用方法。输入评论人、评论内容，点击发表评论，评论数据将保存到localStorage中，并刷新评论列表。 1.先组织出一个最新评论数据对象 var comment = {id:Date.now(), user:this.user, content:this.content}2. 把得到的评论对象，保存到localStorage中 1.localStorage只支持存字符串数据,保存先...
以下代码如果需要在你本地跑起来：Ⅰ.需要apache服务，并把php代码丢进去指定位置Ⅱ.将下面http://www.test.com/day05/jiekou.php地址，改成自己指定位置的域名或ip1.从一段简易代码说起前端代码<!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><!-- 导入axio...
问题描述Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发相应的方法，比如queryData: {name: ,creator: ,selectedStatus: ,time: [],}, 第一种解决方案：直接对象现在我需要监听这个queryData，我可以这样做： watch: {queryData: {handler: function() {//do something},deep: true} } 第二种解决方案：deep里面的deep设为了true，这样的话，如果修改了这个queryData中的任何一个属性，都会执行handler这个方...
vue实现首页导航切换不同路由的方式（二）【使用vuex实现的】，具体代码如下所示： <nav><!-- 导航栏 --><div class="indexNavOut"><div class="indexNav"><ul class="navLi"><li @click="checkNav()" style="width: 130px;"><router-link to="/home">了解海华教育(视频)</router-link><!--<a href="#">了解海华教育(视频)</a>--></li><li @click="checkNav()" v-bind:class="{active:Index==#/home,active2:Index==#/}"><router-l...
一 过滤器 过滤器就是vue允许开发者自定义的文本格式化函数， 可以使用在两个地方：输出内容和操作数据中。 1.1 定义过滤器的两种方式 1.1.1 使用Vue.filter()进行全局定义 Vue.filter("RMB1", function(v){//就是来格式化(处理)v这个数据的if(v==0){return v}return v+"元" })1.1.2 在Vue对象中通过filters属性类定义 var vm = new Vue({el:"#app",data:{},filters:{RMB2:function(value){if(value==){return;}else{return +valu...
1 前言 1.1 业务场景 图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。 由于浏览器的机制，使用 window.location.href 下载图片时，并不会保存到本地，会在浏览器打开。 2 实现原理 2.1 绘制画布 <el-dialogtitle="查看图片":visible.sync="dialogJPG"append-to-body><canvas id="mycanvas" width="940" height="570"></canvas> </el-dialog>这里为了交互体验，使用了 element-ui 的弹窗方式。...