从零开始学Vue——开篇

Vue介绍

从零开始学Vue——开篇

VueJS是一个开源的渐进式JavaScript框架,用于开发交互式Web界面。它是用于简化Web开发的着名框架之一。VueJS专注于视图层。它可以很容易地集成到大型项目中进行前端开发而不会出现任何问题。

VueJS的安装非常容易入手。任何开发人员都可以在一段时间内轻松理解和构建交互式Web界面。VueJS由来自Google的前雇员Evan You创建。VueJS的第一个版本于2014年2月发布。它最近在GitHub上发布了137989颗星,非常受欢迎。

从零开始学Vue——开篇


为什么我会写这篇文章

不仅仅是这篇文章,后面会陆续的写更多的关于Vue的文章,因为我没学过,现在时从头开始学,就当是记录笔记,一步步的将Vue学会并能够应用到项目开发中去,如果有人愿意,可以共同交流学习。本篇内容先对Vue做一个简单的介绍,包括了自己的一些理解!如有不同意见,欢迎评论留言!

Virtual DOM(虚拟DOM)

VueJS使用虚拟DOM,其他框架(如React,Ember等)也使用虚拟DOM。不会对DOM进行更改,而是创建以JavaScript数据结构形式存在的DOM副本。 。无论何时进行任何更改,都将对JavaScript数据结构进行更改,并将后者与原始数据结构进行比较。然后将最终更改更新为真实DOM,用户将看到更改。它在性能方面优化的非常好,而且更加简单,总之就是更快和更强

从零开始学Vue——开篇

从零开始学Vue——开篇

数据绑定(Data Binding)

数据绑定功能有助于操作或赋值给HTML属性,更改样式,借助VueJS提供的名为v-bind的绑定指令来分配

从零开始学Vue——开篇

组件(Components)

组件是VueJS的重要功能之一,它有助于创建自定义元素,可以在HTML中重复使用,即组件复用

从零开始学Vue——开篇

事件处理(Event Handling)

将v-on添加到DOM元素的属性,用于监听VueJS中的事件。

从零开始学Vue——开篇

动画/过渡(Animation/Transition)

VueJS提供了各种方法,可以在添加/更新或从DOM中删除HTML元素时应用转换。VueJS有一个内置的过渡组件,需要围绕元素包裹以实现过渡效果。我们可以轻松添加第三方动画库,并为界面添加更多交互性。

从零开始学Vue——开篇

计算属性(Computed Properties)

这是VueJS的重要特征之一。它有助于监听对UI元素所做的更改并执行必要的计算。不需要额外的编码。

从零开始学Vue——开篇

模板(Templates)

VueJS提供基于HTML的模板,将DOM与Vue实例数据绑定在一起。Vue将模板编译为虚拟DOM渲染函数。我们可以使用渲染函数的模板,为此我们必须用render函数替换模板。

从零开始学Vue——开篇

指令(Directives)

VueJS具有内置指令,例如v-if,v-else,v-show,v-on,v-bind和v-model,它们用于在前端执行各种操作。

从零开始学Vue——开篇

监视器(Watchers)

监视器应用于更改的数据。例如,表单输入元素。在这里,我们不必添加任何其他事件。Watcher负责处理任何数据更改,使代码简单快速。

从零开始学Vue——开篇

路由(Routing)

页面之间的导航是在vue-router的帮助下完成的。

从零开始学Vue——开篇

轻量级(Lightweight)

VueJS脚本非常轻巧,性能也非常快。

从零开始学Vue——开篇

Vue-CLI

可以使用vue-cli命令行界面在命令行安装VueJS。使用vue-cli可以轻松地构建和编译项目。

从零开始学Vue——开篇

与其他框架的比较

这里由于我之前只用过react,就简单对比下

  • 虚拟DOM

Virtual DOM是DOM树的虚拟表示。使用虚拟DOM,可以创建一个与真实DOM相同的JavaScript对象。每当需要对DOM进行更改时,都会创建一个新的JavaScript对象并进行更改。稍后,将比较两个JavaScript对象,并在真实DOM中更新最终更改。VueJS和React都使用虚拟DOM,这使得它更快。

  • 模板与JSX

VueJS分别使用html,js和css。初学者很容易理解并采用VueJS风格。基于模板的VueJS方法非常简单,当然也可以使用JSX的语法。React使用jsx方法。一切都是ReactJS的JavaScript。HTML和CSS都是JavaScript的一部分。

从零开始学Vue——开篇

总结一下

在大致的了解了Vue的相关知识点后,我会在未来的文章中继续学习Vue,不断地更新自己的知识库,如有道友愿意,可共同交流学习,以便于共同进步,也为了自己有一个更好的将来,感谢大家的支持!谢谢!

从零开始学Vue——开篇


分享到:


相關文章: