什么是VUE

什么是VUE:

(1). 第三方开发的: 必须下载才能用

(2). 基于MVVM设计模式的: ?

(3). 渐进式的: 可以逐步在项目中使用vue技术，可以和其它技术混搭。

(4). 纯前端: 单靠浏览器就可以运行，不需要任何后端技术。

(5). js框架: 可以自动化的完成大部分重复的劳动，提高开发效率。

为什么用:

简单！避免重复劳动

何时用:

今后，只要以数据操作(增删改查)为主的项目，都可以由vue框架开发

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

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

如何使用VUE

官网:

cn.vuejs.org

下载: 2种:

只下载一个vue.js文件，引入网页使用: 4天

a. 版本: 旧项目都用2.x做，新项目都用3.x

开发版: (未压缩版)有完备的注释、代码格式，以及见名知意的变量名。还包含极其友好的错误提示。

可读性好，适合学习和开发之用

体积大，不适合生产环境快速下载运行

生产版: (压缩版)去掉了所有数值和代码格式，极简化了变量名。去掉了友好的错误提示。

体积小，适合生产环境快速下载运行

可读性差，不适合学习和开发之用。

b. 问题: 随着前端项目的规模越来越大，文件数量越来越多，如果还是零散的随意的管理大量的文件——没有标准，极其不便于大项目的写作。

c. 因为单纯，所以适合初学者快速上手学习某一项技能！

使用vue脚手架工具: 后4天

a. 什么是: 一套已经包含核心功能的标准的半成品项目文件和文件夹结构。

b. 为什么: 标准！

c. 何时: 今后，企业中开发，都是基于脚手架基础上开发的。

d. 优点: 便于大项目的标准化和分工协作。

e. 但是: 在脚手架中开发，每做一个功能，都需要综合用到很多知识。如果基础不扎实，进入脚手架，寸步难行！

第一个vue程序:

MVVM

1.旧的前端代码分为三大部分:

HTML:专门定义网页的内容和结构
CSS: 专门为网页添加样式
js: 专门操作网页中的内容，为页面添加交互行为

2.问题:

HTML和CSS功能太弱了！连程序最基本的因素(变量、判断、循环)都不支持！——生活不能自理
导致，哪怕很小的修改，都要麻烦JS来操作。导致，js中存在大量重复和冗余的工作。

3.解决: MVVM设计模式:

3.1什么是:

对前端三大代码的重新划分:

3.2三部分:

3.2.1界面(View):

包含以前的HTML+CSS
增强版: 让HTML也支持变量、判断、循环——HTML初步生活可以自理！

3.2.2模型对象(Model):

什么是: 专门保存页面中所需的变量和函数的特殊对象
包含2个:

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

ii. methods:{} 专门保存界面中所需的所有函数
问题: 模型对象中的变量和函数，不会自己长腿跑到页面上

3.2.3视图模型(ViewModel)

什么是: 专门负责将模型对象中的变量和函数，自动运送到界面中指定位置的特殊对象。——快递小哥
作用: 可自动将程序中的变量和函数运送到界面中所需的位置。并且，还能自动保持界面显示与程序中的数据同步。

4.vue框架如何实现MVVM设计模式: vue的绑定原理

4.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。

4.2虚拟DOM树

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

b. 何时创建:

new Vue()的第二大步，在创建完data和methods之后，根据el属性值的选择器所指的元素，去扫描界面中指定区域的元素。
一边扫描真实DOM树，一边就创建虚拟DOM树，只保存可能发生变化的元素。

c. 将来

只要在程序中修改了变量值，就会自动触发访问器属性的set()，就会自动执行set()中的通知函数。通知函数()通知虚拟DOM树，哪个变量发生了变化。
虚拟DOM树扫描自己内部保存的所有可能发生变化的元素，只找出受本次变量修改影响的元素。
可以用提前封装好的DOM操作，将变量的新值，自动修改回页面中显示。

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

内容少: 只保存可能变化的个别元素
遍历查找快: 因为保存的元素少，所以每次遍历查找受影响的元素时，比遍历原始DOM树，快的多！
修改效率高: 因为每次只修改受影响的个别元素。不受影响的元素是不会改变的！
避免重复: 因为虚拟DOM树中已经封装了DOM的增删改查+事件绑定操作。所以，不用我们再手工查找、手工修改。都是自动完成的！

绑定语法:

学名: 插值语法 Interpolation

1.什么是:

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

2.何时:

今后，只要发现一个元素的内容可能随程序自动改变时，都要用绑定语法来标记

3.如何:

<元素>xxxx{{自定义变量名}}xxx</元素>

4.{{}}可以和其它写死的文本内容混搭

5.{{}}中: 原理和模板字符串中的${}完全一样的！

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

比如: 变量，三目，算术计算，访问数组元素，创建对象，调用函数
不能放: 分支、循环以及没有返回值的js表达式

6.示例: 使用{{}}显示隐藏不同数据:

{{}}.png

指令(directive):

1.什么是指令:

专门给HTML元素添加新功能的特殊HTML属性

2.包括: 13种

2.1v-bind:

a. 问题: 如果元素的属性值可能随程序自动变化，则不能用{{}}绑定。

b. 解决: 今后，只要元素的属性值有可能随程序自动变化，都可以用v-bind指令代替{{}}绑定属性值

c. 如何: <元素 v-bind:属性名="js变量或表达式">

d. 简写: <元素 :属性名="js变量或表达式">

e. 原理: new Vue()在扫描页面时，只要发现:开头的属性，都会先自动计算=右边的js变量或表达式的值。然后，将变量或表达式的值作为当前属性的属性值。

f. 强调: 加了:，就不要再加{{}}了！加了:，=右边的""就起到了{{}}的作用！""中也可以写一切有返回值的js变量和表达式。

g. 示例: 根据pm2.5数值，显示不同表情:

2.2v-show:

a. 什么是: 专门控制一个元素显示隐藏的特殊指令

b. 何时: 只要用程序控制一个元素的显示隐藏时，都用v-show。

c. 如何:

<元素  v-show="bool类型的变量或判断条件">

d. 原理: 只要new Vue()扫描到v-show，就会先计算=右边的判断条件的值:

如果=右边的判断条件值为true，则v-show什么也不做，当前元素默认显示
如果=右边的判断条件值为false，则v-show自动被翻译为style="display:none"，当前元素就隐藏。

e. 示例: 打开和关闭对话框:

2.3v-if, v-else:

a. 什么是: 专门控制两个元素二选一显示的指令

b. 何时: 今后，只要控制两个元素二选一显示，都用v-if和v-else

c. 如何:

  <元素1 v-if="条件1">
  <元素2 v-else>

d. 原理: 每当new Vue()扫描到v-if时，先计算=右边条件变量或表达式的值。

如果v-if等号右边的条件为true，则new Vue()会保留v-if所在元素。删除v-else所在元素
如果v-if等号右边的条件为false，则new Vue()会先删除v-if所在的元素，保留v-else所在的元素。

e. 强调:

v-if和v-else两个元素之间必须紧挨着写，不能插入其他元素。
v-else后不要写=xxx (和程序中else后一样要求)
界面是舞台，可能变化的元素是演员，虚拟DOM树是后台，演员统一都在后台候场（两个元素都还在DOM树中），

f. v-show和v-if的差别:

v-show，用display:none来隐藏元素
v-if和v-else是通过添加删除元素方式来控制元素显示隐藏。

g. 示例: 切换用户登录状态:

2.4v-else-if

a. 什么是: 专门和v-if和v-else一起控制多个元素多选一显示隐藏

b. 何时: 今后，只要控制多个元素多选一显示隐藏时，都用v-else-if

c. 如何:

<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
<元素3 v-else-if="条件3">
... ...
<元素n v-else>

d. 原理: 当new Vue()扫描到v-if时，先计算v-if后的条件:

如果v-if条件为true，则保留v-if所在元素，删除其余v-else-if、v-else元素
如果v-if条件为false，则先删除v-if所在元素，然后，继续计算每个v-else-if后的条件。如果任意一个v-else-if的条件为true，则只保留着一个v-else-if所在元素，删除其余v-if、v-else-if和v-else元素
如果所有v-if和v-else-if的条件都不满足，则只保留v-else，删除其余v-if和v-else-if的元素
强调: v-if和v-else-if和v-else必须紧挨着写，中间不能插入其他元素。

e. 示例: 使用v-else-if实现根据pm2.5数值不同显示不同的表情

2.5v-for:

a. 什么是: 专门在网页中根据一个数组或对象的成员，连续生成多个结构相同，内容不同的一组html元素的特殊指令

b. 何时: 今后，只要连续生成一组结构相同，但是内容不同的HTML元素时，都用v-for批量生成

c. 如何:

<要反复生成的元素 v-for="(元素值, 下标) of 数组或对象">

d. 强调: vue中v-for统一了js中的for in和for of的功能。vue中的v-for既可以遍历索引数组，又可以遍历对象

e. 原理: 每当new Vue()扫描到v-for时

先遍历数组或对象中每个成员
每遍历一个成员:

