发新贴  快速回复

Vue学习“心酸”历程(连载第一篇)

暴龙
2017-04-19 17:12

从事前端开发工作已经有两年多的时间了,当初刚要入行的时候,就知道,想要做一个合格的程序员,就要不断地学啊学、学啊学,学到天荒地老,海枯石烂。可是即使我已做好了心理准备,也没有想到,奶奶的,这前端行业发展的这么快,分分钟就出现各种各样的框架啊。什么Node、Angular、Vue、React、小程序……瞬间暴汗啊有木有 -_-|||,这对我这么个学渣来讲,太多了好不好。

不过没办法,谁让我已深深入坑了呢,抱着生是前端人死是前端鬼的态度,我就来学学最近比较火爆的Vue吧,据说现在好多面试公司都会问你会不会Vue,为什么为什么?很厉害吗?

开始找资料,首先是官网,这里:https://cn.vuejs.org/,看了一两天的时间,满脑子还是一种声音:这是什么?干嘛用的?好难啊!真心对我来讲,看不懂好嘛!!好吧,突然觉得自己真心不是自学的料,找了好多资料,还是没有深入了解Vue,既然自己看资料不行,那就找课程,花点钱让别人手把手教总能学会了吧。于是,我就想到了我曾经学前端的培训机构,他们前一阵子好像刚刚在群里发布了相关的公开课。马上联系客服,可惜了,公开课已经结束了。不过他们告诉我还有录播哦,也算是不幸中的万幸吧。于是按照客服的指引,找到了视频的位置,话不多说,开始看吧。以下就是通过视频学习后,我对Vue的一些总结,分享给大家一起品尝吧。

一、Vue 是什么?

官方解释说,Vue 是一套构建用户界面的渐进式框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。

渐进式框架?来来来,你出来,我保证不打死你,对于小白来讲,瞬间懵逼了好嘛!!你就不能说的简单易懂点吗?好吧,我承认,搞开发比较爱装,装什么?不说了哈哈

渐进式框架,“渐进”两个字,画下重点考试要考。简单理解就是框架是分层设计的,每层都有不同功能,每层都可选,根据不同的需求选择不同的接入方案,相对其他框架,使用比较灵活。不用必须使用它的模块机制,不用必须使用它的依赖注入等等,怎么样,是不是听着就很爽。

用视频里的话讲就是,你需要用到那一块就用就行了,不需要全部都用上。

附上一张渐进式框架的图,大家欣赏下。

是不是有些人本来看上文已经理解点了,看了图,又瞬间懵逼了?有嘛?哈哈,没关系,真有的话就给我留言,我来把我理解的给你们再说说,不过不保证百分百正确哈。


二、Vue的核心

1、响应的数据绑定

响应的数据绑定就是当数据发生改变的时候自动更新视图。

这是利用 Object.definedProperty 中的 setter/getter 代理数据来实现监控的。当它发现数据发生改变的时候,就会去更新视图啦。

最初看到 definedProperty、setter/gettr 的时候,就被它给带跑了,什么鬼东西,不过在经历了一通查找后(包括跑他们社区上提问过),我想我现在是搞懂了,或者你们比我懂的多,不用查资料就能明白,那我会嫉妒你!但如果有哪位兄弟姐妹们对这些名词不太明白的话,你可以问我,我抽时间就回复,就先不在这里做过多的解释了。不过我可以告诉大家的是,它不兼容ie8哦,也就是说Vue也不兼容ie8。

2、组合的视图组键

这里呢就是一个概念性的东西,知道并且记住就ok啦。

ui页面映射为组建树,划分组建可维护、可重用、可测试。

就像老师说的,好想堆积木一样,一个一个往上放。

我上个图理解下:

三、虚拟DOM

虚拟 DOM 这个概念简单易懂,就和它的字面意思一样,利用内存生成一个与真实 DOM 的结构数据一模一样的 DOM,这个内存中生成的 DOM 就叫做虚拟 DOM。

那么虚拟 DOM 有什么用么,这个就要先从真实 DOM 开始说起啦。我们都只到js的运行速度是非常快的,但是执行中又不可避免的会操作很多页面上的 DOM,这样就造成了运行速度的减慢。时长在更新数据以后,要重新渲染,包括没有数据改变的地方,造成了很大程度上的资源浪费。

