Vue.js 初接触

bladefury 发布于2019-08-21 15:52 / 3313人阅读

摘要：二还有一点也是思想不容易转过弯的一点，就是我在学习前端时，接触的思想都是需要我们将者分开，方便维护。但是在学习了接触了单文件组件之后，世界又变了，又让我们将同一个组件的放到一个文件中，这样又便于维护和复用，这一脸的懵那啥。

Vue.js 介绍

官方介绍：

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
以上为Vue.js官网的介绍。

一、其实在接触了Vue.js后给我最大的冲击就是双向数据绑定功能，以前我们需要让页面和用户产生交互时，通常我们会这样：
1、获取DOM节点，然后获取到用户的输入内容。
2、获取展示的DOM节点，然后将获取的内容插入到节点中。
可以看出这么简单的功能我们却需要比较多的代码去实现，但是在Vue.js中只需要几行代码就搞定，看起来也更优雅一些。
二、还有一点也是思想不容易转过弯的一点，就是我在学习前端时，接触的思想都是需要我们将HTML CSS JavaScript 3者分开，方便维护。但是在学习了Vue.js接触了单文件组件之后，世界又变了，又让我们将同一个组件的HTML CSS JavaScript放到一个文件中，这样又便于维护和复用，这一脸的懵那啥。
说起来组件的思想到不难理解，其实不管之前的分开文件还是现在的合在一个文件里，都是模块化的思想，只不过应对的时代不同。
早期的时代web还只是web，页面也并不复杂，所以提倡的时HTML CSS JavaScript分离，这样出问题可以很快定位。但是现在的web变成了web应用，它不在只是网页而变成了网页应用，上升到应用这以层级，代码量也是涨了很多倍，如果在沿用之前的思想，那动辄一个文件上万行，别说解决bug就是找到bug都困难。但是如果切换到单文件组件这个思想时，就容易了。单文件组件思想是指将web中的独立的页面结构部分或者是功能部分抽离出来做一个最小的组件，然后将一地组件像搭积木一样拼接起来形成一个web应用，这样的做的好处不言而喻：
1、组件与组件之前关联不大，可以最大限度避免组件之前的侵入。
2、最小功能组件，单一的组件文件并不大，如果有问题可以很快找到，并且别人理解起来也容易。
3、因为是组件与组件搭建的应用，所以发现问题可以很快定位问题。
4、组件也可以复用，提高代码的可利用度，提升工作效率。
当然有优点就有缺点：
1、组件与组件之间做到很好的分离，避免侵入的同时也阻止了它们之间的通信。
2、对于项目初期组件的合理划分也有一定要求，如果划分的不好可能还不如之前的方案。
三、最后还有一点，就是数据与视图层的分离。
在之前我们的html和数据是掺和到一起的。现在是将数据从view中抽离出来，经过运算再渲染到视图层。我觉得这也是为什么Vue.js能帮我们省掉了操作DOM的代码，只要我们将数据和view绑定正确，之后数据有什么处理都不用管view层，只需要在js中处理数据就好，Vue.js会帮你将结果渲染到view层。这是Vue.js带给我们的便利。
最后总结一下：我用自己的话总结Vue.js，Vue.js是一个拥有数据与视图分离、单文件组件思想和双向数据绑定功能的前端框架。

最近一直在学习Vue.js，看过一遍官方文档之后以为自己会了，但是隔了1天之后再来看，又觉的好陌生，仿佛之前从来没接触过，感觉自己的记忆力这么差。
想通过记笔记的形式记住这些东西也不是很成功，是不是自己太笨总记不住知识点，总不能每隔几天我就过一遍官方文档吧，这样学习效率太低了。
之前听人说，你读完了一本书，并不意味着你真的能懂了，检验自己是否学会的好办法就是用自己的话将内容转述出来，这样才能让新的知识在脑子里走一圈，和已有的知识缝合在一起。所以我就想将Vue.js中自己选到的知识点转述出来，变成文字，希望这样有助于将这些知识牢牢的缝合到自己的知识体系中。这是第一篇的内容，之后还会有学习的体会。
最后，这篇文章只是个人的学习笔记，水平有限，如有问题，请联系我。谢谢

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88295.html

vue.js初相识

摘要：是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，采用自底向上增量开发的设计。的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，完全有能力驱动采用单文件组件和生态系统支持的库开发的复杂单页应用。 vue.js ue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不...

Jiavan 2019-08-20 19:02 评论0 收藏0
Vue上手初体验

摘要：已经建立了和数据之间的连接，此时任何对的改动，都会触发的更新。是一个双向绑定，意味着当在当前上所对应的数据发生改变时，更新的值当用户在中修改或输入内容的时候，同步上对应的数据。 Vue.js vue.js不是一个框架，他只是一个提供MVVM风格的双向绑定的库，专注于UI层面。在 Vue.js 的定义中，View 就是用户实际看到的 DOM 元素，而 Model 就是原生的JavaSc...

Eirunye 2019-08-21 11:19 评论0 收藏0
vue组件初学习（一）---初学者文档

摘要：在有时候，组建也可以是原生的元素。简单的说，就是组件是有结构的有样式的，有交互效果，有行为，信号量可以存数据。组件可以通过属性开设置。一、什么是组件？组件是vue.js最强大的功能之一，它可以扩展HTML元素，封装可以重用的代码. 当然，在更高的层面上，组件是自定义元素，vue.js的编译器为它添加了特殊功能。在有时候，组建也可以是原生的HTML元素。简单的说，就是组件是有结构...

HmyBmny 2019-08-21 17:37 评论0 收藏0