i. 取出当前成员的属性名和属性值，将属性值交给of前的()中第一个变量，将属性名/下标交给of前的()中第二各变量
```
 ii. 同时，还会自动创建当前v-for所在元素的一个新副本。数组或对象包含几个成员，v-for就会反复创建几个HTML元素副本。
```
of前的两个变量，虽然没有在new Vue()的data中的定义，但是，却可以在v-for所在元素及其子元素范围内用于绑定语法和指令！

f. vue2的问题: 都是由访问器属性的问题引起的。

问题1. 在vue2中使用下标修改数组中的元素值，无法自动更新页面。——new Vue()不会对数字下标的元素添加访问器属性。所以，所有数字下标的元素都不受监控！

有办法解决: 尽量用数组家的API代替下标修改数组元素

比如: vm.arr[1]="涛涛" //错误！
应改为: vm.arr.splice(1,1,"涛涛") //替换
//删除1位置的1个元素
//在1位置插入一个新元素涛涛

问题2. 只有开局时就有的成员才受监控，后来新加入的成员也不受监控！

因为: new VUE()只有在首次加载对象时，才给对象中每个属性自动创建访问器属性。但是，后来强行添加的新成员，就无法获得访问器属性了！

g. 解决: vue3中，以上两个问题都得到了完美解决(未完待续...)

h. v-for的问题: 即使只修改了数组或对象中一个成员的值，v-for默认也会删除所有元素副本，重新遍历，重新创建HTML元素副本。——效率极低！

原因: v-for生成的多个HTML元素副本，除了内容不同之外，元素本身没有任何差别，所以v-for每次只能删除所有HTML副本，再重建整个列表。

i. 解决: vue规定，今后，只要使用v-for都必须同时绑定一个专门的属性: :key="不重复的值"

比如:

<li v-for="(元素值, i) of arr" :key="i">

g. 结果: 从此，v-for反复生成的每个HTML元素上，都有一个唯一的key="值"。v-for就可以通过key属性值来鉴别每个HTML元素副本不同。修改时，只要修改某一个key的元素即可！不用重建整个列表。

k. v-for为什么必须加key3句话:

为每个元素添加唯一标识

避免重建整个列表

提高修改的效率

l. 示例: 根据数组或对象的内容反复生成多个元素

vue2的问题1.png

vue2的问题2.png

vue2的问题3.png

m. v-for还会数数:

何时: 只要希望反复生成指定数量的相同结构元素副本时
如何: <元素 v-for="i of n" :key="i">
原理: v-for默认从1开始数数，数到n结束。每数一个数，就自动创建当前元素的一个副本
示例: 根据页数生成分页按钮:

常见错误: Error compiling template : 模板编译错误

通常因为HTML中所写的HTML标签或绑定语法不符合vue的要求了！

进一步确定出错的位置:

沿控制台左侧向下找，跳过大片的HTML代码，找到一个很短的"-"，这里标记的就是出错的位置！

附加：

不加的影响：

this 8种:

一定不要看定义在哪儿，只看在哪里调用，如何调用

1.obj.fun() this->obj

2.new Fun() this->new正在创建的子对象

3.类型名.prototype.共有方法=function(){ ... }

this->将来调用这个共有方法的.前的子对象

4.fun() 和 (function(){ })() 和回调函数中的this->window

5.访问器属性中的this，指访问器属性所在的当前对象。

6.DOM和jQuery事件处理函数中的this->当前正在触发事件的这个元素对象

7.jQuery.prototype.自定义函数=function(){

… this指将来调用这个自定义函数的点前的一个jq子对象 …

}

8.VUE中的this都指当前vue对象或当前组件对象。

vue-01:vue的初识及指令

什么是VUE

什么是VUE:

为什么用:

何时用:

如何使用VUE

官网:

下载: 2种:

只下载一个vue.js文件，引入网页使用: 4天

使用vue脚手架工具: 后4天

第一个vue程序:

MVVM

1.旧的前端代码分为三大部分:

2.问题:

3.解决: MVVM设计模式:

3.1什么是:

3.2三部分:

3.2.1界面(View):

3.2.2模型对象(Model):

3.2.3视图模型(ViewModel)

4.vue框架如何实现MVVM设计模式: vue的绑定原理

4.1访问器属性

4.2虚拟DOM树

绑定语法:

1.什么是:

2.何时:

3.如何:

4.{{}}可以和其它写死的文本内容混搭

5.{{}}中: 原理和模板字符串中的${}完全一样的！

6.示例: 使用{{}}显示隐藏不同数据:

指令(directive):

1.什么是指令:

2.包括: 13种

2.1v-bind:

2.2v-show:

2.3v-if, v-else:

2.4v-else-if

2.5v-for:

常见错误: Error compiling template : 模板编译错误

附加：

不加的影响：

this 8种: