vue.js
关注
分享
扫一扫
honey缘木鱼
一个 爱文字的程序猿
展开
-
Vue项目npm run dev后 报错Cannot GET /
项目npm run dev后，没有报错！点击链接报错Cannot GET /原因：因为项目中背景图片不显示问题，就把config/index.js里的dev: {assetsPublicPath: ‘/’,}改为assetsPublicPath: ‘./’ 。解决方案：...原创 2019-06-29 15:29:34 · 1874 阅读 · 1 评论 -
使用手机访问vue项目
在做vue项目测试时，需要放在手机上调试，那么如何放在手机上调试呢？毋庸置疑，直接使用ip地址+端口号用手机去访问电脑上的vue项目。1. 把host中的改为“自己电脑的IP地址”2.改为‘127.0.0.1’3.改为‘localhost’用上述3中方式就可以放在手机上测试啦！...原创 2018-12-24 18:09:36 · 1020 阅读 · 0 评论 -
h5页面适配iPhone X的方法
项目接近尾声，测试时突然想起还有iphoneX需要适配，虽然页面都是自适应，但是由于iPhone X的特殊性，还是需要特殊对待。因为这个h5项目嵌入在原生项目中，适配就会有有种方式：1.在原生中用原生的的方法适配 2.在前端页面中用h5的方式适配。一.原生适配iphoneX原生适配很简单，查看机型图：只要用#define KIsiPhoneX ([UIScreen ma...原创 2018-12-24 16:32:19 · 1995 阅读 · 8 评论 -
vue返回上一页面时回到原先滚动的位置
项目结束，测试时发现在首页商品列表中，向上滑动几页后点击进入详情，从详情页面返回商品列表时，页面回到了最顶部，测试不通过说是用户体验不好，要求从哪里点击进去返回该页面时回到原先的滚动页面。思路：因为vue是单页面应用，进入其他页面时会销毁该页面，用keep-alive不让其刷新，具体实现为：(1).在App.vue中加入：<template> <div id="...原创 2018-12-18 11:45:18 · 15233 阅读 · 14 评论 -
多种方式判断PC端，IOS端，移动端
1. 通过判断浏览器的userAgent，用正则来判断手机是否是IOS（苹果）和Android（安卓）客户端。var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[...原创 2018-12-11 20:01:05 · 1133 阅读 · 0 评论 -
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 · 1172 阅读 · 0 评论 -
Cannot use v-for on stateful component root element because it renders multiple elements.
报错如图提示： Cannot use v-for on stateful component root element because it renders multiple elements.中文大致意思：不能在根元素（root element）使用 v-for，因为v-for是个循环体呈现多个元素，v-for在根元素上导致无法渲染。代码如图：<template>...原创 2018-12-22 10:55:50 · 2455 阅读 · 2 评论 -
Vue的生命周期函数和beforeRouteEnter()/beforeRouteLeave()的函数
用Vue开发了一个项目，虽然项目做完了，但心中却没有一个完整的知识体系，不能称之为会Vue，也许只能称之为了解，这段时间闲剩下来，找到Vue.js 的官网，简直了。。。简直都是自己陌生的各种语法函数，都怀疑自己是怎么做的项目啦！先参考vue官网从简单的看起！先了解下vue的生命周期。 也许我们从上图中并不能直观的看出生命周期中的函数的具体使命，先简短的用文字了解下：before...原创 2018-12-27 18:26:07 · 6074 阅读 · 0 评论 -
解决html标签中有多个空格
设计图如下：想着用如下代码：<div>参数 产地 功效</div>虽然中间加了很多空格，但是实际效果就一个空格，想着有没有空格标签呢，最后发现只能用标签符：“&nbsp;”&nbsp; 代表空格的转意字符，如果有多个空格我们就复制粘贴输入多次“&nbsp;”即可。实现如图效果代码为： <div&g...原创 2018-12-21 18:10:45 · 4846 阅读 · 0 评论 -
Object.freeze( ) 阻止Vue无法实现 响应式系统
做了一个vue项目，总是边百度边写，知识体系不能系统起来，准备在浏览下vue.js官网基础知识。当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。但是如果使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。具体使用办法举例：...原创 2018-12-25 15:03:23 · 1268 阅读 · 0 评论 -
判断当前页面是否在微信浏览器中打开
在实际的项目中，有时候需要判断当前页面是否在微信浏览器中打开，以下提示了三种方法，每一种都可以，方法一，var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.indexOf('micromessenger') != -1;if (isWeixin) { return true;}else{ re...转载 2018-12-25 16:08:56 · 795 阅读 · 0 评论 -
关于前端处理表情符号问题（解决方案）
今天测试反馈一个问题，说是有表情符号的评论上传报错，很显然后台对于表情符号没有做相关的处理，让他们处理，他们说怎样怎样麻烦，算了，还是前端自己处理吧！具体原因是：UTF-8编码有可能是两个、三个、四个字节。Emoji表情是4个字节，而Mysql的utf8编码最多3个字节，所以数据插不进去。方案：可以先把表情符号转化为字符串，用字符串上传到服务器，显示时把字符串转化为表情符。 前端阻止...原创 2019-01-22 16:18:17 · 3074 阅读 · 2 评论 -
如何使用ES6模块export,export default和import
ES6使用 export 和 import 来导出、导入模块，也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。使用export default命令，为模块指定默认输出。1. 变量的导入，导出//api.js 导出var age= 13var name = '小红'export {age,name}// 使用expo...原创 2019-01-16 09:24:54 · 2379 阅读 · 0 评论 -
vue.js 定义全局组件和局部组件的方法
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。我们经常会自定义很多组件以满足我们不同的需求。一.自定义全局组件方法1.全局组件用到的是 Vue.component(tagName,option)，tagName是自定义的组件名称,option是组件构造器。具体使用方法如下：在main.js中设置：Vue.comp...原创 2019-01-09 19:44:16 · 2365 阅读 · 1 评论 -
Do not use built-in or reserved HTML elements as component id: animate
报错截图：组件名不能和html标签重复，animate 和系统（vue）的内置属性名冲突了！ 由于在模板需要插入到 DOM 中，所以模板中的标签名必须能够被 DOM 正确地解析。主要有三种情况： 1).是完全不合法的标签名，例如 </>； 2).是与 HTML 元素重名会产生不确定的行为，例如使用 input 做组件名不会解析到自定义组件，使用 ...原创 2019-01-03 11:40:52 · 20062 阅读 · 0 评论 -
did you register the component correctly? For recursive components, make sure to provide the "name"
报错截图：在写一个折叠组件动画，引入该组件时，报了个这样的警告，组件死活引入不到，什么原因呢？import ball from '../components/ball'export default { component: { 'run-ball': ball }},//使用<run-ball :newslist="newslist"><...原创 2019-01-07 16:41:50 · 183396 阅读 · 34 评论 -
Vue 自定义弹出框组件（类似淘宝选择规格）
底部选择实现效果1.弹出效果添加动画2.直接调用组件，调用方法为：<select-rules ref="colorSelect" :price="price" :mainPic="mianUrl" @getCartNum="getCartNum" ></select-rules>demo下载地址：https://github.com/d原创 2019-01-02 19:50:03 · 4140 阅读 · 1 评论 -
在vue.js中如何导出Excel表格
有一个项目需求，要求在前端项目中导出Excel表格，经过查找代码,Vue.js确实可以实现，具体实现步骤为：1. 安装依赖//npm npm install -S file-saver xlsxnpm install -D script-loader或者//yarnyarn add file-saveryarn add xlsxyarn add script-loa...原创 2019-01-11 18:52:40 · 2284 阅读 · 1 评论 -
vue.js引入外部CSS样式和外部JS文件的方法
学习Vue.js动画时，需要引入一个animate.css，如何全局引入外部文件呢？一.引入外部CSS样式文件1. 在app.vue中<style>下直接引入对应的路径使用@import引入外部css，作用域是全局的，也可在相应的单vue组件引入，import并不是引入代码到<style></style>里面，而是发起新的请求获得样式资源，并且没...原创 2019-01-05 19:11:01 · 9400 阅读 · 0 评论 -
自定义vue.js全局组件库（仿MintUI）
在项目开发中，我们总会引入很多别人封装好的组件模板，使用时仅仅三步，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。例如MintUI，试想我们是否可以自己仿照MintUI写一个自己的组件同样让别人使用，设置成全局组件呢？下面就依照MintUI编写自己的组件库。1. 创建组件模板如上图，创建了两个组件模板Loading和MyButton，组件模板代...原创 2019-01-10 16:17:19 · 1019 阅读 · 1 评论 -
Vue条件渲染（v-if和v-show的区别）
在项目中我们总是用到根据某一值判断属性是否显示，或不同的值让其显示不同，顾名思义总是用v-if来实现，v-show也可用来判断是否显示，两者有什么区别呢？相同点：两者都可用作为条件判断元素是否显示。不同点：1). v-if后可跟v-else-if 和 v-else用来进行不同条件下的显示组件的不同可能性，v-show只能作为是否展示。 2). v-if在想切换多个...原创 2018-12-27 14:44:35 · 1381 阅读 · 0 评论 -
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 · 693 阅读 · 0 评论 -
vue中 localStorage的使用方法（详解）
vue中实现本地储存的方法：localStorage，在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。(1).储存数据localStorage.se...原创 2018-11-21 11:37:15 · 39157 阅读 · 1 评论 -
解决IOS 原生项目加载html上下可滑动
初入前端，在IOS上加载一个html项目，发现前端页面总是上下滑动，导航和下面的tabbar 在上拉和滑动时总是跟着滑动，如图：不明原因，以为是前端页面的问题，一直改，可是无论如何都不行，决定换个思路，在原生项目上做更改，因为是用UIWebView加载的，想着是否可以用它来控制滑动！一行代码完美解决！ self.resultwebV.scrollView.bounces = NO...原创 2018-11-21 09:57:30 · 1501 阅读 · 0 评论 -
三种方式解决vue中v-html元素中标签样式
当我们引入第三方组件或加载html元素时，想修改下样式，就可以用以下三种方式：一.去掉<style scoped>中的scoped这个方法不建议使用，会改变布局二.定义两个style标签，一个含有scoped属性，一个不含有scoped属性使用方法为<style scoped> .introduction{ width: 100%; ...原创 2018-11-20 19:54:18 · 10638 阅读 · 2 评论 -
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 · 5649 阅读 · 0 评论 -
vue实现星级评价及上传多张图片等功能（类似淘宝商品评价页面）
最近在写一个关于vue的商城项目，然后集成在移动端中，开发需求中有一界面，类似淘宝商城评价界面！实现效果图如下所示： 评价页 点击看大图，且可左右滑动功能需求分析默认为5颗星，为非常满意，4颗满意，根据不同星级显示不同满意程度。 2.评价内容，最多为200字。 3.上传图片最多上传6张，图片不可拉伸，可删除，可点击放大左右滑动展示具体实现关键代码 关于星...原创 2018-10-27 21:04:54 · 5631 阅读 · 4 评论 -
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 · 1887 阅读 · 0 评论 -
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 · 69024 阅读 · 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 · 1074 阅读 · 1 评论 -
如何新建一个vue项目（图文详解）
作为一个几年IOS开发经验的移动端程序猿来说，已经感到很大的危机感，不得不学习新的东西，选择了在众多框架中脱颖而出的vue作为学习的目标。定好目标，首先应该想到的就是安装环境，搭建框架，一步一步的完成最基础的新建一个Vue项目的目的。第一步npm安装步骤：1. 到node 官网 选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可。2. 输入node -v，如果出现版本...原创 2018-10-25 20:36:36 · 9100 阅读 · 0 评论 -
npm run dev 报错：missing script:dev
今天在运行Vue项目时，在运行npm run dev时报错如下图：打开package.js文件夹，发现文件夹里的scripts有dev如下图：，可就是好不到，什么原因呢？最后一看路径不对，vue init webpack my-project时，自己又建立一个文件夹,取不到对应的package.js中的dev.cd 到对应文件夹，重新运行npm run dev 就OK了...原创 2018-10-09 18:56:47 · 126325 阅读 · 16 评论 -
Vue 移动端跳到手机拨打电话界面的几种方法
我们做项目时，经常会用到拨打电话的功能，目前在做vue项目，它是如何实现的呢？根据别人的分享，具体实现方法如下几种实现效果图：方法一<a :href="'tel:' + 110">联系商家</a>方法二 <a @click="callPhone">联系商家</a>callPhone(){ window.lo...原创 2018-11-15 12:44:13 · 15795 阅读 · 5 评论 -
完美解决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 · 10952 阅读 · 3 评论 -
vue.js 动态绑定class的几种方式
Vue.js 的核心是一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步，每当数据有改动，相应的DOM视图也会更新。基于这种特性，通过vue.js动态绑定class就变得非常简单。思路：以某一页面样式需要单独适配iphonex为例方式一.对象的形式 （第一个参数 类名， 第二个参数：boolean值） ...原创 2018-12-20 20:01:29 · 3583 阅读 · 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 · 849 阅读 · 0 评论 -
vue webpack打包后图片路径错误的解决方法
项目用run dev build 打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。9E3E9C06-4873-4D1B-A5B3-35C71889249E.png因为我们的图片路径都是经历过文件夹的，在本地引用图片是绝对路径，但打包后因为把配置的static文件夹当成了根路径，所以很多图片找不到...原创 2018-12-06 20:08:04 · 3370 阅读 · 0 评论 -
Vue webpack打包后，css样式发生改变或不起作用
用run dev build打包后，发现样式改变了，最终发现addAdress.vue和myAdress.vue中的有个类名是相同的，但是想着<style scoped></style>在style标签上添加scoped属性，就表示它的样式作用于当下的模块，样式私有化的目的就不会相互污染啊！为什么打包后会出现这样的结果呢!不太理解！一.css样式发生改变...原创 2018-12-13 20:11:35 · 12436 阅读 · 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 · 1075 阅读 · 0 评论 -
vue 获取跳转上一页组件信息
项目中有一需求,需要根据不同的页面路径url跳转进行不同的操作，首先需要获得上一页面的url,利用 beforeRouteEnter 这个钩子中的from参数获得之前url的信息，然后给 next 传递回调来访问当前组件的实例。 操作代码为：beforeRouteEnter (to, from, next) { console.log(to) console....原创 2018-11-28 18:28:58 · 3053 阅读 · 0 评论