vue系列：认识vue

vue系列：认识vue

好记性不如烂笔头，学习过程中也要记笔记，方便日后的复习

---

---

一、Vue.js的基本认识

1、Vue是什么？

Vue是一套用于构建用户界面的渐进式框架。

2、主要应用场景

一般用于开发单页面应用程序 Single Page Application, 简 称：SPA）。

单页面应用程序，就是只有一个 html 页面的应用，用户与应用程序交互时动态更新该页面的 web 应用程序，比如手机 App 大多数为SPA, 系统的后台管理系统 。

二、Vue的优点与核心思想

1、Vue的优点

（1）易用：容易上手
（2）灵活：不断繁荣的生态系统，可以在一个库和一套完整框 架之间自如伸缩。——渐进式框架的体现
（3）高效：文件本身很小，有超快的虚拟DOM

为什么虚拟DOM就是高效？
因为他不用全部渲染，只需要渲染变化的部分
在Vue中,通过在内存中生成与真实 DOM 与之对应的数据结构（虚拟 DOM），当页面发生变化时，通过新的虚拟 DOM 树与旧的虚拟 DOM 树进 行比对，就能很快的找出差异点，从而只渲染变化的部分。

VUE1.0 是没有虚拟 DOM 的

2、vue.js的核心思想

（1）数据驱动：dom 的渲染、显示、隐藏，均由数据的状态控制。
（2）组件化： 通过扩展 html 元素，封装可重复用的一个代码。

三、MVVM 框架理解

Vue 并没有完全遵守 MVVM 框架（官网自己说的），但是一般我们认为它是 MVVM 框架

1、MVC（Model-View-Controller）

MVC是一种表现模式，它将软件的 UI 部分的设计拆分成三个主要单元，分别是 Model、View 和 Controller。

MVC 核心是控制器，它负责处理浏览器传送过来的所有请求，并决定要将什么内容响应给浏 览器。

Model：模型，用于存储数据的组件；
View：视图，根据 Model 数据进行内容展示的组件；
Controller：控制器，接受并处理用户指令，并返回内容

2、MVVM（Model-View-ViewModel）

MVVM 的核心是 ViewModel，它提供了对于 Model 和 View 的双向数据绑定，通过 ViewModel 连接 View 和 Model,确保视图与数据的一致性,而这个过程是框架自动完成的（交给 Vue）,无需手 动干预

M（model）：普通的 javascript 数据对象，也就是数据部分
V（view）：前端展示页面，也就是 DOM 元素 VM（ViewModel）：用于双向绑定数据与页面

MVVM：当改变 view 中的数据，Model 中的数据也改变，Model 数据改变，view 数据也改变

MVVM是响应式编程模型，避免直接操作 DOM , 降低 DOM 操作的复杂性。

四、用npm命令方式下载引入vue.js

使用时通过 script 标签引用 Vue.js，,当然这里src里面的vue.js,是你要引入的vue.js的名字。
引入之前，我们要先下载好 Vue.js 文件
（1）用npm命令方式下载
进入项目所在的文件夹，输入cmd,其中命令输入npm install vue 回车即可

注意：以下我并未运行，需要大家自己回车运行

前面是项目所在文件，后面是入 cnpm install vue命令

打开vs code 找到控制台，也和以上打开了cmd是一样的效果

在文件中找到即可

（2）在官网下载直接下载

---

总结

本人的学习笔记，为了方便日后回顾，也可供大家参考，如果有错误的地方，还请各位指出。谢谢！！！