关于Vue源码学习的博客， HcySunYang的Vue2.1.7源码学习是我所见过讲的最清晰明了的博客了，非常适合想了解Vue源码的同学入手。本文是在看了这篇博客之后进一步的学习心得。注意：本文所用Vue版本为 2.5.13PS：本文有点草率，之后会重写改进。 关于源码学习关于学习源码，我有话要说~一开始我学习Vue的源码，是将 Vue.js 这个文件下载下来逐行去看……因为我听信了我同事说的“不过一万多行代码，实现也很简单，可以直接看。”结果可想而知，花了十几个小时看完代码，还通过打断点看流程，除了学习到一些新的js语法、一些优雅的代码写法、和对整个代码熟悉了之外，没啥其他收获。其实， ...

我想通过社区的力量把《Vue学习系列》做到最优质的Vue系列博客 解决学习痛点学习前端的同学都知道，前端有一大痛点就是知识点分散，学习的东西多。就像我学习Vue，一拿到手就告诉我有个全家桶要学习。虽然一个一个学习下来了，但是过程是比较漫长的。而且如果是刚入门前端世界，会发现还没开始写代码各种配置都能玩好几天。Webpack打包、ESLint代码检查、Babel语法转译等等……写本系列博客的本意是想将学习Vue的内容用博客的形式写出来，加深对知识点的理解。同时也希望能够帮助到和我有同样需求的朋友。不过，就在昨天晚上我突然多了一个想法。我想把《Vue学习系列》做到最优质的Vue系列博客。通过我 ...

我又回来啦~这次我们来学习Vue的服务器渲染SSR。 关于SSR的文章网上很多，一开始看得我云里雾里。然后去Vue.js 服务器渲染指南和nuxt官网看了看，发现文章大多都是搬运官网的内容，真正讲的清晰明了的很少。所以想写篇文章学习下SSR，希望能够帮助大家快速理解Vue SSR。 什么是SSR？SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传给浏览器。优点： SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。 更快内容到达时间 传统的SPA应用是将bu ...

认真学习了一遍ES6，发现很多很好用的功能。学习资料：《ECMAScript 6 入门》 好啦，继续下半部分的学习。 ProxyProxy 用于修改对象的某些操作行为。套用书上的栗子，实现了对象的set、get方法拦截。var obj = new Proxy({}, { get: function (target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); ...

认真学习了一遍ES6，发现很多很好用的功能。学习资料：《ECMAScript 6 入门》 之前写JS，虽然也遇到一些ES6语法，基本就是理解就行，没有深入学习过。这次认真看了一遍ES6，发现里面有许多实用的东西。下面是对本书学习的一些笔记 let 和 const 命令解决var变量提升、变量全局的问题。 let 和 const 都只作用域本块级作用域内。let a = 123{ let a = 456 console.log(a)}console.log(a)// 456// 123 let 和 const 定义的变量不能同名。let 和 const 定义的 ...

由于weex 的不稳定性，所以中途放弃了 weex 方案。转而使用 Android原生开发。今天项目第一阶段开发结束，来总结一下 weex 的一些东西。 weex 相比于原生开发的好处 界面搭建速度快，特别是重复性界面。 数据处理方便，尤其是json解析方面。 坏处么 用的人太少，所以网上资料也很少。 坑还是比较多的，要玩的溜要踩上不少坑。 还是需要一些原生开发的知识才能够玩的溜。 说说我这个项目的一些东西吧~ 页面跳转第一个困扰我的就是页面跳转，我去SF上提问了Weex的页面跳转方案的选择这个问题。 vue-router 方案由于 Vue和 weex 的差异性，用法有所不同，好 ...

最近偷懒好久没有写博客了，一直想继续Vue学习系列，想深入Vue源码来写。结果发现自己层次不够，对js的理解差好多。所以一直想写一直搁置着。最近重新振作决心看完Vue源码，并且以我们这类前端小白的角度来一步步弄懂Vue源码。 PS：以下文章为笔记类，记录了本人在看源码过程中的一些问题和感悟。 Vue源码的本质是什么Vue.js 本质上就是一个包含各种逻辑的一个function。而我们通常初始化Vue的过程就是实例化的过程。var vm = new Vue({}) 话不多说，老规矩用代码说话！让我们来对Vue进行打印：var vm = new Vue({ .. ...

在使用vue-cli创建项目的时候，会提示要不要安装单元测试和e2e测试。既然官方推荐我们使用这两个测试框架，那么我们就动手去学习实践一下他们吧。 简介KarmaKarma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。换句话说，它是一个测试工具，能让你的代码在浏览器环境下测试。需要它的原因在于，你的代码可能是设计在浏览器端执行的，在node环境下测试可能有些bug暴露不出来；另外，浏览器有兼容问题，karma提供了手段让你的代码自动在多个浏览器（chrome，firefox ...

最近在用vue-cli写项目的时候，经常和ESLint打交道，也算是不打不相识啦。下面总结一下在学习Vue的时候遇到的一些问题。 ESLint简介关于ESLint的介绍网上很多，这里就简单说些有用的。ESLint的作用是检查代码错误和统一代码风格的。由于每个人写代码的习惯都会有所不同，所以统一代码风格在团队协作中尤为重要。 vue-cli的eslint相关vue-cli在init初始化时会询问是否需要添加ESLint，确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。.eslintignore类似Git的.gitignore用来忽略一些文件不使用E ...

这两周一直想写webpack的知识点，却发现webpack其实要将webpack说的具体内容还是挺多的。而且稀土掘金上一搜webpack有好多人都有去写webpack的知识点，所以本文中不再去重复别人的东西了，就简单记录一下我对webpack的理解。并按照老规矩附上demo以及我收藏的几篇不错的webpack入门文章以供学习参考~ 一、什么是webpack1. webpack是什么？webpack是一个模块打包工具。用vue项目来举例：浏览器它是只认识js，不认识vue的。而我们写的代码后缀大多是.vue的，在每个.vue文件中都可能html、js、css甚至是图片资源；并且由于组件化，这 ...