Vue
仗剑天涯,从摘要开始
这个作者很懒,什么都没留下…
展开
-
Vue中在哪个生命周期内调用异步请求?(直观)
答:一般来说,可以在,created,mounted中都可以发送数据请求,但是,大部分时候,会在created发送请求。Created的使用场景:如果页面首次渲染的就来自后端数据。因为,此时data已经挂载到vue实例了。在 created(如果希望首次选的数据来自于后端,就在此处发请求)(只发了异步请求,渲染是在后端响应之后才进行的)、beforeMount、mounted(在mounted中发请求会进行二次渲染) 这三个钩子函数中进行调用。因为在这三个钩子函数中,data 已经创建,可以将服务端原创 2020-05-25 01:11:04 · 3101 阅读 · 1 评论 -
vue路由传参的三种基本方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。父组件中:<li v-for="article in articles"@click="getDescribe(article.id)">methods:方案一: getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${...原创 2020-05-20 21:49:22 · 102 阅读 · 0 评论 -
前端注册登录的业务流程 - vue篇
项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等那如何判断路由是否需要登录呢?就要在路由JS里面做文章登录状态验证?如项目是前后端分离开发,在这介绍vue开发的移动web项目->微信朋友圈前端登录注册向后台发送请求,登录成功后台返回登录者用户信息,并携带 token值进行存储到 cookie 当中用户访问后台的 API 需要携带 token字段验证信息和后台 session进行验证判断用户是否登录?.原创 2020-05-12 14:32:09 · 1442 阅读 · 0 评论 -
Vue-cli 中为单独页面设置背景图片铺满全屏的方法
<template> <div id="logo"> </div></template><script> import meadiaurl from '../../api/mediaurl' export default { name: "logo"</script><style scoped> #logo{ background: url("../../a.原创 2020-05-10 17:30:29 · 2076 阅读 · 0 评论 -
vscode 开启对 webpack alias(文件别名) 引入的智能提示
在webpack项目中,我们经常会设置alias来引入文件,避免文件路径写的过长过深,但是使用alias的时候会发现路径和函数的智能提示不见了,如果路径名称很复杂的话很容易写错而且也不方便。在vue 项目中,我们经常这样设置module.exports = { configureWebpack: { resolve: { alias: { ...原创 2020-05-08 13:02:23 · 1408 阅读 · 1 评论 -
ESlint + VSCode自动格式化代码(2020)
本文用 Vue 项目做示范。利用 Vue CLI 创建项目时要将 ESlint 选上,下载完依赖后,用 VSCode 打开项目。安装插件 ESLint,然后 File -> Preference -> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 用户),搜索 eslint,点击 Edit in setting.json将以下选项添加到配...原创 2020-05-07 21:04:42 · 1519 阅读 · 0 评论 -
vue项目部署篇 -线上部署优化
打包注意事项打包完的项目 dist文件夹如果 已经启动服务,此时不能重新打包,(因为文件 在占用),需要停止服务,再进行重新打包。vue打包上线移除 console1、babel-plugin-transform-remove-console比较流行的解决办法是使用 babel 的一个插件,因为webpack 打包时会使用 babel 进行代码降级,所以babel 插件可以在打包过程中,将...原创 2020-04-30 01:35:58 · 1937 阅读 · 0 评论 -
Vue项目优化 -编码优化篇
一、代码优化1、v-for 遍历必须为 item 添加 key,且避免同时使用 v-if v-for 遍历必须为 item 添加 key 在列表数据进行遍历渲染时,需要为每一项 item 设置唯一 key 值,方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时,新的状态值和旧的状态值对比,较快地定位到 diff 。 v-for 遍历避免同时使用 ...原创 2020-04-29 19:26:01 · 174 阅读 · 0 评论 -
vue富文本编辑器
Vue-Quill-Editor主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想。所以果断使用vue-quill-editor来实现。 wangEditor(国产,基于javascript和css开发的web富文本编辑器,开源免费)优势:轻量简介,最重要的是开源且中文文档齐全。缺点:更新不及时。没有强大的开发团队...原创 2020-04-28 14:14:39 · 1504 阅读 · 0 评论 -
vue图片上传组件
前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件。现将总结再次,希望有帮助。Layout<div class="upload-wraper"> <input type="file" id="upload_ele" multiple="false" accep...原创 2020-04-28 14:14:09 · 1919 阅读 · 1 评论 -
vue全局使用axios插件请求ajax
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推荐大家使用axios,越来越多的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目会使用 Vuex 来管理数据。之前一直使用的是 vue-resource插件,在主入口文件引入import VueResource ...原创 2020-04-26 01:41:20 · 300 阅读 · 0 评论 -
vue项目初始化时npm run dev报错webpack-dev-server解决方法
原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低(1)、npm uninstall webpack-dev-server(2)、npm install webpack-dev-server@2.9.1(3)、npm run dev=====...原创 2020-04-26 01:37:48 · 3343 阅读 · 0 评论 -
vue axios使用form-data的形式提交数据
vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,PHP后端未必能正常获取到,所以在发送之前,需要使用qs模块对其进行处理。axios.defaults.headers.post['Content-Type'] = 'application/x-www-form...原创 2020-04-26 01:35:29 · 1167 阅读 · 0 评论 -
Vue用axios跨域访问数据
axios是vue-resource的替代品,vue-resource不再维护。安装axios:npm install axios使用vue-cli开发时,由于项目本身启动本地服务是需要占用一个端口的,所以会产生跨域的问题。在使用webpack做构建工具的项目中,使用proxyTable代理实现跨域是一种比较方便的选择。通过this.$http去调用axios,如果之前你的vue-res...原创 2020-04-26 01:32:19 · 165 阅读 · 0 评论 -
16款优秀的Vue UI组件库推荐
Vue 是一个轻巧、高性能、可组件化的MVVM库,API简洁明了,上手快。从Vue推出以来,得到众多Web开发者的认可。在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了。在选择Vue UI组件库的过程中,通过GitHub上根据star...原创 2020-04-26 00:47:21 · 562 阅读 · 0 评论 -
vue @load
之前用@load的时候总是不生效。其实原因是这样的:image src有值的时候,才开始加载 onload事件是在src的资源加载完毕的时候,才会触发这样的话,在img标签的src属性填充上值之后,就可以等待onload事件的触发了。...原创 2020-04-11 15:53:39 · 6302 阅读 · 1 评论 -
vue中prop传值时加不加v-bind(冒号:)
前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单。由于结果记起来很容易,所以先给出结果:只有传递字符串常量时,不采用v-bind形式,其余情况均采用v-bind形式传递。传入String类型传入的值title为一个常量(静态prop)时,不加v-bind(或者:)<blog-post title="My...原创 2020-04-10 02:28:43 · 173 阅读 · 0 评论 -
(译)package.json详解
(译)package.json详解原文链接概述本文囊括了所有package.json文件中你需要知道的细节。注意package.json必须是纯JSON的,而不仅仅是一个JavaScript对象字面量。该文件描述的很多行为都受npm-config中的配置影响。下面分别介绍package.json中各个字段的含义和用法。namename和version字段是package....原创 2020-04-11 15:54:05 · 552 阅读 · 0 评论 -
vue简单 tabbar封装
TabBar.vue<template> <div id="tab-bar"> <slot></slot> </div></template><script>export default {};</script><style>#tab-bar { ...原创 2020-04-04 18:18:31 · 292 阅读 · 0 评论 -
Vue自定义指令实例(实时时间转换指令)
在很多论坛网站里面可以看到这样的信息:文章发表距离当前时间的时间间隔。我们来自定义一个指令v-time,将表达式传入的时间戳转换成相对时间。index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> &l...原创 2020-04-01 16:22:31 · 255 阅读 · 0 评论 -
js ~~ 或 + 把各类型转换成数字的两种方法
一、前言在使用 js 的时候经常会出现要把非Number类型转为Number,而又因为 js 奇奇怪怪的转换规则而导致一头雾水。在这篇文章里我总结一下使用 + 和 ~~ 两种方式尝试把各类型转换为数字。二、+ 的妙用我曾做过一道题:var a = false;var b = 1++a ;问 b 为多少?当时我看到这两个加号就隐约觉得不妙。。。实际上这里就用到了 “ + ”...原创 2020-03-31 15:21:58 · 1127 阅读 · 3 评论 -
Runtime-Compiler和Runtime-only的区别
1、Runtime-Compiler和Runtime-only的main.js文件的区别://(1) Runtime-Compilernew Vue({ el: '#app', router, components: { App }, template: '<App/>'})// (2)Runtime-onlynew Vue({ el: '#a...原创 2020-03-29 15:36:40 · 268 阅读 · 0 评论 -
render函数是什么,怎么用
render函数是什么 简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM 因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。 当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上...原创 2020-03-29 15:35:20 · 895 阅读 · 1 评论 -
详解 ESLint 规则,规范你的代码
在很久之前就想通过工具来规范自己的代码风格,减少程序出错的概率,如果看过我的一个前端程序猿的Sublime Text3的自我修养,这篇博客的朋友,肯定知道在当时我使用SublimeLinter-jshint插件来规范风格,但是实际上一直懒癌发作也没去看它的文档,使用着它默认的规则。不过现在是时候切换到 ESLint 了!作为一个有理想有抱负的前端工程师,只是使用默认规则,而不是...原创 2020-03-29 14:38:54 · 330 阅读 · 0 评论 -
项目根目录下的.editorconfig文件
一、.editorconfig文件是什么?在项目里,大多时候都能看到.editorconfig文件,刚开始总是忽视掉它,认为它不太重要。但是,它的存在,必定有它的理由,于是,抽空来研究一下,它是什么,能做什么。官网是这么介绍EditorConfig的,“EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。EditorConfig项目由用于定义编码样式的...原创 2020-03-29 13:38:53 · 408 阅读 · 0 评论 -
vue动态绑定src加字符串拼接
关键点1.img中的src的字符串动态拼接 2.style中的background属性赋值 一.img中的src的字符串动态拼接 1.问题是这样子的,瞧瞧 基本网络链接 :http://openweathermap.org/img/w/02n.png; 但是了字符'02n'是动态的,切换它可以获取不同的天气图片,如果这样的链接在vue的v-for中该如何拼接字符串了,下解:...原创 2020-02-18 00:23:34 · 4875 阅读 · 1 评论 -
uni-app 里的#ifdef MP是什么意思?条件编译
uni-app官方文档传送门:条件编译(点我)相信很多刚接触uni-app的童鞋都不太喜欢先看完整官方文档。总会碰到很多不懂的地方第一时间上网搜答案,就比如在uni-app模版看到的#ifdef MP,这是什么鬼?对于学过C语言的童鞋并不陌生,因为这是条件编译语句为什么会出现在uni-app里呢?因为uni-app的特性—一份代码,多平台运行。没错,就是一套代码,可以在android ios...原创 2020-02-03 22:38:56 · 3734 阅读 · 0 评论 -
Vue.prototype 全局变量
有两种都是在main.js声明第一种main.js 声明 1 2 3 4 5 6 7 8 9 10 Vue.config.productionTip =false // mount axios Vue.$http and this.$http Vue.use...原创 2020-02-03 16:16:56 · 1113 阅读 · 0 评论 -
Vue.config.productionTip = false 是什麽意思
阻止启动生产消息,常用作指令。阻止启动生产消息 這又是什麽意思?看下效果Vue.config.productionTip = falseVue.config.productionTip = true 感覺多了一行信息...原创 2020-02-03 15:52:02 · 221 阅读 · 0 评论 -
uni-app自定义列表组件
filename: u-list.vue<template> <view class="u-list-item u-f-ac u-f-jsb" hover-class="list-hover" @tap="clickevent" :class="{ 'u-list-item-first': isFirstChild }"> <view class="u-f-a...原创 2020-01-31 01:56:17 · 3708 阅读 · 0 评论 -
uni-app分享至第三方平台组件(仅限APP)
<!-- 分享功能 --><template> <view> <!-- 图层蒙版 --> <template v-if="show"> <view class="more-share-model" @tap="toggle"></view> <view class="more-...原创 2020-01-29 02:53:51 · 1480 阅读 · 0 评论 -
uni-app swiper设置自定义高度
话不多少先上图,大家可以看到图片中红色区域是头部区域,黄色区域则是我们要滑动的区域。 大家可以在uni-app官网上看到swiper高度是默认100%,而swiper-item则是要有固定宽高的,要的效果是什么呢?1.点击tab可以切换黄色区域视图2.滑动黄色区域改变视图,支持横向滑动以及纵向滑动我的思路:因为swiper是要固定高度的,它并不会因为内容而自...原创 2020-01-24 17:52:42 · 9312 阅读 · 2 评论 -
CSS3 filter的使用(改变模糊度 亮度 透明等)
讲到对图片的处理,我们经常想到的就是Photoshop等类的图像处理工具,其实css也可以很强大,作为一个前端开发我们也常常要做一些特效,比如根据不同的状态显示不同状态的颜色,或者hover的时候等等。 上面这些效果css一样能做到 CSS :filter CSS滤镜(filter)属提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。...原创 2020-01-20 16:56:01 · 372 阅读 · 0 评论 -
weex websocket 403
安卓使用 weex 的 websocket 连接服务返回403错误,经过排查是由于 header 缺少 origin 参数导致原创 2020-01-19 01:53:55 · 176 阅读 · 0 评论 -
uni-app 离线打包日记(iOS)
下载最新的离线sdk:http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/103 image.png 解压下载的sdk压缩包,在xcode内打开示例工程 image.png 找到下载的sdk内的示例工程打开 image.png xcode询问是否打开点击...原创 2020-01-19 01:53:06 · 490 阅读 · 0 评论 -
uni-app 离线打包日记(安卓)
下载最新的离线sdk:http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/103 image.png 解压下载的sdk压缩包,在as内打开示例工程 image.png image.png 打开的时候还报了一个sdk配置的错,没关系,正常情况能自动纠正 ...原创 2020-01-19 01:52:33 · 251 阅读 · 0 评论 -
vue 项目移植到小程序项目过程中通配选择器“*”的处理
在小程序平台是不允许使用通配选择器的不过在实际应用过程中可以曲线实现,比如使用伪类选择器 :not 替代原始样式:* { opacity: 0.5}替代样式::not(not) { opacity: 0.5}提示:由于通配选择器性能较差,项目中尽量减少通配选择器的使用...原创 2020-01-19 01:51:23 · 190 阅读 · 0 评论 -
隐藏小程序scroll-view组件的滚动条
使用如下样式可以去除小程序scroll-view组件的滚动条scroll-view [style*="overflow"]::-webkit-scrollbar { display: none;}原创 2020-01-19 01:50:43 · 230 阅读 · 0 评论 -
当 uni-app 遇见 vscode
uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架,其官方推荐的开发工具为 HBuilderX,使用起来有很好的开发体验。不过,由于 HBuilderX 没有 Linux 版以及很多前端之前已经习惯了 vscode,不想更换编辑器。直接使用 vscode 开发 uni-app,其体验并不是很好。其实 uni-app 和 vscode 也可以很搭,接下来为大伙带来...原创 2020-01-19 01:49:40 · 4094 阅读 · 0 评论 -
Vue-resource的使用
Vue 实现 Ajax请求 和跨域请求主要是通过插件vue-resource.js。引进引进插件vue-resource.js的方式主要有以下三种:将插件vue-resource.js文件下载到本地,通过script引进。 在网站http://www.bootcdn.cn/vue-resource/选择插件版本,通过script引进。 如果项目是通过 webpack 构建的,可以在...原创 2020-01-03 16:41:58 · 451 阅读 · 0 评论