Vue的概述

Vue

一.概述

【1】vue是什么？

• 第三方开发的
• 基于MVVM设计模式的
• 渐进式的：可以逐步在项目中使用vue技术，可以和其他技术混搭
• 纯前端：单靠浏览器就可以运行，不需要任何后端技术
• js框架：可以自动化的完成大部分重复的劳动，提高开发效率

【2】何时使用

以数据操作（增删改查）为主的项目，可以使用vue框架开发

比如: 饿了么，每天，大众点评，淘宝，京东，今日头条，微博，网易云音乐，小红书，知乎，自如，链家，携程，去哪儿…

不是以数据操作为主: 大型游戏，微信/qq（即时通信），抖音，爱奇艺

【3】如何使用

i：下载vue.js文件，引入网页中使用

版本：

​ 开发版：未压缩版，有完备的注释、代码格式以及见名知意的变量名，还包含友好的错误提示；可读性比较好，体积大

​ 生产版：压缩版，去掉了所有数值和代码格式，极简化了变量名，去掉了友好的错误提示；体积小，是和生产环境快速下载运行

ii：使用脚手架工具

​ 脚手架是一套已经包含核心功能的标准的半成品项目文件和文件夹结构

​ 标准，便于大项目的标准化和分工协作

【4】vue的3步

1. 首先是界面

i：界面中的所有元素都必须包裹在一个唯一的父元素下，习惯上是< div id="app"></ div>

ii：在界面中将来可能随程序自动变化的位置，用专门的语法：{{变量名}}来标记站位

iii：找到界面中将来可能触发事件的元素，用专门的语法：@事件名:="事件处理函数名" 来标记

​ 2.创建new Vue()对象，来监控div所包含的区域

  new Vue({
   el:"#app",
     //创建模型对象,来保存界面中所需的所有变量和事件处理函数
     //.1先创建一个data:{}来保存界面中所需的所有变量和初始值
   data:{},
     //.2再创建一个methods:{}来保存界面中所需的所有事件处理函数
   methods:{
    方法名(){}
   }
  })

注意：

methods中的事件处理函数中，如果要操作data中的变量，必须加this.

methods中的事件处理函数中，根本不用考虑如何从界面取值，也不用考虑如何将新值放回界面，只需要专门考虑如何把data中的变量值修改正确即可！

二.MVVM设计模式

【1】之前旧的前端代码分为三大部分

HTML：专门定义网页的内容和结构

CSS：专门为网页添加样式

JS：专门操作网页中的内容，为页面添加交互行为

在其中，有一些问题，html和css的功能太弱了，连程序最基本的元素（变量、判断、循环）都不支持，js中存在大量重复和冗余的工作

【2】MVVM设计模式组成

MVVM设计模式对前端三大代码重新划分

• 界面View

包含以前的HTML和CSSh，是增强版，让html也支持变量、判断、循环等

• 模型对象Model

专门保存页面中所需的变量和函数的特殊对象

包括2个：

i：data:{} 专门保存界面中所需的所有变量

ii：methods:{} 专门保存界面中所需的所有函数

• 视图模型ViewModel

专门负责将模型对象中的变量和函数，自动运送到界面中指定位置的特殊对象

作用：可自动将数据中的变量和函数运送到界面中所需的位置，并且还能自动保持界面显示与程序中的数据同步

【3】vue的绑定原理

即是vue框架如何实现MVVM设计模式

(1). 访问器属性
a. new Vue()将data:{}引入到new Vue()中时，先将data对象及其内部的内容全部隐姓埋名。

b. new Vue()会自动为data中每个变量创建访问器属性，监视对每个变量的修改操作。访问器属性不再隶属于data对象，而是直接隶属于new Vue()

c. 将来，只要在程序中修改变量，都会自动调用访问器属性的set()函数。

d. set()函数中提前安插了一个通知函数()。可通知外部，哪个变量值发生了变化。

e. methods中所有的函数，进入new Vue()后，methods对象就被打散，原methods中所有函数直接隶属于new

Vue()对象了。

f. 所以，methods中的函数和data中的变量，最终会平级保存，都直接隶属于new Vue()。所以，methods中的

函数，想操作data中的变量，必须加this。

(2). 虚拟DOM树

a. 什么是: 专门保存界面中所有可能发生变化的元素的简化版DOM树。

b. 何时创建:

​ 1). new Vue()的第二大步，在创建完data和methods之后，根据el属性值的选择器所指的元素，去扫描界面中指定区域的元素。

​ 2). 一边扫描真实DOM树，一边就创建虚拟DOM树，只保存可能发生变化的元素。

c. 将来

​ 1). 只要在程序中修改了变量值，就会自动触发访问器属性的set()，就会自动执行set()中的通知函数。通知函数()通知虚拟DOM树，哪个变量发生了变化。

​ 2). 虚拟DOM树扫描自己内部保存的所有可能发生变化的元素，只找出受本次变量修改影响的元素。

​ 3). 可以用提前封装好的DOM操作，将变量的新值，自动修改回页面中显示。

d. 虚拟DOM树的优点: 4大优点:

​ 1). 小: 只保存可能变化的个别元素

​ 2). 快: 因为保存的元素少，所以每次遍历查找受影响的元素时，比遍历原始DOM树，快的多！

​ 3). 修改效率高: 因为每次只修改受影响的个别元素。不受影响的元素是不会改变的！

​ 4). 避免重复: 因为虚拟DOM树中已经封装了DOM的增删改查+事件绑定操作。所以，不用我们再手工查找、手工修改。都是自动完成的！

【5】绑定语法

学名：差值语法 Interpolation

i：在界面中标记可能发生变化的元素内容的特殊语法

ii：何时使用：发现一个元素的内容可能随程序自动改变，就使用绑定语法来标记

iii：怎样使用：<元素>xxxx{{自定义变量名}}xxx</元素>

vi：{{}}可以与其他写死的文本内容混搭，原理与模板字符串中的${}是完全一样

(1). 可以放: 一切有返回值的合法的js变量或表达式

​ 比如: 变量，三目，算术计算，访问数组元素，创建对象，调用函数

(2). 不能放: 分支、循环以及没有返回值的js表达式