Vue学习笔记（一）：Vue简介

1. vue简介¶

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

这段话是vue官方文档上对vue的说明，突出说明vue渐进式框架的特点，保证了vue的灵活性。另外，vue采用组件化模式，提高代码复用率、且让代码更好维护，同时使用声明式编码，让编码人员无需直接操作DOM，提高开发效率。总结而言，之所以选择vue，是因为vue的如下优势：

• 易用：vue学习曲线平缓，api简介，相比于react更加容易上手。
• 灵活：对于一个现成的服务端框架，vue可以作为其中的一部分嵌入，带来更加丰富的交互系统；且对于前端业务逻辑复杂的情况，vue的核心库及其生态系统也可以满足你的各式需求，vue允许将网页分割成可复用的组件，每个组件都可以包含自身的html,css,js文件，以用来渲染网页中相应的地方。
• 高效：vue中采用了虚拟DOM的机制，减少真实DOM的频繁修改，一定程度上提升程序性能。
• 社区和第三方组件库丰富。vue有着强大社区和丰富的第三方组件库作为支撑，包括社区论坛（https://forum.vuejs.org/） - 提问答疑的最好地方、Gitter（https://gitter.im/vuejs/vue） - 开发者聊天室、Github（https://github.com/vuejs） - 报告问题，提交请求以及强大成熟的前端组件库element-ui。

2. 安装¶

2.1 vue安装¶

2.1.1 直接用 引入¶

vue分为开发版本和生产版本，开版本包含完成的警告和调试模式，适合研发过程使用，生产版本为提高安全性和效率则删除警告信息，下载方式如下：

• 开发版本： https://cn.vuejs.org/js/vue.js

• 生产版本： https://cn.vuejs.org/js/vue.min.js

使用开发版本是，控制台会出现如下提示，在html文件scritp标签中添加“Vue.config.productionTip = false”,同时安装下文中的vue插件，可以去除提示。

Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

下载完成后可以使用 script标签引入，Vue 会被注册为一个全局变量。

2.1.2 使用 CDN 方法¶

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，建议先下载到本地。

• Staticfile CDN（国内） : https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js

• unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

可以在https://cdn.jsdelivr.net/npm/vue/中浏览 NPM 包的源代码，注意：在生产环境下，最好使用例如@2.6.14的方式明确版本，以避免新版本造成的不可预测问题，另外还需把 vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。

2.2 浏览器插件安装¶

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。在谷歌浏览器应用商店中搜索“vue.js”，然后在搜索结果中安装“Vue.js devtools”。

3. 设计理念¶

• MVVM架构

MVVM是Model-View-ViewModel 的缩写，由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

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

• 响应式数据绑定

当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。

• 组合的视图组件

即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。