一、Vue简介
Vue.js可以说是MVVM架构的最佳实践,是一个JavaScript MVVM库,是一套构建用户界面的渐进式前端框架。专注于MVVM中的ViewModel,不仅做到了数据双向绑定,而且也是一款相对比较轻量级的JS 库,API简洁。
1. 构建用户界面
前端开发者最主要的工作,就是为网站的使用者(又称为:网站的用户)构建出美观、舒适、好用的网页。
1.1 构建用户界面的传统方式
在传统的 Web 前端开发中,是基于 jQuery + 模板引擎 的方式来构建用户界面的。
1.2 使用 vue 构建用户界面
使用 vue 构建用户界面,解决了 jQuery + 模板引擎 的诸多痛点,极大的提高了前端开发的效率和体验。
2. 渐进式
渐进式代表的含义是:Vue被设计成可以自底向上逐层应用;可以整合第三方的库;主张最少。
每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。
3. 框架
框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能。
官方给 vue 的定位是前端框架,因为它提供了构建用户界面的一整套解决方案(俗称 vue 全家桶):
vue(核心库)
vue-router(路由方案)
vuex(状态管理方案)
vue 组件库(快速搭建页面 UI 效果的方案)
以及辅助 vue 项目开发的一系列工具:
vue-cli(npm 全局包:一键生成工程化的 vue 项目 - 基于 webpack、大而全)
vite(npm 全局包:一键生成工程化的 vue 项目 - 小而巧)
vue-devtools(浏览器插件:辅助调试的工具)
vetur(vscode 插件:提供语法高亮和智能提示)
要学习 vue,就是在学习 vue 框架中规定的用法,如vue 的指令、组件(是对 UI 结构的复用)、路由、Vuex、vue 组件库。
4. 双向数据绑定
vue.js 会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。这也是vue.js最大的优点,通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑。
二、Vue的特点
1. 轻量级
Angular的学习成本高,使用起来比较复杂,而Vue相对简单、直接,所以Vue使用起来更加友好。
2. 组件化
Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。
3. 指令
指令主要包括内置指令和自定义指令,以“v-”开头,作用于HTML元素。指令提供了一些特殊的特性, 将指令绑定在元素上时,指令会给绑定的元素添加一些特殊的行为。 例如,v-bind动态绑定指令、v-if 条件渲染指令、v- for列表渲染指令等。
4. 插件
插件用于对Vue框架功能进行扩展,通过MyPlugin.install完成插件的编写,简单配置后就可以全局使用。常用的扩展插件有vue-router、Vuex 等。
三、Vue的特性
vue 框架的特性,主要体现在如下两方面:
- 数据驱动视图
数据:渲染页面期间需要用到的数据——API接口返回的数据 或 程序用写死的假数据
视图:最终渲染出来的页面的DOM结构。
在使用了 vue 的页面中,vue 会监听数据的变化,从而自动重新渲染页面的结构。即数据的变化会驱动视图自动更新。示意图如下:
好处:程序员只管把数据维护好,那么页面结构会被 vue 自动渲染出来。
注意:数据驱动视图是单向的数据绑定,即数据的变化导致页面更新。
2. 双向数据绑定
在网页中,form 表单负责采集数据,Ajax 负责提交数据。
在填写表单时,双向数据绑定可以辅助开发者在不操作 DOM 的前提下,自动把用户填写的内容同步到数据源中。示意图如下:
双向:
js 数据的变化,会被自动渲染到页面上
页面上表单采集的数据发生变化的时候,会被 vue 自动获取到,并更新到 js 数据中
好处:开发者不再需要手动操作 DOM 元素,来获取表单元素最新的值
注意:数据驱动视图和双向数据绑定的底层原理是 MVVM(Mode 数据源、View 视图、ViewModel 就是 vue 的实例),具体MVVM概念请观看以下博客:【软件架构模式】MVVM模式和MVC模式区别_早睡早起长头发的博客-CSDN博客_mvvc模式
四、Vue与React的区别
Vue很多特性与Angular和React有着相同的地方,但是也有着性能方面的差别。
Vue使用基于依赖追踪的观察系统并且使用异步队列更新,所有的数据都是独立触发的,提高了数据处理能力。
React和Vue的中心思想是一切都是组件,组件之间可以实现嵌套。React 采用了特殊的JSX语法,Vue中也推崇编写以*.vue后缀命名的文件格式,对文件内容都有一些规定, 两者需要编译后使用。
值得一提的是,React依赖虚拟DOM,而Vue使用的是DOM模板。Vue 在模板中提供了指令、过滤器等,可以非常方便和快捷地操作DOM。推荐将Vue 使用到具有复杂交互逻辑的前端应用中,以确保用户的体验效果。