用更好的方式来打开vue.js--vue.js课堂实录(第二部分)

论坛 期权论坛 期权     
算法与人生   2019-6-30 19:18   2633   0
vue.js的学习,多数人都是从看官方文档开始,但看了,不去使用,我们只是记住了知识的描述而不是学到了知识本身,因为知识要内化于心,外化于项目,是需要很多的例子来解析的。初学者去看vue.js的官方文档,虽然比起angular和React.js等容易接受,毕竟vue.js的作者是在美国工作的中国人,语言表述更接近中国思维,但即使这样,通篇文档综合下来还是以技术为主,讲述可以做什么,怎么做。好多时候,初学者(更多指的是没有开发项目经验的初学者,因为现在的人员招聘,直接要求初学者必须会vue.js或者React.js,而不是指已经工作一两年后,因为工作需要而来学习vue.js的人)无法仅丛文档上的描述就知道在项目中应该直接使用vue.js的那部分特性。这就要求我们必须以例子来引导学习,学习其实就是从有限的例子中找出要问题和答案之间的规律的过程。讲述例子的同时,引入vue.js的解决方案,然后再和之前的方案比较,从而得出vue.js的优势,快速应用到实际项目中。
vue.js的好处,就是框架学习是渐进式的,我自己刚开始学习的时候,因为有桌面开发的基础,所以对于vue.js很容易理解,结合之前原生js和jquery的编程经验,发现双向数据绑定就是神奇的存在,解决了我们平时需要不断的获取dom,设置值,然后不断的去监听事件的这么一个流程,一个简单的v-model就可以搞定;还有就是v-if、v-show和v-for等这些内容,可以快速的帮助我们生成数据,解决了之前需要不断的去拼接数据的苦恼;另外根据业务逻辑的结果,来设置style和class也是很接近人的思考方式,而不是之前的机器的方式,不断的去获取节点,设置css,取消css,这样的jquery代码,过了一段时间,我们自己都记不住到底是做了些什么,为什么要做;还有就是数据的管理,除了业务中需要的数据,还有的数据是可以通过已经存在的数据计算出来(计算属性),比如经典的购物车就必须使用,总价会因为单价和数量的变化改变而改变,我们在vue.js中,只需要指定总价和数量、单价之间的计算方式,就可以直接让vue.js帮我们实现。
综合下来,即使是vue.js的基础里面,也有好些神奇的功能让我们心动,所以本人在框架发布的早期,0.12版的时候,就毅然决然的加入了vue.js的阵营。抛去了之前的jquery,下面来说说几个vue.js的特征,我自己觉得最吸引人的地方,一家之言,说的不好,大家不要见怪
1、容易上手,因为我们知道页面都是html+css+js构成的,任何学web的人也都是从html+css+js开始学习的,因此当vue.js也把页面的构建分成了同样的三部分,可以让学习者更容易接受,更容易上手学习。
2、以数据为中心,数据改变,界面也跟随着改变。我们平时只需要关注数据,不需要直接去操作DOM,这种思维方式的变更,伴随着我们学习vue.js的任何一个阶段,之后我们更重要的考虑数据的改变,而不是考虑数据怎么显示。
3、可以根据自己的需要,自定义组件,初学者也可以理解为是增加html标签,我们可以把业务和逻辑都统一封装在组件里面,让前端页面的构建更加的清晰明了,平时我们的页面上不需要太多的html标签,因为细节都被封装了。
4、数据的双向绑定,让我们可以快速的去处理用户的输入,实现更人性的数据提交。
5、利用template,可以快速构建页面,利用v-for、v-if和v-show等指令,可以从原来的前端模板使用快速过度到mvvm。

第二部分的课堂实录,包含下面的内容:
[iframe]https://v.qq.com/iframe/preview.html?width=500&height=375&auto=0&vid=e08849g1a9e[/iframe]
增加存储--localStorage的应用
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:10
帖子:2
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP