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 · 598 阅读 · 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 · 269 阅读 · 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 · 5229 阅读 · 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 · 805 阅读 · 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 · 3465 阅读 · 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 · 748 阅读 · 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 · 1098 阅读 · 0 评论 -
Element-UI中Drawer抽屉去除标题自带蓝色框
当点击事件drawer==true时，抽匣回打开这时抽匣的标题会出现一个难看的蓝色边框，一会就会消失，但是好丑，所以要去掉它解决方法 /deep/ :focus { outline: 0; }vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。...原创 2020-09-03 15:49:56 · 1288 阅读 · 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 · 3220 阅读 · 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 · 340 阅读 · 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 · 6660 阅读 · 2 评论 -
vue.config和editorconfig
我们在做项目的时候，应该给经常用到的文件配置它的别名，这样做，既可以方便引用，也可以防止当文件位置发生改变的时候出现错误。 配置前:import bartar from '../../components/bartar'配置后(不用再关心文件层级关系):import bartarfrom 'components/bart...原创 2020-04-21 11:17:08 · 1299 阅读 · 0 评论 -
项目打包部署到Tomcat
一、使用 npm run build打包完成之后会出现一个dist文件夹，里面有static文件夹和一个index.html文件，一般我们部署在tomcat上面会将文件放在webapps文件夹下如果不进行任何修改将dist文件夹放进去的话，会出现资源路径错误的问题，因为config文件夹下index文件build默认的 assetsPublicPath:"/"，除非部署的时候将dist文件...原创 2020-04-17 15:18:48 · 1791 阅读 · 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 · 187 阅读 · 0 评论 -
vue+Element-ui实现分页效果
当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。1.本次所使用的是vue2.0+element-ui实现一个分页功能，element-ui这个组件特别丰富，分页中给我提供了一个Pagination分页，使用Pagination 快速完成分页功能最终效果展示<div...原创 2019-11-22 15:32:57 · 650 阅读 · 0 评论 -
VUE2.x的浏览器兼容情况汇总
翻译 2019-11-19 16:50:30 · 2992 阅读 · 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 · 6868 阅读 · 0 评论 -
如何让Element UI的Message消息提示每次只弹出一个
Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示，但是公司的测试人员在进行测试时会一直点，然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况（毕竟客户不会闲着没事一直点点点，而且就算出现了也只是不太好看，对功能什么的都没什么影响），但既然测试提出来了那还是要解决的。最开始查了下Element UI的官方文档，发现确实没提...原创 2019-09-26 16:21:57 · 9416 阅读 · 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 · 465 阅读 · 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 · 5521 阅读 · 1 评论 -
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 · 170 阅读 · 0 评论 -
使用V-chart时配置踩过的一些坑
如何配置图表信息echart的配置项可谓是相当的海量，能不看就不看。而v-chart对其进行了不少的简化，所以我们想要自定义一个图表时，最好按照以下步骤来检查：图表私有属性v-chart每一个图表都有自己独有的设置项，想要配置这些项需要在组件上加入 :setting="chartSettings"，然后在vue组建的data里设置chartSettings的值，如下:<te...原创 2019-08-20 16:33:59 · 4952 阅读 · 3 评论 -
Vuex的全面用法总结
1. vuex简介vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧，如果不懂的话，建议先学完vue的基础知识再看vuex。2. vuex的组成结构示意图vuex的特点是把数据单独隔离，形成一...原创 2019-08-15 14:29:42 · 37909 阅读 · 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 · 17713 阅读 · 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 · 5903 阅读 · 0 评论 -
webpack之externals操作三部曲--正确的姿势
1.作用首先webpack提供这个==externals==选项作用是==从打包的bundle文件中排除依赖==。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去，而是通过script的方式去访问这些依赖。2.怎么用？以jquery为例子，目的是在runtime时通过cdn获取jquery依赖，在打包时忽略他的打包步骤一：//index.ht...原创 2019-02-14 16:58:17 · 2002 阅读 · 1 评论 -
Vue CLI 3.0脚手架如何在本地配置mock数据json
前后端分离的开发模式已经是目前前端的主流模式，至于为什么会前后端分离的开发我们就不做过多的阐述，既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。我们在开发的过程中，由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目，这样会使我们的前后端会同时的进行，提高我们的开发效率。因为最近自己在自学 Vue 也在自己撸一个项目，肯定会遇到使用数据的情况，所以就想着...原创 2019-02-14 15:35:12 · 1230 阅读 · 1 评论 -
通过Vue CLI3 快速创建Vue项目并部署到tomcat
1、前提首先你要安装好nodejs和yarn,直接在官网下载安装包，一键安装即可，不需要什么环境配置，我安装的是最新版本（node-v10.13.0、yarn-1.12.3）2、安装同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3，而自己学习的GitHub上的项目为2~ 2.1 新版本 Vue CLI 3 写这篇文章的时候官网默认的为Vue CLI 3n...原创 2019-01-31 16:43:53 · 5971 阅读 · 2 评论 -
使用 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 · 539 阅读 · 0 评论 -
前端 crypto-js aes 加解密
背景前段时间公司做项目，该项目涉及到的敏感数据比较多，经过的一波讨论之后，决定前后端进行接口加密处理，采用的是 AES + BASE64 算法加密~网上关于 AES 对称加密的算法介绍看上一篇！具体实现其实搞懂了是怎么一回事，做起来还是挺简单的，因为库都是现成的，我们只需要会用就好啦，这里我在推荐一篇理解AES加密解密的使用方法，加深大家对 AES 算法的理解~这里我以 Vue 作为例子，其他的也...原创 2018-04-13 17:04:12 · 1422 阅读 · 1 评论 -
MVVM原理还你
众所周知当下是MVVM盛行的时代，从早期的Angular到现在的React和Vue，再从最初的三分天下到现在的两虎相争。无疑不给我们的开发带来了一种前所未有的新体验，告别了操作DOM的思维，换上了数据驱动页面的思想，果然时代的进步，改变了我们许多许多。啰嗦话多了起来，这样不好。我们来进入今天的主题划重点MVVM 双向数据绑定 在Angular1.x版本的时候通过的是脏值检测来处理而现在无论是Rea...原创 2018-04-03 15:16:37 · 831 阅读 · 1 评论 -
最新的vue webpack模板没有dev-server.js文件，进行后台数据模拟笔记
最新的vue里dev-server.js被替换成了webpack-dev-conf.js在模拟后台数据的时候直接在webpack-dev-conf.js文件中修改第一步，在const portfinder = require(‘portfinder’)后添加//第一步const express = require('express')const app = express()//请求serve...原创 2018-03-18 17:33:00 · 1617 阅读 · 0 评论 -
vue-cli webpack 配置分析
目录结构.├── README.md├── build│ ├── build.js│ ├── check-versions.js│ ├── dev-client.js│ ├── dev-server.js│ ├── utils.js│ ├── webpack.base.conf.js│ ├── webpack.dev.conf.js│ └原创 2017-10-23 15:02:23 · 303 阅读 · 0 评论 -
vue2使用axios post跳坑，封装成模块
终于将vue-resource替换成axios了，其中像application/x-www-form-urlencoded发送的头信息以及返回的response结果这两点都需要注意一下。其实https://github.com/mzabriskie/axios也有说明的。因为我在vue-resource中使用了Vue.http.options.emulateJSON = true;原创 2017-09-21 23:17:52 · 8264 阅读 · 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 · 14112 阅读 · 0 评论 -
vue-resource 拦截器（interceptor）的使用
拦截器-interceptor 在现代的一些前端框架上，拦截器基本上是很基础但很重要的一环，比如Angular原生就支持拦截器配置，VUE的Axios模块也给我们提供了拦截器配置，那么拦截器到底是什么，它有什么用？ 拦截器能帮助我们解决的添加统一的request的参数 比如header中加入X-Requested-With，比如原创 2017-09-21 17:38:32 · 1128 阅读 · 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 · 260 阅读 · 0 评论 -
vuex知识点
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式；集中存储和管理应用的所有组件状态。状态：什么是状态，我们可以通俗的理解为数据。Vue只关心视图层，那么视图的状态如何来确定？我们知道是通过数据驱动，这里的状态管理可以简单理解为管理数据。集中存储：Vue只关心视图，那么我们需要一个仓库（Store）来存储数据，而且是所有的数据集中存储，视图和数据就可以分析。原创 2017-09-19 10:57:58 · 728 阅读 · 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 · 11487 阅读 · 0 评论 -
浅谈 Vue 项目优化
前几天看到大家说 vue 项目越大越难优化，带来很多痛苦，这是避免不了的，问题终究要解决，框架的性能是没有问题的，各大测试网站都有相关数据。下面进入正题基础优化所谓的基础优化是任何 web 项目都要做的，并且是问题的根源。HTML，CSS，JS 是第一步要优化的点分别对应到 .vue 文件内的，,,，下面逐个谈下 vue 项目里都有哪些值得优化的点template原创 2017-09-07 10:33:09 · 553 阅读 · 0 评论