1.什么是VUE:

VUE是渐进式的基于MVVM设计模式的纯前端JS框架

渐进式: 可以在项目中逐步使用VUE的功能，也可以和其它技术混搭。

vs全家桶:要使用，就必须使用全套所有技术。且不能喝其它技术混搭。

MVVM设计模式: ?

纯前端: nodejs学的不好和vue无关！

框架:原生DOM vs jQuery函数库 vs VUE框架

（1）原生DOM:步骤多，函数繁琐

（2）jQuery函数库: 步骤没少，每个函数都变的很简单

（3）框架:彻底简化了步骤，无需人工干预。

什么是框架:已经是一个半成品的项目，封装了大量重复性劳动。人只要提供个性化定制即可。

注意：VUE只适合于数据操作为主的项目。

还是五件事:增删改查+事件绑定.

2.如何使用:（两种方式）

1.下载并引入vue.js文件: 前2天

2.用脚手架代码: 最后一天讲

版本: 2.5

开发版:未压缩版本 , 有完备的错误提示

生产版:压缩版本 , 删掉了错误提示

3. MVVM设计模式

传统前端划分:

HTML: 专门保存网页内容和结构的文档

CSS: 专门定义网页样式的文档

JS: 为网页添加交互行为

（问题: HTML和CSS不会动态变化）

一切交互都只能靠JS添加。

导致JS中大量重复的代码和重复的步骤。

MVVM模式:

1. 界面View: 增强版的HTML和CSS，可跟据数据自动变化

2. 模型数据Model:集中存储一个页面内的所有变化的数据。

3. 视图模型ViewModel:将View界面和Model模型数据包裹起来，统一管理，自动同步修改。

ViewModel中(new Vue()对象)

包含两大子系统:

1. 响应系统:

将模型数据包裹起来，为每个模型变量自动添加get()和set()保镖。

今后只要修改任何模型变量，都自动经过set()，set()中会触发通知: xx变量变为xx新值

通知会发给虚拟DOM树

2. 虚拟DOM树

什么是:创建new Vue时，通过扫描完整DOM树，仅提取可能变化的元素和属性，组成的一颗及精简的虚拟DOM树。

优点:

1.查找元素快

2. 封装了重复性的增删改查DOM操作

虚拟DOM树接到通知，快速找到受影响的元素。调用已经封装好的DOM函数，仅更新受影响的元素的受影响的属性。

例子：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Welcome</h1>

<button @click="add">click me({{i}})</button>

</div>

//2. 定义数据

var data={

i:0 //将页面中可能变化的数据保存在data对象中统一管理

};

//3. 创建VUE对象，将界面和数据包裹起来

new Vue({//至少两个成员

el:"#app",//找到界面div

data,//data:data//将数据装入VUE

methods:{//所有函数都要放在methods中

add(){//:function(){

this.i++;//将i+1

}

})

</script>

</body>

</html>

1.绑定语法:学名: 插值语法 Interpolation == {{}}

什么是:让HTML可以自动找到程序中的变量的特殊语法

为什么:因为传统的HTML是静态的，缺少动态变化的能力。导致js当中要想操作HTML，需要大量重复的代码。

何时: 只要HTML中某个位置的数据，需要根据程序中的一个变量动态变化！都要用绑定语法！

如何:2步:

1.先找页面中所有可能发生变化的地方有几处

2. 再在模型数据中定义相同数量的变量:

new Vue({

el:"#app",

data:{

变量名:值,

... : ...,

}

})

强调: HTML中有几处变化，data对象中就要有几个变量与之对应。

3.在HTML中，可能发生变化的位置用绑定语法定义变量: {{变量或表达式}}

强调:其实{{}}的用法和模板字符串中${}的用法完全一样！

能写：变量,算术计算，关系/逻辑运算，函数调用, 访问数组元素, 三目——凡是有返回值的js表达式都能

不能: if else while for——都是程序结构，没有返回值！

结果:运行时，HTML中的所有{{}}会自动去data中找同名的变量使用。且内存中的data中的变量值发生变化，HTML中的{{}}的值自动变化！用户最终看到的是{{}}中的变量或者表达式计算后的值！而看不见双花括号——节省了大量重复的查找和修改操作。——多亏了MVVM中的ViewModel中的两大子系统: 响应系统和虚拟DOM树。

2. 指令:

什么是:为HTML添加更多新功能的Vue预置的自定义属性

为什么:因为原来HTML缺少程序必须的功能: 判断/分支结构，循环。。。功能。所以只能依靠js中反复查找，反复修改来控制HTML元素的内容和状态。

1.绑定属性:

什么是: v-bind属性专门动态绑定元素的属性值

为什么: 要绑定属性值，不能用{{}}，只能用v-bind或:简写

何时:只要属性值需要根据变量动态变化时，就要用v-bind或:简写

如何: <img v-bind:src="pm25<100?'img/1.png':

pm25<200?'img/2.png':

pm25<300?'img/3.png':

'img/4.png'">

去{{}}换v-bind:

其实可简写: <img v-bind:src="...

去{{}}换:

2.控制元素的显示隐藏:

1.控制一个元素的显示隐藏: 2种:

1. <ANY v-if="判断条件"

只要条件满足，就显示元素

一旦条件不再满足，就隐藏元素！

2. v-show=

总结:

1.如果元素内容要变化:用 {{}} 绑定

2.如果元素的属性值要变化: 用 :属性名绑定

Vue