Vue

Vue (读音 /vjuː/，读音类似于 view) 是一套用于构建用户界面的渐进式框架。

通俗理解：抛开官方说法，简单来说，在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或js来添加各种特效功能，需要选中每一个元素进行操作，这些内容在简单项目中或者不变的项目还能应付得来。一旦项目改动或者项目工程较大，代码的修改将是复杂繁琐的，而这时候用了vue，这些问题都不复存在，应用了vue之后将大大缩减工作量.

架构模式/开发模式分为3种分别为MVVM、MVC、MVP。

（1）MVC全名：Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写。
本质：是一种软件设计典范。M是指业务模型，V是指用户界面，C则是控制器。
①视图是用户看到并与之交互的界面；②模型表示企业数据和业务规则（可以说就是后端接口，用于业务处理）；③控制器接受用户的输入并调用模型和视图去完成用户的需求
（2）MVP
简称：MVP 全称：Model-View-Presenter
由来：MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑处理，Model提供数据，View负责显示。
①Presenter：作为model和view的中间人，从model层获取数据之后传给view，使得View和model没有耦合；②总得来说MVP的好处就是解除view与model的耦合，使得view或model有更强的复用性。
MVVM
名称：mvvm即Model-View-ViewModel
原理：mvvm的设计原理是基于mvc的，所以说mvvm不算是一种创新，充其量是一种改造，这其中的ViewModel便是一个小小的创新
（3）MVVM
名称：mvvm即Model-View-ViewModel
原理：mvvm的设计原理是基于mvc的，所以说mvvm不算是一种创新，充其量是一种改造，这其中的ViewModel便是一个小小的创新

实例与数据绑定

①创建根实例
将Vue实例绑定到变量app，事实上所有代码都是一个对象，写入Vue实例的选项的。Vue()构造函数的参数是一个键值对，内部包含app实例的各个选项。
Vue
②挂载根实例到元素上
首先第一个选项是el（element），用于指定页面中的DOM来挂载Vue实例，可以是HTMLElement或者CSS选择器。
Vue
③绑定数据
③绑定数据
data选项：设置实例中的数据，通过Vue实例的data选项，可以声明应用里需要双向绑定的数据，建议所有用到的数据预先在data里声明，不要散落在业务逻辑里，后期难以维护。
声明数据分两种：1.显式声明数据
Vue 声明数据分两种：2.指向已有变量
此时两者会默认建立双向绑定，当修改其中一个时，另一个也会一起变化。
Vue

Vue实例属性

1、Vue实例就是app，Vue实例属性就是app的属性。
2、所有的选项前面加上$都是Vue实例的属性。
$el：表示在Vue实例上挂载的DOM对象属性。 app.$ el === document.getElementById(“app”) //true
3、 $data：表示在Vue实例上挂载的数据属性。 Vue实例代理了data选项中的所有属性：获取属性 app.message app.$ data.age=== app.age//true
语法格式：{{Vue实例数据变量}}

模板-基本指令

常用基本指令：
（1）v-html原始HTML：取值为一个带有HTML标记代码的变量，该指令会将变量中的HTML代码翻译为最终的显示效果。
Vue
②v-once一次性绑定修饰符：该指令无需取值，让双向绑定变为单向绑定，直接添加到开始标签即可。
③v-pre跳跃编译修饰符：该指令无需取值，跳过文本插值的编译过程，显示文本原样。即跳过这个元素和它的子元素的编译过程，用来显示原始 Mustache 标签。
Vue
④v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。
Vue
⑤v-on事件绑定—>监听DOM事件
语法格式：v-on:eventTypeName=“functionName”
上面是事件函数调用，接下来定义函数，注意：事件处理函数必须书写在Vue实例的methods选项下
案例1：点击弹框
Vue