每日速递：vue是前端css框架吗

如何快速入门VUE3.0：进入学习

本教程操作环境：windows7系统、vue3版，DELL G3电脑。

vue是什么

(资料图片仅供参考)

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

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue.js 也能驱动复杂的单页应用。

Vue.js的优点

体积小：压缩后只有33k；

更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；

双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；

生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多；

VUE框架原理

Vue对象将页面中 要改变的元素 和 data中变量 进行绑定，绑定后它会一直监听data中变量值的改变，当值发生改变时，会自动找到与其绑定的元素并且让元素跟着发生改变，改变元素的过程不需要人工干预，提高了开发效率，而且这个过程不需要像 JavaScript 那样频繁DOM操作去改变页面结构，只是监听一片区域，提高了执行效率。

Vue.js和MVVM关系:

vue 框架 是基于MVVM设计模式的前端框架，其中的Vue对象是MVVM设计模式中的VM视图模型。

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 ViewModel。ViewModel负责连接 View 和 Model,保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；

View 代表UI 组件，它负责将数据模型转化成UI 展现出来.

ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

开始vue.js的安装

Vue Devtools调试工具的安装:可以在谷歌浏览器安装vue Devtools工具可以更好的审查和调试Vue应用.

Vue.js 官网下载地址：http://vuejs.org/guide/installation.html

根据自己的生产要求来安装对应版本.关于安装vue的方法官网给出了多种多样的方法,这里演示独立版本的安装.

我下载之后的地址：https://vuejs.org/js/vue.js

使用独立版本是直接用script标签导入url即可.Vue会被注册为一个全局变量。

第一个vue实例:

HTML内容就是一个个标签组合而成,不知道的自己查询即可.

标签用来声明HTML文档的编写标准,放在最开头位置,可写可不写.和是中必须有的元素.里面必须有