这个时候,虚拟 DOM 出现了,当数据发生改变的时候,它能够通过对比数据,准确的找到数据发生改变的地方,并且针对这个地方进行渲染,以很小的代价完成了 DOM 操作。

来,我可耻的盗用一下视频里的图:

四、Vue 的 MVVM 模式

所谓 MVVM 模式,就是 M(Model数据模型)+ V(View视图模版)+ VM(View-Model 视图模型),这个理解起来很简单,M 层就是我们拿到的数据和业务逻辑,V 层就是用于数据展示的,VM 呢就是处理 M 和 V 之间关系用的,所有的脏活累活都是它来干的。视图影响数据,数据又影响着视图,这就是所谓的双向数据绑定。

再上一张经典的 MVVM 模式的图

五、Vue 的小例子

好了,上面说了那么长的概念性的东西了,还不换点料,估计大家就该关页面了。来来来,都动起手来,我们来敲个简单的代码,消化一下上面那些概念。

首先,敲代码之前我们要干嘛?没错,就是要安装Vue啊,要不敲半天代码,谁来处理对不对。Vue 网站有独立版本和 NPM 的,我们现在只是做做练习,写点小例子,就下个独立版本直接用 script 引入就好啦,等要去做大项目的时候,再去使用 NPM 安装吧。

下面开始植入代码(代码一):

1    <!--模版-->
2    <div id="demo">
3        <span v-on:click="clickHandle">{{ message }}</span>
4    </div>
5    <script type="text/javascript">
6        //数据
7        let obj = {
8            message:"hello,vue!"
9        }
10        
11        //vm
12        var vue = new Vue({
13            el:"#demo",   //挂载选择器
14            data:obj,     //代理数据
15            methods:{     //定义方法
16                clickHandle(){
17                    alert("click");
18                }
19            }
20        })
21        console.log(vue)
22    </script>

首先我们能看到 vm 代码部分中有个 new Vue,所以 Vue 是通过构造函数来创建的,再往下走,就是 Vue 需要传入的选择对象,对象中包含挂载元素选择器(el)、代理数据(data)、定义方法(methods)等等,这里先不说太多,感兴趣的可以自己先看看 Vue 的 API 文档哈。

这里有一点要强调的是,每个 Vue 实例都会代理其 data 对象里的所有属性,这些被代理的属性是响应的,新添加的属性不具备响应功能,改变后不会更新视图。

另外呢,Vue 会暴露自身的属性和方法,以 $ 开头,来看打印的部分内容:


六、Vue 的声明式渲染

又来又来,又是一个这么难理解的名称,什么是声明式渲染?简单理解就是你只要表达出你想做什么(what)就行了,不需要知道具体是怎么做的(how)。

而跟声明式渲染相对应的还有一个叫做命令式渲染,通过声明式渲染的解释,是不是应该能猜到什么是命令式渲染呢?没错,和字面意思一样,你去命令电脑去做事情,具体怎么做(how),这样就不管你想做什么(what),它都会按照你说的去做。

那视频里的代码给大家举个简单的例子(求数组中每个数字的倍数):

命令式(代码二):

1    var arr = [1,2,3,4,5];
2    var newArr = [];
3    for(var i=0; i<arr.length; i++){
4        newArr.push(arr[i]*2);
5    }
6    console.log(newArr); //==>2,4,6,8,10

声明式(代码三):

1    var arr = [1,2,3,4,5];
2    var newArr = arr.map(function(item){
3        return item * 2;
4    });
5    console.log(newArr); //==>2,4,6,8,10

怎么样,看完这两段代码的对比,瞬间理解了吧。如果你瞬间还没明白,哈哈,来继续留言提问吧。

好,这么看来,Vue就一定是声明式渲染啦,看<代码一>里,你只要告诉电脑我要把数据data绑定到对象el上就好了,具体它怎么找到el的,怎么把data绑定到el上,都无需知道。

 

写了这么多了,有点累了,连载第一篇就先写这么多吧,我还是个小白,这也是我的处女贴,不容易啊,粗茶淡饭,希望大家多捧场,轻拍砖哈。

如果有大神觉得我哪里说的不对的,请留言指教;

