Vue.js – 渐进式 JavaScript 框架

图片[1]-Vue.js – 渐进式 JavaScript 框架-京讯网络

Vue纪录片:

Vue介绍:

 

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。[5]与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。[1]

为什么使用Vue?

我们都知道完整的网页是由 DOM 组合与嵌套形成最基本的视图结构,再加上 CSS 样式的修饰,使用 JavaScript 接受用户的交互请求,并通过事件机制来响应用户交互操作而形成的。

我们把最基本的视图结构(也就是 HTML DOM)拿出来,称为视图层。这个被称为视图层的部分就是 Vue 核心库关注的部分。

Vue.js 为什么关注视图层呢?因为一些页面元素非常多。结构庞大的网页如果使用传统开发方式,数据和视图会全部混合在 HTML 中,处理起来十分不易,并且结构之间还存在依赖或依存关系,代码上就会出现更多问题。

有过前端开发基础的读者都应当了解过 jQuery,jQuery 给予我们简洁的语法和跨平台的兼容性,极大地简化了 JavaScript 开发人员遍历 HTML 文档、操作 DOM、事件处理等操作。

用过 jQuery 的读者都有体会,开始页面元素不多,有时会需要一层层地不断向上寻找父辈元素,如$('#xxx').parent().parent(),但后期修改页面结构,代码可能就会变得臃肿,如$('#xxx').parent().parent().parent(),随着产品升级的速度越来越快,修改变得越来越多,页面中相似的关联和嵌套 DOM 元素多得数不清,而 jQuery 选择器及 DOM 操作本身也存在性能缺失问题,想要修改无从下手。

总之,原本轻巧简洁的 jQuery 代码,在产品需求面前变得啰嗦冗长。

但是 Vue.js 解决了这些问题,这些问题将在 Vue 中消失。

Vue主要特点:

Vue.js 是一个优秀的前端界面开发 JavaScript 库,它之所以非常火,是因为有众多突出的特点,其中主要的特点有以下几个。

1) 轻量级的框架

Vue.js 能够自动追踪依赖的模板表达式和计算属性,提供 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API,使读者更加容易理解,能够更快上手。

2) 双向数据绑定

声明式渲染是数据双向绑定的主要体现,同样也是 Vue.js 的核心,它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

3) 指令

Vue.js 与页面进行交互,主要就是通过内置指令来完成的,指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

4) 组件化

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。

在 Vue 中,父子组件通过 props 传递通信,从父向子单向传递。子组件与父组件通信,通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。

在开发中组件和 HTML、JavaScript 等有非常紧密的关系时,可以根据实际的需要自定义组件,使开发变得更加便利,可大量减少代码编写量。

组件还支持热重载(hotreload)。当我们做了修改时,不会刷新页面,只是对组件本身进行立刻重载,不会影响整个应用当前的状态。CSS 也支持热重载。

5) 客户端路由

Vue-router 是 Vue.js 官方的路由插件,与 Vue.js 深度集成,用于构建单页面应用。Vue 单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来,传统的页面是通过超链接实现页面的切换和跳转的。

6) 状态管理

状态管理实际就是一个单向的数据流,State 驱动 View 的渲染,而用户对 View 进行操作产生 Action,使 State 产生变化,从而使 View 重新渲染,形成一个单独的组件。

© 版权声明
THE END
喜欢就支持一下吧
点赞9.4W+打赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容