Vue
yusirxiaer
前端移动端一路の风景
展开
-
[Vue warn]: You are using the runtime-only build of Vue 牵扯到Vue runtime-compiler与runtime-only区别
[Vue warn]:You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.1. Vue的编译渲染过程template --> ast --> render函数 --> VDo.原创 2022-02-24 23:03:48 · 544 阅读 · 0 评论 -
手写vue2的Lazyload
调用方式,express写个后台服务调图片,具体使用不贴了import VueLazyload from "./modules/vue-lazyload";Vue.use(VueLazyload,{ loading: 'http://localhost:3000/images/loading.gif', error: 'http://localhost:3000/images/error.jpg', preload: 1 // 倍数});使用指令<img v-lazy原创 2021-10-22 18:25:32 · 247 阅读 · 0 评论 -
vue2项目使用codemirror插件实现代码编辑器功能
1、使用npm安装依赖npm install --save codemirror2、在页面中放入如下代码<template> <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"></textarea></template><script> import "codemirror/theme/ambi原创 2021-08-26 20:09:03 · 4930 阅读 · 3 评论 -
vue中使用Vue-pdf在线预览
下载npm i vue-pdf引入(在所需要预览的页面)<script>import axios from 'axios'import pdf from 'vue-pdf'import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js' // 加载中文的包export default { components: { pdf }, data () { retur.原创 2021-04-14 18:22:54 · 766 阅读 · 0 评论 -
vue-property-decorator使用指南
在Vue中使用TypeScript时,非常好用的一个库,使用装饰器来简化书写。一、安装npmi-Svue-property-decorator@Prop @PropSync @Provide @Model @Watch @Inject @Provide @Emit @Component(provided byvue-class-component) Mixins(the helper function namedmixinsprovided byvue-cla...原创 2021-01-08 15:53:45 · 3285 阅读 · 1 评论 -
vue app扫PC端二维码登录
通过接口获取二维码唯一标识,例如:qrcodeId 通过qrcodejs2插件生成 二维码(二维码内容就是 qrcodeId,具体根据APP 需要) 循环调用接口,查看扫码状态(app是否扫码确认登录)//下载插件npm install --save qrcodejs2 <template> <div> <div id="qrcode"></div> <!-- 创建一个div,并设置id为qrcode --> &l.转载 2020-12-23 22:17:53 · 714 阅读 · 1 评论 -
Vue2 MVVM 双向绑定(数据劫持+发布者-订阅者模式)
参考文献:https://www.cnblogs.com/libin-1/p/6893712.htmlhttps://juejin.im/post/5b2f0769e51d45589f46949eMVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成。View层代表的是视图、模版,负责将数据模型转化为UI展现出来。Model层代表的是模型、数据,可以在Model层中定义数据修改和操作的业务逻辑。ViewModel层连接Model和V.原创 2020-09-16 11:30:38 · 1012 阅读 · 0 评论 -
Element-UI中Drawer抽屉去除标题自带蓝色框
当点击事件drawer==true时,抽匣回打开这时抽匣的标题会出现一个难看的蓝色边框,一会就会消失,但是好丑,所以要去掉它解决方法 /deep/ :focus { outline: 0; }vue组件中,在style设置为scoped的时候,里面在写样式对子组件是不生效的,如果想让某些样式对所以子组件都生效,可以使用 /deep/ 深度选择器。...原创 2020-09-03 15:49:56 · 1239 阅读 · 0 评论 -
element ui table scrollTop 滚动到行头或行尾
1.设置table的ref为tableList2.设置滚动至顶部this.$refs.tableList.bodyWrapper.scrollTop =0;3.设置滚动至底部this.$refs.tableList.bodyWrapper.scrollTop =this.$refs.tableList.bodyWrapper.scrollHeight;//如果请求完更新数据,需要使用$nextTickthis.$nextTick(() => { this.$refs.t.原创 2020-08-27 16:43:21 · 3012 阅读 · 2 评论 -
vue-provide/inject轻松实现跨级访问祖先组件
provide:Object | () => Objectinject:Array<string> | { [key: string]: string | Symbol | Object }provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。provide 选项应该是一个对象或返回一原创 2020-07-16 09:13:44 · 312 阅读 · 0 评论 -
vue项目,webpack中配置src路径别名及使用
默认会有‘@’别名,指向src目录,还可以添加自定义别名等等。使用方法使用别名一般就三种情况:在js中用,在css中用,在html文档内用js中用,最简单:import {getName} from '@/util/name'css中使用,需要加入“~”,并且不要写成字符串:{ background: url(~@/assets/img/04_2.jpg); bac...原创 2020-04-21 16:31:19 · 6552 阅读 · 2 评论 -
vue.config和editorconfig
我们在做项目的时候,应该给经常用到的文件配置它的别名,这样做,既可以方便引用,也可以防止当文件位置发生改变的时候出现错误。 配置前:import bartar from '../../components/bartar'配置后(不用再关心文件层级关系):import bartarfrom 'components/bart...原创 2020-04-21 11:17:08 · 1266 阅读 · 0 评论 -
项目打包部署到Tomcat
一、使用 npm run build打包完成之后会出现一个dist文件夹,里面有static文件夹和一个index.html文件,一般我们部署在tomcat上面会将文件放在webapps文件夹下如果不进行任何修改将dist文件夹放进去的话,会出现资源路径错误的问题,因为config文件夹下index文件build默认的 assetsPublicPath:"/",除非部署的时候将dist文件...原创 2020-04-17 15:18:48 · 1685 阅读 · 0 评论 -
Cookie的使用(js-cookie插件)
一、安装npm install js-cookie --save二、引用import Cookies from 'js-cookie'三、一般使用存到Cookie去// Create a cookie, valid across the entire site:Cookies.set('name', 'value');// Create a cookie th...原创 2020-03-16 16:17:15 · 168 阅读 · 0 评论 -
vue+Element-ui实现分页效果
当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了。1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination分页,使用Pagination 快速完成分页功能最终效果展示<div...原创 2019-11-22 15:32:57 · 633 阅读 · 0 评论 -
VUE2.x的浏览器兼容情况汇总
翻译 2019-11-19 16:50:30 · 2810 阅读 · 0 评论 -
VUE组件 之 Drawer 抽屉
一、源码地址https://github.com/imxiaoer/DrawerForVue二、效果图三、具体代码drawer.vue<template> <div class="drawer"> <div :class="maskClass" @click="closeByMask"></div>...原创 2019-11-08 17:12:06 · 6673 阅读 · 0 评论 -
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js:用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置)123456789101112131415var path = require原创 2017-09-06 13:41:50 · 39859 阅读 · 0 评论 -
使用V-chart时配置踩过的一些坑
如何配置图表信息echart的配置项可谓是相当的海量,能不看就不看。而v-chart对其进行了不少的简化,所以我们想要自定义一个图表时,最好按照以下步骤来检查:图表私有属性v-chart每一个图表都有自己独有的设置项,想要配置这些项需要在组件上加入 :setting="chartSettings",然后在vue组建的data里设置chartSettings的值,如下:<te...原创 2019-08-20 16:33:59 · 4830 阅读 · 3 评论 -
vue 出现Elements in iteration expect to have 'v-bind:key' directives
是由于eslint检测出现bug解决方法有两种v-for 后添加 :key='item'<li v-for="item in list" :key="item">在build处关闭eslint检测...(config.dev.useEslint ? [createLintingRule()] : []),...原创 2019-08-29 14:51:33 · 142 阅读 · 0 评论 -
vue/return-in-computed-property Enforce that a return statement is present in computed property
此规则强制return语句在computed属性中得完整存在。<script>export default { computed: { /* ✓ GOOD */ foo () { if (this.bar) { return this.baz } else { return this.baf ...原创 2019-08-29 15:07:17 · 5422 阅读 · 1 评论 -
vue-cli3 一直运行 /sockjs-node/info?t= 解决方案
首先sockjs-node是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。服务端:sockjs-node(https://github.com/sockjs/sockjs-node)客户端:sockjs-clien(https://github.com/sockjs/sockjs-client)如...原创 2019-09-06 17:25:04 · 447 阅读 · 0 评论 -
如何让Element UI的Message消息提示每次只弹出一个
Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示,但是公司的测试人员在进行测试时会一直点,然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况(毕竟客户不会闲着没事一直点点点,而且就算出现了也只是不太好看,对功能什么的都没什么影响),但既然测试提出来了那还是要解决的。最开始查了下Element UI的官方文档,发现确实没提...原创 2019-09-26 16:21:57 · 9232 阅读 · 1 评论 -
Vuex的全面用法总结
1. vuex简介vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起,集中式来管理。需要声明的是,这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧,如果不懂的话,建议先学完vue的基础知识再看vuex。2. vuex的组成结构示意图vuex的特点是把数据单独隔离,形成一...原创 2019-08-15 14:29:42 · 37796 阅读 · 7 评论 -
element-ui之dialog组件title插槽的使用
dialog对话框组件title属性的slot使用方法使用背景需要单独控制title中某个数据显示及样式,footer也一样 <el-dialog // 也可以这样写,但是没有办法单独控制name age的显示 // title="name+ '' + age" title="提示" :visible.s...原创 2019-06-20 14:18:54 · 17387 阅读 · 0 评论 -
Vue CLI 3.0脚手架如何在本地配置mock数据json
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。我们在开发的过程中,由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目,这样会使我们的前后端会同时的进行,提高我们的开发效率。因为最近自己在自学 Vue 也在自己撸一个项目,肯定会遇到使用数据的情况,所以就想着...原创 2019-02-14 15:35:12 · 1201 阅读 · 1 评论 -
vuex知识点
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;集中存储和管理应用的所有组件状态。状态:什么是状态,我们可以通俗的理解为数据。Vue只关心视图层,那么视图的状态如何来确定?我们知道是通过数据驱动,这里的状态管理可以简单理解为管理数据。集中存储:Vue只关心视图,那么我们需要一个仓库(Store)来存储数据,而且是所有的数据集中存储,视图和数据就可以分析。原创 2017-09-19 10:57:58 · 690 阅读 · 0 评论 -
npm升级package.json依赖包
使用npm管理node的包,可以使用npm update 对单个包升级,对于npm的版本大于 2.6.1,可以使用命令:npm install -g升级全局的本地包。对于版本小于2.6.1的一个一个包的升级实在是太麻烦,就想找到一个升级所有本地包的方法,找到两个比较好的方式:shell脚本和npm-ckeckshell脚本使用shell脚本升级npm包,首先所在找到需要原创 2017-09-19 10:07:11 · 11431 阅读 · 0 评论 -
在Vue-cli项目中使用echarts
该示例使用 vue-cli 脚手架搭建安装echarts依赖npm install echarts -S11或者使用国内的淘宝镜像:安装npm install -g cnpm --registry=https://registry.npm.taobao.org11使用cnpm install echarts -S11创建图表全局引入原创 2017-08-31 17:18:47 · 2434 阅读 · 1 评论 -
浅谈 Vue 项目优化
前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据。下面进入正题基础优化所谓的基础优化是任何 web 项目都要做的,并且是问题的根源。HTML,CSS,JS 是第一步要优化的点分别对应到 .vue 文件内的,,,,下面逐个谈下 vue 项目里都有哪些值得优化的点template原创 2017-09-07 10:33:09 · 518 阅读 · 0 评论 -
vue-resource jsonp跨域问题解决方法
最近在学习vue.js 碰到个ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在记录下来,希望可以给刚接触使用jsonp的同学一点帮助!关于什么是jsonp,以及为什么要用jsonp我就不多说了,不明白的同学自行百度一下。我们先来说一下jQuery里面的jsonp请求,这搞懂了 vue-resource 里面的jsonp原创 2017-08-15 14:22:32 · 11662 阅读 · 2 评论 -
vue-resource全攻略
Vue.js——vue-resource全攻略概述上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例。Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jquery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest原创 2017-08-15 13:42:30 · 341 阅读 · 2 评论 -
vue 中$index $key 已移除
之前可以这样:123456ul id="example"> li v-for="item in items"> {{$index}} {{$key}} li>ul>现在已经移除,如原创 2017-08-15 12:08:47 · 535 阅读 · 0 评论 -
vuejs怎么在服务器上发布部署
首先VUE 是一个javascript的前端框架,注定了它是运行在浏览器里的,对服务器本地没有任何要求,只要一个静态文件服务器能通过http访问到其资源文件就足矣!无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器,也用不了多少行代码。npm run dev 是用来在本地开发的时候做调试用的,vue开发的是前端的东西,不是nodejs 服务端程序,按道理讲,生原创 2017-08-14 16:11:35 · 16170 阅读 · 1 评论 -
【vue报错】——listen EADDRINUSE :::8080 解决方案
问题原因:此项错误表示 8080 端口被占用解决方案一:打开cmd输入:netstat -ano查看所有端口信息,如图,找到端口 8081,以及对应的 PID输入:tskill PID 即可杀死进程解决方案二:打开cmd输入:netstat -ano查看所有端口信息,如图,找到端口 8081,以及对应的 PID输入:tas原创 2017-08-16 15:45:48 · 1889 阅读 · 0 评论 -
vuex小例
少废话,先出东西 vuexmain.jsimport Vue from 'vue'import App from './App'import router from './router'import store from './store'Vue.config.productionTip = falsenew Vue({ el: '#app', router, stor原创 2017-09-20 11:48:54 · 244 阅读 · 0 评论 -
vue-resource 拦截器(interceptor)的使用
拦截器-interceptor 在现代的一些前端框架上,拦截器基本上是很基础但很重要的一环,比如Angular原生就支持拦截器配置,VUE的Axios模块也给我们提供了拦截器配置,那么拦截器到底是什么,它有什么用? 拦截器能帮助我们解决的添加统一的request的参数 比如header中加入X-Requested-With,比如原创 2017-09-21 17:38:32 · 1106 阅读 · 0 评论 -
vue axios POST请求中参数以form data和request payload形式的原因
HTTP请求中,如果是get请求,那么表单参数以name=value&name1=value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以name=value&name1=value1的形式在请求体中。通过chrome的开发者工具可以看到如下(这里是可读的形式,不是真正的HTTP请求协议的请求格式):get请求:[plain] vie原创 2017-09-21 22:26:50 · 14062 阅读 · 0 评论 -
vue 方法中js动态创建dom,拼接元素图片不显示
var ob = '<ul class="layer_notice">'; for (var j = 0;j < this.deviceDetailArray.length;j++) { if(this.deviceDetailArray[j].kinds == 1){ o...原创 2019-02-15 17:06:16 · 5818 阅读 · 0 评论 -
使用 vue-cli 开发多页应用
修改的webpack配置文件全局配置修改 webpack.base.conf.js打开 ~\build\webpack.base.conf.js ,找到entry,添加多入口entry: { app: './src/main.js', app2: './src/main2.js', app3: './src/main3.js',},运行、编译的时候...原创 2019-01-23 14:18:58 · 521 阅读 · 0 评论