前端Vue.js框架是什么？有哪些特点？

ゝ一纸荒年。 2022-09-04 02:59 388阅读 0赞

前端Vue.js框架是什么？有哪些特点？Vue.js是一个前端框架，用于构建用户界面的渐进式框架。在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手，让程序员可以更多的时间去关注业务逻辑，Vue框架能够提高开发的效率。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pBQ0tfU1VKQVZB_size_16_color_FFFFFF_t_70_pic_center]  
**前端Vue.js框架是什么**

**科普时刻**：

[黑马程序员vue前端基础教程-4个小时带你快速入门vue][vue_-4_vue]

[前端开发利器vue，微信小程序快速开发实战][vue]

[web前端基础必备教程-2小时玩转Vue单元测试][web_-2_Vue]

[黑马程序员Vue2.0+Vue3.0入门到精通，大厂前端岗位必备技能][Vue2.0_Vue3.0]

**1、Vue.js是什么？**

Vue是一个js库，且无依赖别的js库跟jquery差不多。Vue核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

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

**2、Vue的MVVM设计模式是什么？**

如果了解前端一定知道MVVM和MVC这两种设计模式，且很有可能对mvp也有一些了解。MVC即model，view，control，jQuery就是采用的这种设计模式。MVVM即model，view，viewmodel，是数据驱动模式，即所有的一切通过操作数据来进行而尽量避免操作DOM树。

不关注DOM结构，考虑数据该如何储存，用户的操作在view通过viewmodel进行数据处理，分情况是否通过ajax与model层进行交互，再返回到view层，在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对DOM的繁琐操作，而是专心于对用户的操作进行处理，避免MVC中control层过厚的问题。

在vue调试方面可以选择安装chrome插件vue Devtools。打开vue项目，在console控制台选择vue面板。在Devtools对象中，可以选择组件，查看对应组件内的数据信息。也可以选择Vuex选项，查看该项目内Vuex的状况变量信息。

**3、Vue.js有哪些优点？**

声明式，响应式的数据绑定；组件化的开发；Virtual DOM；响应式的数据绑定  
（1）jQuery首先获取到DOM对象，然后对DOM对象进行进行值的修改等操作；  
（2）Vue首先把值和js对象进行绑定，然后修改js对象值，Vue框架会自动把DOM的值就行更新；  
（3）简单理解为Vue帮我们做了DOM操作，以后用Vue就需要修改对象的值和做好元素和对象的绑定，Vue框架会自动做好DOM相关操作；  
（4）DOM元素跟随JS对象值的变化而变化叫做单向数据绑定，若JS对象的值也跟随着DOM元素。

**4、需要学习哪些Vue.js框架相关知识点？**

Vue.js 安装、Vue.js 目录结构、Vue.js 起步、Vue.js 模板语法、Vue.js 条件语句、Vue.js 循环语句、Vue.js 计算属性、Vue.js 监听属性、Vue.js 样式绑定、Vue.js 事件处理器、Vue.js 表单、Vue.js 组件、Vue.js 组件自定义事件、Vue.js 自定义指令、Vue.js 路由、Vue.js 过渡& 动画、Vue.js 混入、Vue.js Ajax(axios)、Vue.js Ajax(vue-resource)、Vue.js 响应接口、Vue.js 实例等。

Vue.js 是一个JavaScriptMVVM库，一套构建用户界面的渐进式框架。以数据驱动和组件化的思惟构建的，采取自底向上增量开辟的设计。比拟于Angular.js，Vue.js供给了加倍简洁、更易于懂得的API，使得我们快速地上手并应用Vue.js。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pBQ0tfU1VKQVZB_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/b18af47df51c4c0fab836586f1e65063.png
[vue_-4_vue]: https://www.bilibili.com/video/BV12J411m7MG
[vue]: https://www.bilibili.com/video/BV1Sc41187nZ
[web_-2_Vue]: https://www.bilibili.com/video/BV18W411j725
[Vue2.0_Vue3.0]: https://www.bilibili.com/video/BV1zq4y1p7ga