前端笔记-VUE （2019-10-09）

为什么要学习vue？

在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或js来添加各种 特效和功 能，需要选中每一个元素进行操作，这些操作在简单项目中或者不变的项目还能应付得来。可是 一旦项目改动或者项目工程较大，代码的修改将是复杂繁琐的，

而使用Vue可以让web开发变得更加简单，上面这些问题也不复存在，并且会大大缩减我们的工作量，同时颠覆了传统前端开发模式，提供了现代web开发里常见的高级功能。
企业中，使用框架，能够提高开发的效率，增强自己就业时候的竞争力

提高开发效率的发展历程：

那么什么是vue 呢？

Vue (读音 /vjuː/，读音类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue.js 是目前最火的一个前端框架，是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

Vue.js 是一套构建用户界面的框架，只关注数据层

什么是框架呢 ？ 框架和库的区别呢？

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
例如：node 的 express框架

库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求.
例如：jQuery、 Zepot—移动端（0.4s延迟）等

区别 ：框架对项目侵入性较大， 库对项目的侵入性较小

前端的三大框架分别是什么呢？ 他们的优缺点是什么？

前端的三大框架分别是VUE 、 Angular 、React

（1）vue.js

优点：更轻量，单页面，简单易学
缺点：不支持IE8
开发团队：中国国内团队开发，作者：尤雨溪

（2）Angular

优点：完善的框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能
缺点：比较笨重，学习成本高，不兼容IE6/7
开发团队：google(谷歌)

（3）react

. 优点：速度快、跨浏览器兼容、单向数据流、兼容性好
缺点：并不是一个完整的框架，需要加上ReactRouter和Flux才能完成（目前百度阿里等企业已经开始弃用）
开发团队：facebook脸书

三种架构模式/开发模式

vue 的架构模式有三种 分别是MVVM、MVC、MVP
1.MVC （Model View Controller 模型视图控制器）
本质：是一种软件设计典范。M是指业务模型，V是指用户界面，C则是控制器。
①视图是用户看到并与之交互的界面；②模型表示企业数据和业务规则（可以说就是后端接口，用于业务处理）；③控制器接受用户的输入并调用模型和视图去完成用户的需求

（1）用户首先在界面中进行人机交互，然后请求发送到控制器
（2）控制器根据请求类型和请求的指令发送到相应的模型
（3）模型可以与数据库进行交互，进行增删改查操作
（4）操作完成之后，在相应的视图进行显示，此时用户获得此次交互的反馈信息，用户可以进行下一步交互，如此循环。

2）MVP （Model-View-Presenter 模型视图逻辑）
由来：MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑处理，Model提供数据，View负责显示。
①Presenter：作为model和view的中间人，从model层获取数据之后传给view，使得View和model没有耦合；②总得来说MVP的好处就是解除view与model的耦合，使得view或model有更强的复用性。

（3）MVVM(Model-View-ViewModel 模型视图 视图模型)
：mvvm即Model-View-ViewModel
原理：mvvm的设计原理是基于mvc的，所以说mvvm不算是一种创新，充其量是一种改造，这其中的ViewModel便是一个小小的创新;
MVVM是前端视图层的概念，主要关注于 视图层分离；也就是说：MVVM把前端的视图层，分为了 三部分Model, View , VM(ViewModel)

MVVM它是数据驱动模式，即所有的一切通过操作数据来进行，而尽量避免操作dom树换句话说，我们不关注dom的结构，而是考虑数据该如何储存，用户的操作在view通过viewmodel进行数据处理，分情况是否通过ajax与model层进行交互，再返回到view层，在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对dom的繁琐操作，而是专心于对用户的操作进行处理，避免了MVC中control层过厚的问题。

JQuery采用的是MVC的设计模式
而vue采用的MVVM设计模式

VUE的使用与安装

安装

前期的基础学习阶段我们可以去百度搜索vue.js 找到它的官网去下载

使用

把我们下载好的vue文件放在我们的项目中

在html中用script标签引用

做好以上操作就可以使用我们的vue了

下面开始我们的第一个vue damo

该案例展示了Vue.js最核心的功能：数据的双向绑定。

Vue应用的创建十分简单，通过构造函数Vue即可创建Vue根实例，并启动Vue应用：

步骤

①创建根实例
将Vue实例绑定到变量vue，事实上所有代码都是一个对象，写入Vue实例的选项的。Vue()构造函数的参数是一个键值对，内部包含vue实例的各个选项。
②挂载根实例到元素上
首先第一个选项是el（element），用于指定页面中的DOM来挂载Vue实例，可以是HTMLElement或者CSS选择器。

③绑定数据
data选项：设置实例中的数据，通过Vue实例的data选项，可以声明应用里需要双向绑定的数据，建议所有用到的数据预先在data里声明，不要散落在业务逻辑里，后期难以维护。
声明数据分两种：
1.显式声明数据
2.指向已有变量

文本差值

语法格式：{{Vue实例数据变量}}
特性：文本插值是双向绑定的，改变Vue实例数据变量的值，页面中文本插值的部分会重新渲染。
特性：文本插值也可以进行基本运算和对象方法的执行

所以我们也可以称文本插值为差值表达式

vue基本指令

指令是Vue.js模板里最常用的一项功能，带有v-前缀。
职责：当其表达式的值发生改变时，相应的将某些行为作用到DOM上。
常用基本指令：
（1）v-html原始HTML：取值为一个带有HTML标记代码的变量，该指令会将变量中的HTML代码翻译为最终的显示效果。

②v-once一次性绑定修饰符：该指令无需取值，让双向绑定变为单向绑定，直接添加到开始标签即可。

③v-pre跳跃编译修饰符：该指令无需取值，跳过文本插值的编译过程，显示文本原样。即跳过这个元素和它的子元素的编译过程，用来显示原始 Mustache 标签。

④v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。

⑤v-on事件绑定—>监听DOM事件
语法格式：v-on:eventTypeName=“functionName”
上面是事件函数调用，接下来定义函数，注意：事件处理函数必须书写在Vue实例的methods选项下

语法糖

Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了语法糖，也可以说是特定简写。

①v-bind:可以省略v-bind，直接写一个冒号：

②v-on:可以省略v-on，直接写一个@

以上就是今天所学 整理完毕