废话不多说了, 我们开始吧!
首先介绍下, 我是如何学习 vue 的, 我学习 vue 之前, 做过哪些思考?
1.vue 技术刚出来的时候, 我第一眼会问, vue 是什么? 这个框架要干嘛?
2. 没有 vue 这个框架, 我们之前是怎么做的, 我们遇到了哪些糟心的问题?
3. 怎么学习更有效呢, 怎么快速掌握它, 然后用它来干活?
当有了如上思考后, 我们学习来就有的放矢, 效率倍增了, 比迷迷糊糊的学习要好至少 10 倍. 大家先跟着我的思路走, 最后可以自己总结, 归纳, 输出.
第一个问题: vue 是什么? 能做什么?
官网介绍 vue 是一个渐进式框架. 怎么理解这个渐进式框架呢, 经过自己理解和在网上查阅资料, 个人简单理解是, 一, 你可以把他作为一个 JS 库使用, 就和我们引入 jQuery 一样, 用里面的一些功能; 二 你可以在构建新的项目时全部都是用这个框架提供的功能来构建. 用场景说明更好理解
场景 1:
如果你的技术团队技术选型比较保守, 没有新技术的使用场景, 比如让你去维护一个管理后台. 管理后台, 日常就是提交各种表单了, 这部分现有的方案, 比如 form 表单提交或者 jQuery 收集信息 Ajax 提交. 这时候你可以把 vue 当成一个 JS 库来使用, 就用来收集 form 表单, 和表单验证.
场景 2:
在场景 1 中, 你尝到了甜头. 心中暗爽, 还可以这么玩嘞. 独乐乐不如众乐乐和大家分享之后, 团队开始接受使用 vue, 小规模推广起来. 打怪升级该遇小 boss 啦, 领导说, 小伙后台做的越来越有效率了, 来承担些常规业务开发, 来正规军编制和其他小伙伴一起做新闻列表和新闻详情页吧.
在这个项目中, 你跟大胆一点把 整个页面的 dom 用 Vue 来管理, 你发现 jQuery 没什么用了, 列表用 v-for 来循环, 把评论抽成小组件了. 评论交互比较复杂, 但是你的关注点把原来 jQuery dom 操作变成了关注数据的变化, 用数据驱动 DOM 的变化.
场景 3:
经历了场景 1 场景 2, 越来越受大家信赖, 领导又找你了. 你看新闻项目你做的不错, 移动站也得重构了, 你做个移动端 m 站吧, 正好微信和 App 分享出去用到. 这时候, 你需要在做移动端 webapp 了. 于是你由去了解 webpack vue-router, 你发现前端 可以控制路由了. webpack, 可以用于前端开发的工程构建.
场景 4:
场景 3 之后你在技术团队大放异彩, 公司越来越器重你. 年末领导又来找你了, 小伙砸, 想不想拿年终奖啊, 想的话给我做个新闻直播间吧. 需求特别简单: 就是滚动播报新闻, 用户实时参与评论. 有了场景 3 和之前的经验, 发现稍微有点力不从心了, 你和后端的接口沟通上越来越频繁, 新闻直播间需要大量的数据在组件中共享数据, 后来你发现了, vuex 处理数据在组件之间的流动得心应手.
场景 5:
年终奖, 拿到手了, 过年回来升职加薪. 带了 20 人的前端团队, 你的精力开始在配合公司其他部门做用户数据增长了. 发现场景 2 中你犯了个错误, 虽然整个页面用 Vue 管理 开发起来很方便, 但是页面白屏时间长, 而且类似这样的底层页对 seo 都不好. 开始考虑使用 vue2.0 的 SSR. 为了保障团队高质量的输出, 你开始研究如何给 vm 写单测...
场景 1-5 从最初的只因多看你一眼而用了前端 JS 库, 一直到最后的大型项目解决方案.
第二个问题: 没有 vue 的时候, 我们单页面两种方式 1. 使用 iframe 加载页面片段 2. 使用 Ajax 请求页面片段. 两者共同问题是 里面的 JS 逻辑不好处理, id 名字重复, 代码写的不规范. vue 则没有这种问题
第三个问题: 1. 边理解, 边写代码, 边看效果, 在继续理解, 然后写笔记, 输出自己的理解.
vue 大多数情况下是用来开发单页面应用程序, 并不是说只能开发单页面应用程序.
如果公司没有 seo 需求, 都是可以使用 vue 进行系统构建. 移动站点, 后台管理系统特别适合用 vue 来开发.
对 Web 前端感兴趣的小伙伴也可以加 小编 q 裙:
来源: http://www.jianshu.com/p/0ea4bce62745