如果有同样对Vue感兴趣朋友,留言我们一起进步;

如果有看完不明白的,也请留言,我一定尽力解答。

再次请大家多多支持,谢谢!我会尽快更新的

 
leo

很帅!!非常支持这种记录学习点滴的行为哈~~

持续关注中!

2017-04-19 17:19  回复本帖
 
php-icy

赞赞

2017-04-19 17:49  回复本帖
2017年2月8日

从事前端开发两年,说明基础不错。可以尝试去看源码,这样比任何案例,视频来的都有用,而且做项目的时候,不会畏手畏脚,在同事面前吹牛逼信心都是满满的。我也是走js道路,工作才几个月,对JQuery的源码有大概的了解了。目前打算自学vue源码。争取半年后会吧。编程道路是难易难,精通这辈子都达不到咯。

2017-04-20 01:39  回复本帖
暴龙

leo 2017-04-19 17:19发表的内容:

很帅!!非常支持这种记录学习点滴的行为哈~~

持续关注中!

哇塞,妙味老大来了,好激动啊,感谢支持,我会继续努力的!!

2017-04-20 11:11  回复本帖
暴龙

php-icy 2017-04-19 17:49发表的内容:

赞赞

感谢支持

2017-04-20 11:11  回复本帖
暴龙

2017年2月8日 2017-04-20 01:39发表的内容:

从事前端开发两年,说明基础不错。可以尝试去看源码,这样比任何案例,视频来的都有用,而且做项目的时候,不会畏手畏脚,在同事面前吹牛逼信心都是满满的。我也是走js道路,工作才几个月,对JQuery的源码有大概的了解了。目前打算自学vue源码。争取半年后会吧。编程道路是难易难,精通这辈子都达不到咯。

好的,谢谢你分享的经验,有时间,我也会尝试着看看源码的

2017-04-20 11:12  回复本帖
小呆

感谢楼主的分享  正准备要学Vue  但是不知道怎么入门  因为我js基础不是很好  不知道这条路该怎么走  还望楼主不吝赐教

2017-04-25 00:10  回复本帖
 
2764072459

leo 2017-04-19 17:19发表的内容:

很帅!!非常支持这种记录学习点滴的行为哈~~

持续关注中!

老师您好,打扰一下,请问哪些视频课程是您或者杜鹏老师录的,我只能听懂你们俩的课(没有黑其他老师的意思,只是觉得你们俩的课程更适合我)

2017-04-25 15:55  回复本帖
 
又被帅醒了

啥都不说了,求视频啊!!!

2017-04-25 18:43  回复本帖
 
leo

又被帅醒了 2017-04-25 18:43发表的内容:

啥都不说了,求视频啊!!!

视频位置:http://2017.miaov.com/

小试牛刀 > vue.js实战开发系列

2017-04-26 14:58  回复本帖
 
疯子蚁

暴龙 2017-04-20 11:11发表的内容:

感谢支持

加一层看看样式

2017-05-03 16:58  回复本帖
jean

没人提问那个声明式渲染的问题嘛,,没咋理解,求解!

2017-05-11 16:49  回复本帖
暴龙

小呆 2017-04-25 00:10发表的内容:

感谢楼主的分享  正准备要学Vue  但是不知道怎么入门  因为我js基础不是很好  不知道这条路该怎么走  还望楼主不吝赐教

给你个小建议,先学会走路再学跑,才能跑得更快更稳,所以,先把js再学扎实点,再来学vue。

2017-05-23 14:10  回复本帖
 
刘龙飞

jean 2017-05-11 16:49发表的内容:

没人提问那个声明式渲染的问题嘛,,没咋理解,求解!

我也想问明白这个“”声明式渲染“”,我理解的就是:声明式,就是 你只需要写出你要做的是什么,比如我要循环一个列表,50条,你不会去复制50遍,而是声明式的 按照框架的写法声明歘来,具体怎么做框架回去帮你渲染.......

希望有人指点@刘伟 伟哥

2017-06-06 22:17  回复本帖
 
monica

赞一个

2017-07-11 19:41  回复本帖
 
潇湘雨

刚刚才看了下 这个好像是妙味公开课里面的视频内容把

2017-07-16 21:48  回复本帖
登录 后才可以发表回复