Vue.js
文章平均质量分 57
Jarvan大熊
记录我web(H5)的艰路历程
展开
-
Cannot set property 'render' of undefined at normalizeComponent...
在做vue项目的时候报了这么个错误,找了半天不知道是什么错,后来发现是在vue文件写了script标签对,却没写export default {} 这句语句...ok,问题解决了。...转载 2019-03-04 19:28:10 · 626 阅读 · 0 评论 -
详解VUE 数组更新
1、数据方法分类:(1)原数组改变push pop unshift shift reverse sort splice(2)原数组未变,生成新数组slice concat filter对于使原数组变化的方法,可以直接更新视图。对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化。示例代码:?12345678910111213141516171819202122232425262...原创 2018-04-18 10:46:18 · 2643 阅读 · 0 评论 -
详解Vue中localstorage和sessionstorage的使用
1. 项目使用中暴露出来的几个问题大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现,这样耦合度太高了,假如有一天我们需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多项目很大,那么大家起的key的名字难免会重复,而且这样也会造成全局污染因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用2. 解决办法封装stor...原创 2018-03-29 11:29:37 · 19057 阅读 · 0 评论 -
Vue 实现mvvm框架
最近手痒,当然也是为了近阶段的跳槽做准备,利用周五时光,仿照vue用法,实现一下mvvm的双向绑定、数据代理、大胡子{{}}模板、指令v-on,v-bind等。当然由于时间紧迫,里面的编码细节没有做优化,还请各位看官多多包涵!看招:实现原理数据的劫持观察(observe)观察者模式(watcher)使用es6的类class实现(当然,没有考虑到兼容性,只是为了实现而已)代码:数据劫持_observ...转载 2018-04-17 14:31:49 · 403 阅读 · 0 评论 -
vue开发中,父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。
在vue的开发中,我们需要引用子组件,包括ui组件(element、iview)。但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的。去掉scoped之后,样式可以覆盖。但这样会污染全局样式,为了解决这个问题,vue-loader新增书写方式。#demo父组件:<style lang="css" scoped> header /deep/ .header{...原创 2018-04-04 14:48:21 · 5198 阅读 · 0 评论 -
vue项目中使用md5.js及base64.js
一、在项目根目录下安装npm install --save js-base64npm install --save js-md5二、在项目文件中引入import md5 from 'js-md5';let Base64 = require('js-base64').Base64;三、在项目文件中使用base64Base64.encode('dankogai'); // ZGFua29nYWk=B...原创 2018-03-28 22:01:03 · 1754 阅读 · 0 评论 -
vue2.0怎样将时间戳转化为日期格式
<!-- value 格式为13位unix时间戳 --><!-- 10位unix时间戳可通过value*1000转换为13位格式 -->export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullY...原创 2018-04-10 10:38:02 · 894 阅读 · 0 评论 -
vue2.0 子组件和父组件之间的传值(转载)
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦)环境搭建步骤:打开git ,运行 npm install --global vue-cli 这是安装vue的命令行vue init webpack vue-demo 这是vue基于webp...转载 2018-04-02 15:10:29 · 593 阅读 · 0 评论 -
Vue 2.0 监听文本框内容变化及 ref的使用说明
[html] view plain copy<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <lin原创 2018-04-09 11:50:57 · 2621 阅读 · 0 评论 -
css控制文字自动换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义css#wrap{white-...原创 2018-03-30 20:16:39 · 11848 阅读 · 0 评论 -
vue实现点击Button效果
<ul class="top_bar"> <li class="top_cell" v-for="cell in 5" :class="{ 'active': cell === selected }" @click="choose(cell)"> {{cell}} &原创 2018-03-30 14:28:17 · 8732 阅读 · 0 评论 -
vue2绑定内联样式background的一些坑
此时我有一个需求,给一个盒子添加一个背景图片,这个背景图片是动态请求回来的,那么应该怎么做?看似简单,其实很考研对JavaScript基础的功底以及对vue生命周期的理解。正常情况下的vue内联样式如下写法:<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: { act...原创 2018-04-13 20:12:01 · 5658 阅读 · 0 评论 -
Vue2.0 之 自带浏览器里无法打开(兼容处理) - 解决方案
Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多首先,别急,请看下面的推荐方案:1、找个android真机测试下(机型版本为4.4以上),真机联调测试(如果不知道怎么联调,那么请看这里:Android真机 - 联调chrome调试)2、如果报 报错 vuex requires a Promise polyfill in this browser.那么,就是兼容性不够好,请看下面...原创 2018-05-10 11:49:10 · 6618 阅读 · 0 评论 -
vue中动态获取文本换行 <br>
动态获取文本文本换行:[html] view plain copyfunction Trim(str) { //str表示要转换的字符串 return str.replace(/\n|\r\n/g,"<br/>");} 这样,就大功告成了。可是如果你是在vue中使用{{ text }}动态获取的文本这样处理。你会发现<br>会和文本一块显示出来。改成[html] vi...原创 2018-05-10 11:55:27 · 6753 阅读 · 2 评论 -
vue h5移动端禁止缩放
安卓在index.html里面写<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">ios在APP.vue里面写<script>window.onload = function() { doc...原创 2019-03-04 19:27:45 · 6593 阅读 · 1 评论 -
vue-cli webpack打包开启Gzip时报错
前言今天看了一下Vue-cli中webpack打包的速度,有点小慢,于是我就开始使用其自带的productionGzip功能。说明:本人用的node版本:v6.11.3,npm版本:v3.10.10,webpack版本:3.6.0,Vue版本:2.5.2,以免后期版本升级更新造成误导。下面进入正文。1. 首先打开config/index.js,找到build对象中的produc...原创 2018-11-15 16:46:35 · 4048 阅读 · 2 评论 -
vue中axios处理http发送请求的示例(Post和get)
本篇文章主要介绍了vue中axios处理http请求的示例(Post和get),这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下:axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-w...原创 2018-08-28 21:18:33 · 10959 阅读 · 0 评论 -
vue的双向绑定原理及实现
前言使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图来吸引各位:代码: 效果图: 是不是看起来跟vue的...转载 2018-07-17 14:57:50 · 279 阅读 · 0 评论 -
如何去除vue项目中的 # --- History模式
使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现#的出现真的很丑陋,并且也不知道这是什么作用? 所以就去Stack Overflow上搜索了,果然还有~ 看来Stack Overflow是真的强大,你在项目中遇到的问题实际上在so上都已经被问过并且解决了,这不: 这是最高票的回答,即在vue2中将mode模式设置为history,试过之后确...原创 2018-06-11 14:33:29 · 1620 阅读 · 0 评论 -
vue 图片上传功能
这次做了vue页面的图片上传功能,不带裁剪功能的!首先是html代码,在input框上添加change事件,如下:[html] view plain copy<ul class="clearfix"> <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'> ...原创 2018-06-04 11:08:18 · 1680 阅读 · 0 评论 -
通过js sdk 来进行第三方登录及授权(微博,微信,qq)
微博第三方登录及授权注册申请appkey1.打开微博开发者平台http://open.weibo.com/development2.点击创建微链接3.选择类型(选择网站接入)4.填写各项信息,并把对应的meta复制并放在html的head内(一定要绑定域名并设置回调地址)<meta property="wb:webmaster" content="xxxxxxx" />5.在html内...原创 2018-05-15 19:39:28 · 6655 阅读 · 0 评论 -
vuejs 2.0 fliter 搜索过滤
这是官方的例子https://cn.vuejs.org/v2/examp...这是根据你的数据在官方基础上修改的https://jsfiddle.net/ycloud/b...点击预览scriptvar vm = new Vue({ el: '#app', data: { search: '', products: [{ name: '苹果', pr...原创 2018-04-27 15:44:12 · 2998 阅读 · 3 评论 -
vue监听对input输入的字体字数限制
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</ti原创 2018-05-10 17:41:54 · 6328 阅读 · 0 评论 -
vue+elementUI 关于日期选择器的disabledDate问题
关于结束时间不能大于开始时间的问题,在elementui里我们用官方提供的 disabledDate 选项来解决。 HTML:给选择器加上:picker-options属性//开始时间<el-date-picker v-model="startDate"></el-date-picker>//截止时间<el-date-picker v-model="endDat...原创 2018-03-14 16:04:34 · 27459 阅读 · 5 评论 -
sass中转化为px转化为rem的使用
利用sass加实时监听编译CSS。 可自动将px转换为rem SASS函数:(使用时直接调用函数)例如:@function torem($px){//$px为需要转换的字号 @return $px / 100px * 1rem; //100px为根字体大小}.first{ font-size:torem(100px); height:torem(10px); wi...原创 2018-03-19 17:16:19 · 4148 阅读 · 0 评论 -
vuejs使用FormData对象,ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件。其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生。接下来就以一个简单的头像上传来说明如何使用。效果图原创 2018-01-24 16:00:18 · 3294 阅读 · 0 评论 -
PHPstorm如何安装vue.js插件
1.什么是PHPstorm? PhpStorm是一个轻量级且便捷的PHP IDE,其旨在提高用户效率,可深刻理解用户的编码,提供智能代码补全,快速导航以及即时错误检查。----来自百度百科 一句话:PHP代码的一个集成开发环境,提高程序开发环境的应用程序(Integrated Development Environment)2.进入主题: (1)原创 2018-01-07 10:52:07 · 2150 阅读 · 2 评论 -
node-sass 安装失败 win32-x64-57_binding.node
安装npm install环境的时候我遇到一个问题就是 缺少node-sass文件用这行命令:node -p "[process.platform, process.arch, process.versions.modules].join('-')"复制输出的结果,去 Release 列表 找到对应的版本,Ctrl+F 粘贴,找到那个文件,下载(必要的时候挂代理,浏览原创 2018-01-06 00:37:36 · 12008 阅读 · 0 评论 -
vuejs中,如何使一个自定义函数在vue渲染完之后再自动执行
我期望在vue中定义一个函数,但是必须在vue中的data,和整个vue页面渲染完之后再去执行该函数,如果vue没有渲染完毕,就会报错,说我没有定义,找不到undefined; Vue.nextTick(function () { alert('new message'); })该方法可以解决:如我要向页面输出当前的时间戳对应的日期原创 2018-01-05 11:32:31 · 5568 阅读 · 0 评论 -
使用 vue-i18n 切换中英文
vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n兼容性:支持 Vue.js 2.x 以上版本 安装方法:(此处只演示 npm)npm install vue-i18n 使用方法:1、在 main.js 中引入 vue-i18n (前提是要先引入 vue)import Vue原创 2018-01-12 16:33:31 · 11871 阅读 · 1 评论 -
vue监听滚动事件实现滚动监听
1234567891011121314151617181920212223242526272829303132333435原创 2017-10-23 17:13:54 · 8028 阅读 · 0 评论 -
vue-router
官方文档:旧版:https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn新版:http://router.vuejs.org/(2.0版本)此文是旧版文件结构图:基本用法:是一个顶级的路由外链,用于渲染匹配的组件。例如:我的应用入口是app.vue那么在app.vue中添加原创 2017-09-28 11:22:18 · 406 阅读 · 1 评论 -
vue-Resource(与后端数据交互)
单来说,vue-resource就像jQuery里的$.ajax,用来和后端交互数据的。可以放在created或者ready里面运行来获取或者更新数据...vue-resource文档:https://github.com/vuejs/vue-resource/blob/master/docs/http.md结合vue-routerdata(){ ret原创 2017-09-28 11:02:44 · 1539 阅读 · 0 评论 -
Vue2.0 推荐开发环境
Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2安装环境打开终端运行以下命令安装brew(Windows 跳过这步)/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.原创 2017-06-28 10:42:51 · 4462 阅读 · 0 评论 -
vue2.0 axios前后端数据处理
目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据。前言: 使用 cnpm 安装 axioscnpm install axios -S安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入为转载 2017-06-29 17:36:07 · 1208 阅读 · 0 评论 -
vue中手机号,邮箱正则验证以及60s发送验证码
今天写了一个简单的验证,本来前面用的组件,但是感觉写的组件在此项目不是很好用,由于用到的地方比较少,所以直接写在了页面中。页面展示如图 class="fl"> "phone" type="number" placeholder="手机号" v-model="phone"/> type="button" :disabled="disabled" @cl原创 2018-01-31 21:21:26 · 7665 阅读 · 2 评论 -
Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果如果是传统项目,这个效果就非常简单。但是放到 Vue 中,就有两大难题:1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动?2. 如何监听页面滚动事件?在浏览了大量文章、进行多次尝试之后,终于解决了这些问题期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命转载 2018-01-17 17:14:16 · 630 阅读 · 0 评论 -
vue组件之间的多种通信方法
vue是一种mvvm框架,它相对于jquery可能比较大的差异点之一就在于组件之间的通信了。这里提供三种不同情况下vue组件的通信方式。一. vue父子组件通信vue父子组件通信可以用Vue.$emit自定义事件来解决。// 父组件"editAddress">single-address>// 子组件methods: { editAddress () { this.$emit('原创 2018-01-18 18:33:31 · 3291 阅读 · 0 评论 -
在vue中使用sass的配置的方法
1、创建一个基于 webpack 模板的新项目$ vue init webpack myvue12、在当前目录下,安装依赖$ cd myvue$ npm install123、安装sass的依赖包npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass1234、在bu...原创 2018-03-19 17:15:49 · 5377 阅读 · 0 评论 -
05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。5.1. Vue实例初始化的选项配置对象详解前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data、methods、el、comp...转载 2018-03-19 16:08:48 · 145 阅读 · 0 评论