vue学习
文章平均质量分 69
小雷雷哥哥
前端小白一枚,很开心认识更多的工程师朋友,很高兴和大家一起讨论前端知识。
展开
-
vue单页路由跳转后scrollTop问题
作为vue的初级使用者,在开发过程中遇到的坑太多了。在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部。最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了。最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码router.af原创 2017-12-20 13:54:29 · 6181 阅读 · 4 评论 -
vue自定义数字输入框组件
最近自己在练习组件开发,做了一个简单的数字输入框加减的组件,效果图如下:组件可以传入三个参数,value是初始化值,max是可输入的最大值,min是可输入最小值,当然参数可以按需求继续扩展的。组件代码如下:<template> <div style="text-align: center;margin-top: 20px;"> <input t...原创 2018-07-06 14:25:38 · 3978 阅读 · 0 评论 -
vue中的$nextTick 解决DOM没有更新完成问题
vue中的$nextTick很多人比较陌生,主要是这个很少用,我几乎是不用,但是看下面这个场景<div id="app"> <div id="div" v-if="showDiv">这是一段文本</div> <button @click="getText">获取div内容<原创 2018-07-16 11:01:22 · 7919 阅读 · 0 评论 -
vue计算属性的使用
我们有时候会在模板中绑定表达式来做简单的数据处理,但是如果表达式太长,就会变得臃肿难以维护,比如<div> {{text.split(',').reverse().join(',')}}</div>表达式里面包含了3个操作,有时候可能会更加复杂,这时我们可以使用计算属性。如下<template> <div> {{re...原创 2018-06-15 12:10:23 · 10103 阅读 · 0 评论 -
vue单页开发父子组件传值
vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结。GitHub地址:https://github.com/leileibrother/wechat-vue文件目录如下图,example.vue是父组件,exampleChild.vue是子组件。父组件引入子组件,父组件html的代码如下:<template> <di...原创 2018-05-17 11:11:03 · 2442 阅读 · 0 评论 -
vue单页的三级联动地区选择组件
在开发vue单页项目时,需要使用地区选择组件,在网上下载了一个三级联动组件(原文我忘了地址,很久之前找的),修改之后分享给大家,我的GitHub上有项目:https://github.com/leileibrother/wechat-vue地区选择的样式如下:在personal文件夹中的area文件是原代码文件,可以在这个文件里修改页面的样式在需要地区选转载 2018-04-17 17:31:48 · 3201 阅读 · 0 评论 -
vue单页 使用keep-alive页面返回不刷新
使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用解决这个问题,下面是我的使用心得。是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方把这段代码改成如下:原创 2018-02-26 15:23:47 · 28814 阅读 · 24 评论 -
vue 图片上传功能
这次做了vue页面的图片上传功能,不带裁剪功能的!首先是html代码,在input框上添加change事件,如下: 0" v-for='(item ,index ) in imgs'> =6 ? false : true">原创 2018-01-10 10:38:27 · 42877 阅读 · 15 评论 -
vue绑定图片路径数据问题
初次使用vue,遇到了许多小细节问题,比如data里面的静态图片路径渲染到页面上的问题,天真的我以为直接写图片的相对路径就可以了,然而失败了,我还是太嫩了,如图,里面的图片路径无法渲染在页面上,百度了一下,基本用两种方法解决。1、加require,如 headerImg: require('../../../assets/img/man.png'),这样就可以显示出来了。原创 2017-11-27 14:25:02 · 6373 阅读 · 3 评论 -
Vue单页开发项目搭建
公司新项目开发要使用vue框架,自学了一下vue单页开发,分享一下vue单页项目搭建的学习效果,主要使用vue脚手架 vue-cli 和 vue全家桶(vue、vue-router、vuex、vue-resource/axios),很多地方不了解,大家多多指点 一、项目搭建,使用vue-cli会生成一套提前定义好的构建文件,和相应的文件。1,npm install -g v原创 2017-11-27 14:20:32 · 1625 阅读 · 0 评论 -
vue table切换组件
如果vue单页开发没有使用ui组件,table切换的功能还是比较烦人的。闲暇时间看书写了一个table切换的组件,和大家分享一下,效果图如下:主要有两个组件页面,第一个是 tabs.vue,这个页面上会循环出table标签和每个标签对应的内容,大部分的事件处理也在这个页面上。代码如下:<template> <div class="tabs"> &l...原创 2018-07-13 14:52:09 · 5305 阅读 · 0 评论