黑马程序员技术交流社区
标题: 2017年最新前端资料【第一节：Vue.js框架是什么，为什么选... [打印本页]
作者: 长沙-小知姐姐 时间: 2017-4-7 15:37
标题: 2017年最新前端资料【第一节：Vue.js框架是什么，为什么选...
第一节：Vue.js框架是什么，为什么选择它？
“大白话，讲编程”系列又回来了，这个系列我们一起学习的是Vue.js基础知识。你没看错，是基础知识。所以，哪怕你入行不久，相信你在的大白话风格下，也能学会。
但还是希望你有开发过html，css，javascript的项目经验，如果你连一点项目经验都没有，亦或者你早已掌握Vue.js的知识，那么这个系列不适合你当前的学习阶段。
1 学习目标
通过这一节，你会学会：
1.目前前端技术使用的趋势
2.什么是MVVM
3.Vue.js的优点
4.Vue.js的两大核心
5.Vue.js的适用场景
2 诞生背景
近几年来，得益于手机设备的普及和性能的提升，移动端的web需求大量增加，产生了一种叫webapp的东西，也就是移动端的网页应用。
它们功能越来越复杂，交互也越来越酷炫，功能与效果越来越接近于原生的APP。比如下面这些：
这种webapp它们不仅仅像h5营销网页一样有酷炫的效果，它们还有复杂的点击、输入、下拉选择，视图切换等复杂的交互。在这样的业务需求下，我们还是沿用PC端的开发方案，难免会不太合适。比如：视图切换。
在PC端，视图切换我们会用<a>标签进行页面的跳转，但如果在移动端，那就歇菜了，你会遇到这样的画面：
这个时候用户只能等.....3秒，5秒，8秒.......很难想象，在一个需要频繁切换视图的webapp里面，使用<a>标签去实现，对用户来说是很不友好的，换你你也不愿意等那么久，反正我是不愿意了....
此外，接收用户输入的同时，很可能要及时更新视图，比如用户输入不同的内容，页面就会相对应进行更新，点击不同的选项，就会显示不同的状态等等交互效果。一旦这种交互多了，你要手动地进行操作，代码就容易变得复杂和难以维护。
为了解决webapp这些的体验和开发上的不足，我们决定学习并使用一个MVVM框架——Vue.js
3 什么是MVVM
MVVM可以拆分成：View --- ViewModel --- Model三部分 ，看下面的视图：
那么，我们怎么理解MVVM呢？
上图中，左侧的View相当于我们的DOM内容，我们所看到的页面视图，右侧的Model相当于我们的数据对象，比如一个对象的信息：
而中间的监控者就负责监控两侧的数据，并相对应地通知另一侧进行修改。比如：你在Model层中修改了name的值为：“李四”，那么View视图层显示的“张三”也会自动变成了“李四”，而这个过程就是有ViewModel来操作的，不需要你手动地去写代码去实现（你不用再手动操作DOM了）。
如果你写过复杂的DOM操作，你就可以感受到它带来的便利。
这就是MVVM框架，属于MVVM的JS框架除了Vue.js，还有React.js，Angular.js。
这里我们不去分析具体这3个框架哪个更好，关于技术选型，每个开发团队的情况都不一样，考虑的因素也不一样，只要合适自己就好。这里我们只说一下Vue.js的优点：
1.Vue.js更轻量更快
2.更容易上手，易学
4 Vue的核心
铺垫了这么多，终于讲到了Vue的核心。
那么，我们就来认识一下Vue.js，这里摘取一段官网对它的介绍：
通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
这句话有两个关键词：数据绑定 和 视图组件。
Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图，一个字：爽。再也不用你去操心DOM的更新了，这就是MVVM思想的实现。
视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。看下图：
具体在开发过程中怎样实现一个组件，到底哪些区块可以划分成一个组件，后面的章节我们再一一介绍，这里你只需要知道，在Vue.js中，网页是可以看成多个组件组成的即可。
5 适用场景
如果你还在用jquery频繁操作你的DOM来更新页面的话，那么，你可以用Vue.js来解放你的DOM操作了。
如果你的项目中有多个部分是相同的，并可以封装成一个组件，那么，你可以试试用Vue.js。
此外，Vue.js的核心实现中使用了ES5的Object.defineProperty特性，IE8及以下版本浏览器是不兼容的，所以，你的项目需要兼容这些较低版本的浏览器的话，那么，Vue.js就不适用了。
毕竟，开发一个项目的目的不是为了使用某个框架。
6 本节小结
为了更好满足当前移动webapp项目的开发需求，MVVM框架诞生，而Vue.js便是这样的一种js框架，其两大核心：数据驱动和组件化。
如果觉得小知姐姐的资料有用的话就回个贴！
精华推荐：
怎样提高你在面试过程中的成功率
作者: 彭小豆 时间: 2017-4-7 15:42
有用有要 多谢分享
作者: 彭豆豆 时间: 2017-4-8 14:29
多谢分享 楼上的我们的名字怎么怎么像
作者: 长沙-小知姐姐 时间: 2017-4-10 09:38
作者: 彭豆豆 时间: 2017-4-20 14:56
厉害了 我的锅
作者: →_→←_← 时间: 2017-4-27 13:47
干货不错
作者: Eurus 时间: 2017-4-29 15:21
赞赞赞赞赞赞赞
作者: webjs 时间: 2017-6-8 11:36
suibw我来看看看看看看看看看看看看看看快快快吧
作者: 543668913 时间: 2017-6-18 18:09
xuexilfffffffffffff
作者: 鹏啸九天 时间: 2017-7-29 15:40
2832281573 我要zz
作者: xihahe 时间: 2017-7-30 09:26
感谢lz分享！很给力
作者: IT路上的老男孩 时间: 2017-8-11 00:34
居然还有超过十个字
作者: 漩涡明远 时间: 2017-8-14 21:26
谢谢楼主！！！！！
作者: 飞翔的咸鱼 时间: 2017-8-19 15:57
dddddddddddddd
作者: bombhaha 时间: 2017-9-4 09:46
这个好像很多地方都在使用，先了解了解
作者: hqz19940616 时间: 2017-9-4 15:16
11111111111111111111111
作者: 1459139164 时间: 2017-9-4 22:05
身高多少供电公司
作者: y7361664 时间: 2017-9-5 17:11
谢谢楼主
作者: okchenyang44 时间: 2017-9-26 14:25
11111111111111111111111111
作者: newu 时间: 2017-10-5 15:59
赞赞赞赞赞赞赞
作者: 小柯柯 时间: 2017-10-7 23:11
看看什么资料
作者: GoGo_May 时间: 2017-10-9 10:32
作者: wuchengqi 时间: 2017-10-9 10:58
喜欢喜欢嘻嘻哈
作者: 慕容初晨 时间: 2017-10-12 10:22
学习。。学习
作者: liub 时间: 2017-10-12 22:58
77777777777777777
作者: 唉黑子 时间: 2017-10-14 13:33
学习vue框架
作者: Jayd0nFun9 时间: 2017-10-20 16:33
看看看那
作者: 18789055986 时间: 2017-10-24 23:41
https://unsplash.com/
作者: 风向逆转 时间: 2017-10-29 10:59
xuexiyiixiaxia
作者: opop 时间: 2017-10-29 22:56
作者: Ghostmanice 时间: 2017-10-29 23:17
谢谢分享
作者: 我的电脑啊 时间: 2017-10-31 18:13
我就看看
作者: 木木凋零 时间: 2017-10-31 19:37
前段时间看过vue的文档
作者: 玉溪 时间: 2017-10-31 23:20
签到,感谢视频分享,谢谢
作者: 小猴儿不听话 时间: 2017-11-5 11:11
感谢感谢
作者: Lin.Ming 时间: 2017-11-5 19:54
6666666666666666666
作者: 后来的我们丶 时间: 2017-11-6 21:59
6666666666666666
作者: qixiaoer 时间: 2017-11-8 15:20
zhege henhao
作者: 13763062259 时间: 2017-11-11 16:45
感谢分享
作者: buefzzz1 时间: 2017-11-12 09:43
年最新前端资料【第一节：Vue.js框架是什么，为什么选... [修改
作者: xuboke 时间: 2017-11-16 10:43
很好，解为何需要vue
作者: 赛文凹凸曼 时间: 2017-11-16 12:29
，奥特曼觉得很赞
作者: 尤丽喜 时间: 2017-11-20 12:23
即将面试
作者: bbaaoo 时间: 2017-11-20 14:19
有用
作者: zuoanlang 时间: 2017-12-1 19:35
asdfasfafasdfasd
作者: qqlcx5 时间: 2017-12-8 09:12
66666666
作者: 款款就是我 时间: 2017-12-8 16:49
学习了 谢谢楼主分享
作者: jmzyang 时间: 2017-12-9 22:53
谢谢分享
作者: fx0127 时间: 2017-12-12 16:37
6666666666666666666666
作者: ccdxxxx 时间: 2017-12-13 23:52
与ion基本就咯看了，
作者: 半路码农 时间: 2017-12-15 00:11
666666666666666666
作者: hz有盼头啊 时间: 2017-12-15 08:07
感谢分享
作者: baohan666 时间: 2017-12-18 12:07
goodgoodgoodgoodgood
作者: Tymon 时间: 2017-12-20 15:44
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
作者: zhaojiping 时间: 2017-12-26 01:17
xczxczxzxcz
作者: 人在IT 时间: 2017-12-29 10:15
多谢楼主
作者: xiaoyuying 时间: 2017-12-30 16:13
666666666666
作者: zcneal 时间: 2018-1-4 15:45
你好，资源很好
作者: guolongfei1212 时间: 2018-1-5 10:32
正在学习前端 多谢了
作者: 死鱼淹死的鱼 时间: 2018-1-5 17:10
看看什么内容
作者: 长安花灯 时间: 2018-1-6 22:40
简单入手最好了
作者: zzping 时间: 2018-1-22 15:58
谢谢分享
作者: mvpicy 时间: 2018-1-25 10:56
6666666666666666666666
作者: 小鸡爱吃番薯 时间: 2018-1-29 09:23
必须要赞一个啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
作者: heima111111 时间: 2018-2-9 14:57
vus.js确实很火
作者: Dadihqz 时间: 2018-2-9 17:14
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
作者: 谁一直错过丶 时间: 2018-2-24 16:51
66666666666666666666666666
作者: 番茄炒鸡蛋 时间: 2018-2-25 09:29
这个好像很多地方都在使用，先了解了解
作者: 借一世做我老婆 时间: 2018-2-27 20:16
自行车自行车自行车自行车
作者: xzzcc 时间: 2018-3-5 10:36
在不用这样的框架就out了
作者: 1479008172 时间: 2018-3-5 11:37
6666很好的vue
作者: 子非鱼886 时间: 2018-3-9 10:39
来看看看
作者: via123 时间: 2018-3-11 14:52
谢谢楼主的分享666666666
作者: GillbertSam 时间: 2018-3-12 15:15
有用有用 看下
作者: 不忘初心123 时间: 2018-3-15 15:24
谢谢楼主！！！！
作者: 前端大菜鸟 时间: 2018-3-15 19:18
来一波
作者: qw1006897864 时间: 2018-3-20 09:40
6666666666666666666666
作者: jiangbin0609 时间: 2018-3-25 20:52
谢谢了谢谢了谢谢了谢谢了谢谢了谢谢了谢谢了谢谢了
作者: Liv 时间: 2018-4-8 22:16
vue 学习；回复获取内容，大家都是不容易啊！
作者: 塔尔h 时间: 2018-4-11 09:50
撒大声地大声道
作者: gushi 时间: 2018-4-13 08:52
11111111111111111111111111111
作者: 彼岸花落 时间: 2018-4-14 22:12
这个很是好奇
作者: bulebulebule 时间: 2018-4-17 15:58
有用有用 多谢分享
作者: bulebulebule 时间: 2018-4-17 16:01
请问 后续章节在哪啊
作者: ylbo 时间: 2018-4-19 21:46
赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞
作者: 1330254922 时间: 2018-4-25 14:15
大幅度发生发送到东方闪电
作者: var_obj 时间: 2018-4-25 15:02
感谢分享
作者: IWantToBe... 时间: 2018-4-25 21:51
前来学习一下。。。。
作者: 小萌新 时间: 2018-5-4 21:40
有视频啊
作者: IWantToBe... 时间: 2018-5-5 21:29
前来学习一下。。。。
作者: 我偶老王 时间: 2018-5-6 23:34
真好喜欢
作者: 德玛丨西亚 时间: 2018-5-7 18:28
[url][/url]
作者: 慕容凌风 时间: 2018-5-9 20:57
而我却群群群群群群群群群群群群群群
作者: 海阔天空420 时间: 2018-5-14 10:51
6666666666666
作者: easn 时间: 2018-5-14 11:31
66666666666666
作者: 剑海情涛 时间: 2018-5-14 15:34
看着讲着还是蛮可以的！
作者: learning2017 时间: 2018-5-21 16:13
vue应用学习
作者: Port 时间: 2018-5-30 12:45
webAPP 666666666666
作者: gy草船借箭 时间: 2018-5-30 19:55
学习学习
作者: infantile、往日 时间: 2018-5-31 10:18
有视频资料吗
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
