简单认识一下——VUE

1、Vue简介

一、基本的设计模式

1、基本设计模式之MVC模式

2、基本设计模式之MVP模式

3、基本设计模式之MVVM模式

4、MVVM和MVC对比

MVC：MVC是早期前后端不分离时主要应用的软件设计模式，服务器把较多的控制逻辑放在Controller控制层中，主要是以操作DOM的方式去进行一些数据交互

MVVM：进入前后端分离时代时，MVVM就成了前端的主流设计模式，采用数据劫持+发布订阅模式，通过数据去驱动视图的方式来完成交互，把MVC中Controller里面的一些逻辑放在了客服端上面进行处理，减少了一部分服务器的压力，更加符合前后端负载均衡的设计理念

二、SPA和MPA

1、SPASPA应用：SinglePage APPlication应用，即单页面应用。只有一个主页面的应用，一开始只加载一次js、css等相关资源。所有的内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅刷新局部资源。

2、MPAMPA应用：MultiPage Application应用，即多页面应用。有多个独立的页面的应用，每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新。

3、SPA和MPA对比

三、什么是Vue

1、Vue简介Vue.js专注于视图层，是一个构建数据驱动的web界面的库，Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统，Vue内置的额外方法较少，比如Router、axios等一些额外的功能需要我们自行引入。Vue是 MVVM 模式的 单页面应用

2、Vue的一些基本特性1. 轻量化：生产环境的Vue可以做到才30多KB，这个代码量非常之小，是JQuery生产版本体量的几分之一。2. 数据绑定：非常方便的将JS控制的数据与页面内容进行绑定，省去了我们大量的同步设置环节。3. 指令：我们通过内置指令v-*和一些自定义的指令来实现我们要实现的业务功能。4. 方便拓展：虽说我们vue内置方法不多，但是可以很方便地去引入一些其他的组件库。-

2、Vue核心

1、使用Vue1. 安装Vue官方推荐的调试工具 [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools)

2. 使用cdn引入Vue，或者是把源码下载下来然后引入。

二、Vue的实例创建和插值语法

每一个Vue应用都是通过用Vue函数创建一个新的Vue实例

<u>**el：绑定的元素**</u>

<u>**data：绑定的数据对象**</u>

文本插值是最基本的形式，使用双大括号**<u>{{}}</u>**（**Mustache语法糖**）

例子中的标签{{msg}}将会被相应的数据对象msg属性的值替换掉，当msg的值改变时，文本中的值也会联动地发生变化。

2.1 Vue的表达式插值

Mustache语法糖也接受表达式形式的值，表达式可以由JavaScript表达式构成。表达式是各种数值、变量、运算符的综合体。简单的表达式可以是常量或者变量的名称。表达式的值是其运算结果。

三、Vue数据绑定的方式

1. 单向数据绑定（v-bind）：**数据只能从data中流向页面

2. 双向数据绑定（v-model）：数据不仅可以从data流向页面，还可以从页面流向data 注：

2.1、双向数据绑定一般应用在表单类元素上

2.2、v-model:value 可以简写为 v-model，因为v-model默认采集的就是value值