vue.js进阶之路
vue在众多前端框架语言中脱颖而出,是值得深入学习的,作为一个移动开发者,作为一个前端小白,在学习vue的过程中提升知识!
honey缘木鱼
一个 爱文字的程序猿
展开
-
vue事件发射与接收(可实现页面传值和非父子组件传值)
vue2.0中可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件。1).给data添加一个 名字为eventhub 的空vue对象,就可以在任何组件都可以调用事件发射接收的方法了,在main.js中添加:new Vue({ el: '#app', router, data: { eventHub: new Vue() }, render...原创 2018-12-26 18:34:11 · 648 阅读 · 0 评论 -
Object.freeze( ) 阻止Vue无法实现 响应式系统
做了一个vue项目,总是边百度边写,知识体系不能系统起来,准备在浏览下vue.js官网基础知识。当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。但是如果使用 Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。具体使用办法举例:...原创 2018-12-25 15:03:23 · 1238 阅读 · 0 评论 -
使用手机访问vue项目
在做vue项目测试时,需要放在手机上调试,那么如何放在手机上调试呢?毋庸置疑,直接使用ip地址+端口号用手机去访问电脑上的vue项目。1. 把host中的改为“自己电脑的IP地址”2.改为‘127.0.0.1’3.改为‘localhost’用上述3中方式就可以放在手机上测试啦!...原创 2018-12-24 18:09:36 · 994 阅读 · 0 评论 -
vue.js 动态绑定class的几种方式
Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新。基于这种特性,通过vue.js动态绑定class就变得非常简单。思路:以某一页面样式需要单独适配iphonex为例方式一.对象的形式 (第一个参数 类名, 第二个参数:boolean值) ...原创 2018-12-20 20:01:29 · 3544 阅读 · 0 评论 -
vue返回上一页面时回到原先滚动的位置
项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面。思路:因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为:(1).在App.vue中加入:<template> <div id="...原创 2018-12-18 11:45:18 · 15094 阅读 · 14 评论 -
vue项目中axios请求网络接口封装
每个项目网络请求接口封装都是很重要的一块,第一次做Vue项目,我们的封装方法如下:(1).新建一个js文件,取名api.js(2).引入 axios ,mint-UI ,如下图:import axios from 'axios'import {MessageBox, Toast} from 'mint-ui'axios.defaults.timeout = 50000//默认请...原创 2018-12-17 16:15:02 · 1141 阅读 · 0 评论 -
Vue webpack打包后,css样式发生改变或不起作用
用run dev build打包后,发现样式改变了,最终发现addAdress.vue和myAdress.vue中的有个类名是相同的,但是想着<style scoped></style>在style标签上添加scoped属性,就表示它的样式作用于当下的模块,样式私有化的目的就不会相互污染啊!为什么打包后会出现这样的结果呢!不太理解!一.css样式发生改变...原创 2018-12-13 20:11:35 · 12373 阅读 · 0 评论 -
vue 项目中常见的几个问题
(1).H5页面在iOS网页中手机号码颜色改变H5页面在iOS网页中的数字被识别为电话号码,原因在于Safari浏览器的问题:解决该问题只需在head标签中添加如下代码即可解决。<metaname="format-detection"content="telephone=no"> 在Vue上的具体代码位置如图:项目路径FF730ACF-F192-45...原创 2018-12-06 20:13:42 · 829 阅读 · 0 评论 -
vue webpack打包后图片路径错误的解决方法
项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。9E3E9C06-4873-4D1B-A5B3-35C71889249E.png因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到...原创 2018-12-06 20:08:04 · 3340 阅读 · 0 评论 -
mint-UI上拉加载下拉刷新和fastclick冲突问题解决
当我们的Vue项目为了解决IOS设备事件点击卡顿,300ms的延迟的问题,引入了fastclick后,会有很多小的冲突,例如在使用mint-UI实现上拉加载和下拉刷新的时候,经常会触碰到点击事件进入下一个页面,这是因为去掉300毫秒的延迟就会使得页面特别灵敏,想着用阻止冒泡的方式来解决。在/node_modules\mint-ui\lib\loadmore\index.js和mint-ui.c...原创 2018-12-05 09:32:58 · 1050 阅读 · 0 评论 -
vue 方法回调通知执行下一个方法
在项目中有很多这样的需求,在一个方法执行完成拿到数据后才可以执行下一个方法,这就需要在第一个方法执行完后有个回调函数通知下一个方法可以执行了。function get(data){ return new Promise(function(resolve, reject){ if(data>5){ resolve(data) }else...原创 2018-11-29 20:22:54 · 8274 阅读 · 0 评论 -
vue 获取跳转上一页组件信息
项目中有一需求,需要根据不同的页面路径url跳转进行不同的操作,首先需要获得上一页面的url,利用 beforeRouteEnter 这个钩子中的from参数获得之前url的信息,然后给 next 传递回调来访问当前组件的实例。 操作代码为:beforeRouteEnter (to, from, next) { console.log(to) console....原创 2018-11-28 18:28:58 · 3011 阅读 · 0 评论 -
vue 界面在苹果手机上滑动点击事件等卡顿解决方案
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题,(1).滑动页面卡顿,(2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟。一.滑动页面卡顿//页面布局<template> <div class='con...原创 2018-11-26 22:16:21 · 3746 阅读 · 0 评论 -
完美解决vue项目中弹出框滑动时,内部页面也跟着滑动问题
在main.js中设置全局函数://弹出框禁止滑动Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo...原创 2018-11-23 20:11:31 · 10910 阅读 · 3 评论 -
vue中 localStorage的使用方法(详解)
vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。(1).储存数据localStorage.se...原创 2018-11-21 11:37:15 · 39097 阅读 · 1 评论 -
三种方式解决vue中v-html元素中标签样式
当我们引入第三方组件或加载html元素时,想修改下样式,就可以用以下三种方式:一.去掉<style scoped>中的scoped这个方法不建议使用,会改变布局二.定义两个style标签,一个含有scoped属性,一个不含有scoped属性使用方法为<style scoped> .introduction{ width: 100%; ...原创 2018-11-20 19:54:18 · 10578 阅读 · 2 评论 -
vue运行报错:Cannot find module 'webpack/bin/config-yargs'
从网上下载的一个vue项目,终端执行:npm run dev 时,报错如下图:从上述报错中可以看到,需要安装webpack-cli终端输入:npm install webpack-cli然后执行:npm run dev 就OK!可以运行了! ...原创 2018-11-17 12:39:13 · 6620 阅读 · 1 评论 -
Vue 移动端跳到手机拨打电话界面的几种方法
我们做项目时,经常会用到拨打电话的功能,目前在做vue项目,它是如何实现的呢?根据别人的分享,具体实现方法如下几种实现效果图:方法一<a :href="'tel:' + 110">联系商家</a>方法二 <a @click="callPhone">联系商家</a>callPhone(){ window.lo...原创 2018-11-15 12:44:13 · 15696 阅读 · 5 评论 -
Invalid prop: type check failed for prop "price". Expected String, got Number.
在谷歌浏览器上写Vue项目时,总会有很多警告,关键是红色的,非常刺眼,一片红好像是严重的错误,在有强迫症的程序员眼里非常之别扭,准备清除警告!定位错误信息:components/alters/addCartAlter.vue 和src/pages/HomePages/productDetails.vue中的price的类型不对,组件中定义类型为字符串:父试图用Number赋值的...原创 2018-11-09 16:53:27 · 5503 阅读 · 0 评论 -
解决前端浏览器字体小于12px办法
做项目时,UI设计的字体10px,看效果图时发现字体仍然蛮大,改变12px时字体还是那么大,改变到14px时,字体变大了,发现规律,才知道原来浏览器为了让用户字体看的清楚,最小设置为12px。怎么办?设计就是10px?最终实现的效果图如下:百度时,各位网上大神说利用transform: scale(0.5)可以满足要求,具体使用时,发现把整个div宽高都缩放了,不满足要求,反过来想...原创 2018-11-08 18:48:27 · 6280 阅读 · 1 评论 -
throw er; // Unhandled 'error' event 和Error: listen EADDRNOTAVAIL 192.168.0.109:8081
问题表述如图所示问题所在:因为host中的ip不是本机IP导致的错误!解决方法:1. 把host中的改为“自己电脑的IP地址”2.改为‘127.0.0.1’3.改为‘localhost’...原创 2018-10-27 20:03:55 · 1835 阅读 · 0 评论 -
vue实现星级评价及上传多张图片等功能(类似淘宝商品评价页面)
最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示: 评价页 点击看大图,且可左右滑动功能需求分析默认为5颗星,为非常满意,4颗满意,根据不同星级显示不同满意程度。 2.评价内容,最多为200字。 3.上传图片最多上传6张,图片不可拉伸,可删除,可点击放大左右滑动展示具体实现关键代码 关于星...原创 2018-10-27 21:04:54 · 5563 阅读 · 4 评论 -
node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?报错问提解决方案
上图所示为报错问题这是由于css解析的时候出了问题,解决方案为:首先看你使用的CSS语言是什么,是 常规的 或者 less 或者 sass。如果是常规的,执行npm install style-loader css-loader style-loader --save-dev安装依赖就行。 如果是less的,执行npm install less less-loade...原创 2018-10-26 12:46:27 · 68717 阅读 · 6 评论 -
vue上传图片时,console.log()图片信息遇到的坑
用vue开发项目时,有个上传项目的功能 <input @change="uploadImages($event)" type="file" accept="image/jpeg,image/x-png,image/gif" id="" value="" />在获取图片信息时,想着在控制台作出打印,代码如下:uploadImages: function (e) {原创 2018-10-26 10:35:36 · 1046 阅读 · 1 评论 -
如何新建一个vue项目(图文详解)
作为一个几年IOS开发经验的移动端程序猿来说,已经感到很大的危机感,不得不学习新的东西,选择了在众多框架中脱颖而出的vue作为学习的目标。定好目标,首先应该想到的就是安装环境,搭建框架,一步一步的完成最基础的新建一个Vue项目的目的。第一步npm安装步骤:1. 到node 官网 选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可。2. 输入node -v,如果出现版本...原创 2018-10-25 20:36:36 · 9016 阅读 · 0 评论