Vue学习目录
关注
分享
扫一扫
aaa333qwe
如果心没有方向，到哪里都是流浪。
展开
-
当*.vue文件非常长的时候怎么办？
一般写vue-cli创建项目的时候，组件是*.vue，这个组件里面的js部分都写在如下格式内：export default { data() {}, methods: {}}有时候页面的需求很大的时候，就要在*.vue的文件中既要写很多的html代码，还在在export default{}中写很多的代码，页面就很长。方案一：sample.js文件export原创 2017-09-09 10:04:28 · 3193 阅读 · 0 评论 -
详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）
本篇文章主要介绍了详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli），具有一定的参考价值，有需要的可以了解下在 vue 中，实现 Tab 切换主要有三种方式：使用动态组件，使用 vue-router 路由，使用第三方插件。因为这次完成的功能只是简单切换组件，再则觉得使用路由切换需要改变地址略微麻烦，所以使用的是动态组件实现，如果是在大型应用上，可能使用 vue-route...转载 2018-04-20 19:11:00 · 4280 阅读 · 0 评论 -
tab切换功能——vue
项目开发中，使用vue实现tab页签切换功能。具体实例如下：（1）首先定义子组件，如下图：以select01.vue为例，子组件的源代码如下：[plain] view plain copy<template> <div slot='select01'>{{msg}}</div> </template> <script> e...转载 2018-04-20 19:11:36 · 1674 阅读 · 0 评论 -
Vue 汇总下群里高频询问的xxx及给出不靠谱的解决方案
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue;给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章:"喜欢站在道德制高点的圣母婊" -- 适合去教堂"无理取闹的键盘侠" -- 国际新闻版块欢迎你去"有一定基础但又喜欢逼逼的人"得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的这种傻瓜文,简直浪费老子的时间!对于以上三类人,走吧,这里不是你来装逼...转载 2018-04-25 11:57:15 · 3206 阅读 · 0 评论 -
给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示
前言不推荐完全copy过去,可以看看我是如何针对我这边业务;做的一个axios的封装及实现的思路需求及实现统一捕获接口报错弹窗提示报错重定向基础鉴权表单序列化实现的功能统一捕获接口报错 : 用的axios内置的拦截器弹窗提示: 引入 Element UI的Message组件报错重定向: 路由钩子基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子表单序列化: 我这边直接用qs(npm模块)...转载 2018-04-25 12:02:04 · 2516 阅读 · 0 评论 -
Vue--moment时间格式插件安装和使用
使用链接：http://momentjs.cn/1.安装monent 2.导入3.过滤器 4.template模板使用：转载 2018-04-25 15:24:52 · 1671 阅读 · 0 评论 -
Vue 生命周期深入
作者：同梦奇缘segmentfault.com/a/1190000014705819这篇博客将会从下面四个常见的应用诠释组件的生命周期，以及各个生命周期应该干什么事单组件的生命周期父子组件的生命周期兄弟组件的生命周期宏mixin的生命周期生命周期：Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期，各个阶段有相对应的事件钩子...转载 2018-05-10 16:41:45 · 236 阅读 · 0 评论 -
前端开发常用代码片段
作者：WEBINGsegmentfault.com/a/1190000014700549一、预加载图像如果你的网页中需要使用大量初始不可见的（例如，悬停的）图像，那么可以预加载这些图像。二、检查图像是否加载有时为了继续脚本，你可能需要检查图像是否全部加载完毕。你也可以使用 ID 或 CLASS 替换<img> 标签来检查某个特定的图像是否被加载。三、自动修复破坏的图像逐个替换已经破坏的...转载 2018-05-10 16:43:08 · 163 阅读 · 0 评论 -
Vue 使用中的小技巧
Vue 使用中的小技巧在vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧，在下将不定期更新~1. 多图表resize事件去中心化1.1 一般情况有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写：mounted() { ...转载 2018-04-26 14:37:10 · 630 阅读 · 0 评论 -
当面试官问你Vue响应式原理，你可以这么回答他
看过vue官方文档的同学，对这张图应该已然相当熟悉了。vue的响应式是如何实现的？听过太多回答，通过Object.defineProperty，可是再详细的问时，对方浑然不知。先撸为敬const Observer = function(data) { for (let key in data) { defineReactive(data, key); }}const defi...转载 2018-04-26 14:46:26 · 14227 阅读 · 0 评论 -
vue-router的两种模式的区别
众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。hash模式hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash =...转载 2018-05-17 12:14:05 · 459 阅读 · 0 评论 -
Vue实现动态显示textarea剩余字数
原文地址：http://www.jb51.net/article/114382.htmVue实现动态显示textarea剩余文字数量，具体内容如下这里我们假设允许用户输入的最多数量为200个 html代码如下：?12<textareamaxlength="200"@input="descInput"v-model="desc"/><span>{{remnant}}/200&...转载 2018-05-11 20:26:26 · 2743 阅读 · 1 评论 -
Vue-router 官方文档笔记
vue-router个人理解：Vue中的路由相当于pc里面的锚点超链接，如果点击了页面转向哪，也有点像ajax。安装npm install vue-router开始用Vue.js + vue-router创建单页应用，是非常简单的。使用Vue.js时，我们就已经把组件组合成一个应用了，当你要把vue-router加进来，只需要配置组件和路由映射，然后告诉vue-router在哪里渲染他们。 组件 ...转载 2018-05-11 21:57:03 · 627 阅读 · 0 评论 -
Vue2.0 $set()的正确使用方式
vue2.0 给data对象新增属性，并触发视图更新如下代码，给 student对象新增 age 属性data () { return { student: { name: '', sex: '' } }}12345678众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新m...转载 2018-05-18 11:31:28 · 10893 阅读 · 0 评论 -
Vue中的$set的使用
在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如下代码：<!DOCTYPE html><html><head><meta charset="utf-8">&...转载 2018-05-30 09:43:51 · 455 阅读 · 0 评论 -
快速了解vue-cli 3.0 新特性
vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具，具有开箱即用并且提供简洁的自定义配置等功能。 vue-cli 从 2.0 到 3.0 的升级有太多的新东西可以说了，但是不可能在本文中列举所有的内容，这篇文章作为一个对比 2.0 升级功能的导读，让你快速了解 3.0 更新的内容。一.创建项目：创建项目命令的变化。? 1 vu...转载 2018-07-23 16:44:07 · 8857 阅读 · 1 评论 -
vue-cli3.0搭建项目
最近的开发项目中使用了vue-cli 3.0，使用体验可以说非常棒了，模板更加制定化，配置更加简洁。以下总结下应用过程中的一些经验。新建项目? 1 2 3 4 5 6 7 8 # 安装 npm install -g @vue/cli # 新建项目 vue create my-pr...转载 2018-07-23 16:48:58 · 10244 阅读 · 1 评论 -
另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新
目的：vue-cli构建的vue单页面应用，某些特定的页面，实现前进刷新，后退不刷新，类似app般的用户体验。注： 此处的刷新特指当进入此页面时，触发ajax请求，向服务器获取数据。不刷新特指当进入此页面时，不触发ajax请求，而是使用之前缓存的数据，以便减少服务器请求，用户体验更流畅。项目需求：任何技术的探索，都来自项目的需求。之前经手的一个项目是微信端商城，使用的是传统的mvc模式，利用的是j...转载 2018-04-24 19:26:09 · 607 阅读 · 1 评论 -
Vue的移动端多图上传插件vue-easy-uploader
前言这段时间赶项目，需要用到多文件上传，用Vue进行前端项目开发。在网上找了不少插件，都不是十分满意，有的使用起来繁琐，有的不能适应本项目。就打算自己折腾一下，写一个Vue的上传插件，一劳永逸，以后可以直接使用。目前vue-easy-uploader已上传到GitHub和NPM，使用起来方便简单，不需要繁琐的配置即可投入生产，不过需要后端配合，实现上传接口。本项目GitHub地址: https:/...转载 2018-04-18 11:24:20 · 1349 阅读 · 0 评论 -
This dependency was not found: * !!vue-style-loader!css-loader? 解决方案
但是当你新建一个vue项目时，需要重新安装stylus，否则报错：This dependency was not found:* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue转载 2017-09-02 17:42:51 · 15808 阅读 · 8 评论 -
vue-cli 引入 stylus 失败
最近在使用vue-cli创建项目时发现无法在js文件中引入stylus文件,以前自己写的代码就没有问题,死活找不到原因,所以来问问各个大神.操作步骤很简单:先通过vue-cli的webpack模板建立文件夹:vue init webpack test-stylus然后安装依赖npm install再然后 安装stylus stylus-loader style-lo转载 2017-08-27 11:12:54 · 827 阅读 · 0 评论 -
用Vue-cli生成vue+webpack的项目模板怎么设置为vue1.0版本？
用Vue-cli生成vue+webpack的项目模板$ npm install -g vue-cli$ vue init webpack my-project$ cd my-project$ npm install$ npm run dev这样默认的是Vue2.0,如果要使用Vue 1.X的话，执行下面的操作：$ npm install -g vue-cli$ vue i转载 2017-08-27 10:54:09 · 1059 阅读 · 0 评论 -
vue2.0(新手)第一个坑--do not mount Vue to <body>!!!
转载自：http://blog.youkuaiyun.com/wmwmdtt/article/details/53589662[javascript] view plain copyimport Vue from 'vue'; import App from './App'; /* eslint-disable no-new转载 2017-08-27 09:22:12 · 483 阅读 · 0 评论 -
Sublime Text3配置Vue 语法
下载的文件链接: https://pan.baidu.com/s/1hsqvHEO 密码: sgfcsublime菜单栏 -> 首选项 -> 浏览插件,打开Packages文件夹把步骤1的文件解压到packages目录sublime 中 Ctrl + Shift + P 输入 vue 回车重启sublime 打开.vue文件 看到高亮语法了原创 2017-08-24 22:35:30 · 1283 阅读 · 0 评论 -
从零开始的vue.js实战项目
一、实战项目的开发涉及方面1、需求分析2、脚手架工具3、数据mock4、架构设计5、代码编写6、自测7、编译打包二、功能技术分析1、vue-resource 与后端做数据交互2、vue-router 做前端路由，实现单页面应用3、better-scroll 做列表的滚动4、最大程度组件化三 、学习目标1、掌握vue.js在实战项目中的运用原创 2017-08-24 21:31:47 · 6850 阅读 · 0 评论 -
vue相关的开源项目
awesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合。我们会定期同步OpenDigg上的项目到这里，也欢迎各位提交项目给我们。如果收录的项目有错误，可以通过issue反馈给我们。这里的项目Star数不是实时更新的，一般是一周更新一次。内容UI组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element转载 2017-08-10 10:47:50 · 8309 阅读 · 1 评论 -
VueJs2.0建议学习路线
最近VueJs确实火了一把，自从Vue2.0发布后，Vue就成了前端领域的热门话题，github也突破了三万的star，那么对于新手来说，如何高效快速的学习Vue2.0呢。既然大家会看这篇文章，那么肯定是vue的学习者了，或是遇到的瓶颈，或者刚刚开始学，不知道如何快速起步，本篇文章将带领大家在最短的时间内构件一个学习Vue的学习路线Vuejs的作者尤雨溪尤大也写过一篇关于新手学习v转载 2017-09-18 11:43:24 · 428 阅读 · 0 评论 -
vue-cli的webpack模板项目配置文件分析
2017-09-11更新：更新到webpack 2.6.1所对应的配置，完善部分代码注释。由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西，开发过程中需要改动到build和config里面一些相关的配置，所以刚好趁此机会将所有配置文件看一遍，理一理思路，也便于以后修改配置的时候不会“太折腾”。一、文件结构本文主要分析开发（dev）和构建（buil转载 2017-09-18 17:42:18 · 1630 阅读 · 0 评论 -
Vue.js——vue-router 60分钟快速入门
概述vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。本文将以示例的形式来介绍vue-router的各个特性，一共包含6个示例转载 2017-09-22 10:37:58 · 503 阅读 · 0 评论 -
『收藏』VUE优秀UI组件库合集
转载自：https://shimo.im/doc/LkpdnWxM1j40BDJj/随着SPA、前后端分离的技术架构在业界越来越流行，前端的业务复杂度也越来越高，导致前端开发者需要管理的内容，承担的职责越来越多，这一切，使得业界对前端开发方案的思考多了很多，以react、vue等框架为代表推动的组件化开发模式越来越被开发者认可，这种模式极大的降低了我们开发与维护的成转载 2017-11-01 17:26:46 · 3621 阅读 · 0 评论 -
vue按需加载组件-webpack require.ensure
使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码router/index.js 路由相关信息,该路由文件引入了多个 .vue组件import Hello from '@/components/Hello'转载 2017-10-17 15:15:40 · 536 阅读 · 0 评论 -
vue2组件实现懒加载浅析
一、 什么是懒加载 懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。二、为什么需要懒加载 在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时三、如转载 2017-10-17 15:38:19 · 2271 阅读 · 0 评论 -
iview的icon组件怎么添加点击事件
原生事件要加修饰符。这样写没反应？？？ 答案在上面。原创 2017-12-13 11:49:26 · 9438 阅读 · 2 评论 -
Vuex 框架原理与源码分析
Vuex是一个专为Vue服务，用于管理页面数据状态、提供统一数据操作的生态系统。它集中于MVC模式中的Model层，规定所有的数据操作必须通过 action – mutation – state change 的流程来进行，再结合Vue的数据视图双向绑定特性来实现页面的展示更新。统一的页面状态管理以及操作处理，可以让复杂的组件交互变得简单清晰，同时可在调试模式下进行时光机般的倒退前进操作，查看数据...转载 2018-03-07 14:03:48 · 2256 阅读 · 0 评论 -
Vue2源码分析-逻辑梳理
很久之前就看完vue1，但是太懒就一直没写博客，这次看Vue2打算抽下懒筋先把自己看过了记录下来，否则等全部看完，估计又没下文了看源码总需要抱着一个目的，否则就很难坚持下去，我并没做过vue的项目，我几乎很少会依赖大型的框架，一个是跟平台有关系，另一方面因为我觉得是对自己能力的束缚，而我更渴望的就是通过阅读别人的源码，吸收别人的思路，取之精华去之糟粕，从而改造自己的项目。当然，这是在项目条件允许的...转载 2018-03-07 14:04:51 · 272 阅读 · 0 评论 -
vue组件mixins和extends的使用
一、mixin全局混入全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。全局mixin就是给全部Vue文件添加一些公用的实例（方法，过滤器and so on）1、在src目录下新建一个mixins目录，在mixins目录下新建一个index.js文件。写一个供全部vue实例使用的跳转方法。export d...原创 2019-05-31 12:01:01 · 1624 阅读 · 0 评论