什么是Vue
- 第三方开发的:可以直接下载使用的
- 基于MVVM设计模式的
- 渐进式的:学习多少就可以用多少,容易与其他技术混搭,但是依然强烈不建议将VUE框架和旧的技术混搭
- 纯前端:只靠浏览器就可以运行，不需要nodejs相关的知识
- js框架:可以自动化地帮助人们完成很多重复性的劳动的半成品项目
比较使用JS和Vue
案例 :点击按钮实现加减
使用Jquery实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<button id="btnMinus">-</button>
<span>0</span>
<button id="btnAdd">+</button>
<script>
//先实现+
//DOM 4步
//1. 查找触发事件的元素
$("#btnAdd")
//2. 绑定事件处理函数
.click(function(){
//3. 查找要修改的
var $span=$("span");
//4. 修改元素
//4.1 先取出span中现在的数量，转为整数
var n=parseInt($span.html());
//4.2 将n+1
n++;
//4.3 将新的n再放回去:
$span.html(n);
});
//再实现-
//DOM 4步
//1. 查找触发事件的元素
$("#btnMinus")
//2. 绑定事件处理函数
.click(function(){
//3. 查找要修改的
var $span=$("span");
//4. 修改元素
//4.1 先取出span中现在的数量，转为整数
var n=parseInt($span.html());
//4.2 如果n>0，才能n-1
if(n>0){ n-- }
//4.3 将新的n再放回去:
$span.html(n);
});
</script>
</body>
</html>
如何使用Vue
- 官网: cn.vuejs.org,在官网下载Vue.js包
- 方式一:像jq一样，将Vue.js文件下载到项目本地，在网页中用<script>引入
- 方式二:脚手架方式
- a什么是脚手架: 已经包含核心功能的标准化的半成品项目结构
- 好处: 任何人创建出的项目结构和文件夹名几乎完全一样！极其便于分工协作开发和技术的流行
- 问题: 文件夹结构比较复杂，且技术非常综合，所以不适合初学者入门之用！
- 公司中都是用脚手架开发的
使用Vue实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--先引入vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<!--VUE 3步-->
<!--1. 先做界面
1.1 统一的要求: 界面中所有元素，都必须包裹在一个唯一的父元素下，习惯上<div id="app"></div>
1.2 找到界面中将来可能随程序自动变化的位置，用专门的语法:{{变量名}}来标记/占位
本例中, span元素的内容，有可能随程序自动变化，所以用{{n}}来标记
1.3 找到界面中将来可能触发事件的元素，用专门的语法: @事件名="事件处理函数名" 来标记
本例中: 两个按钮都能点击，一个执行的减法操作，一个执行的是加法操作，所以: -->
<div id="app">
<button @click="minus">-</button>
<span>{{n}}</span>
<button @click="add">+</button>
</div>
<script>
//2. 常见一个new Vue()对象，来监控div所包含的区域。vue中，必须用el属性，告诉new Vue()要监控的区域是哪里: (el其实是element的缩写)
new Vue({
// id选择器
el:"#app",
//3. 定义模型对象，来保存界面中所需的所有变量和事件处理函数
//什么是模型对象: 就是专门替界面保存变量和事件处理函数的特殊的对象
//3.1 先创建一个data:{}来保存界面中所需的所有变量和初始值
//本例中: 因为界面中只需要一个变量n，且开局时数量时0，所以data中只需要一个变量n就够了
data:{
n:0
},
//3.2 再创建一个methods:{}来保存界面中所需的所有事件处理函数
//本例中: 因为界面中需要两个事件处理函数minus()和add()，所以
//强调:
//3.2.1 methods中的事件处理函数中，如果要操作data中的变量，必须加this.
//3.2.2 methods中的事件处理函数中，根本不用考虑如何从界面取值，也不用考虑如何将新值放回界面，只需要专门考虑如何把data中的变量值修改正确即可！
//new Vue()会自动保持界面中变量n和data中变量n同步:
//开局时，data中n是几，new Vue()就把n的值送到页面上，对应位置显示给人看
//当methods中修改了n的值，new Vue()会自动把n的新值自动更新到界面中n所在的位置给人看
methods:{
//复习对象方法的简写
// minus:function(){ ... }
minus(){
if(this.n>0){
this.n--
}
},
add(){
this.n++
}
}
})
</script>
</body>
</html>
简单原理
MVVM设计模式
MVVM设计模式的由来
旧的前端代码划分为3部分：
(1). HTML: 定义网页的内容和结构
(2). CSS: 定义网页的样式
(3). JS: 为网页添加交互行为
带来的问题:
- 因为HTML和css功能太弱了！几乎生活不能自理！HTML和CSS连程序基本的变量，函数都不支持！所以，哪怕是很小的需要修改，也必须依靠js来完成。所以，导致js中存在大量重复的步骤。
解决方案:
- MVVM设计模式: 对前端代码的重新划分，分三部分:
(1). 界面(View): HTML+CSS，增强版的:
a. 支持变量，可以实现程序中变化，界面内容自动跟着变
b. 还支持更多程序中的自动化功能: 分支、循环、函数...
(2). 模型对象(Model): 专门替界面保存所有所需的变量和函数的特殊对象
界面上需要什么，模型对象中就保存什么！
(3). 视图模型(ViewModel): 专门自动保持模型对象中的数据与界面中的显示同步的特殊的对象。比如: new Vue()
vue是如何实现数据绑定的: vue的绑定原理
(1). new Vue()对象将data对象引入，然后自动:
a. 隐藏原data中的实际变量
b. 在new Vue()下data外部，自动为每个data中的变量定义访问器属性。而且，还会自动在每个访问器属性的set()函数中安插一个通知函数。
c. 结果:
1). 今后我们使用的任何变量，都不再是原版的data中的变量，其实都是访问器属性。
2). 只要我们试图修改data中的变量时，其实都是修改访问器属性，都会自动触发访问器属性的set方法。此时，就会向外部发出通知，哪个变量的值被改变了！
(2). new Vue()对象将methods对象引入，然后:
a. 打散methods对象，原methods对象中的方法，直接隶属于new Vue()对象了。并且和自动创建的访问器属性平级了
b. 结果: 在methods中的方法中只要想操作data中的变量，都必须加this.
(3). new Vue()对象会按照el属性的指引，找到自己要监控的区域。然后扫描区域中所有元素:
a. new Vue()会只扫描出可能发生变化的元素，集中保存在new Vue()内部的一棵虚拟DOM树上。
b. 每当new Vue()中一个变量被修改时，都会触发变量的set()，都会自动向虚拟DOM发通知
c. 虚拟DOM树接到通知后，扫描虚拟DOM树中所有元素，找到受本次变量修改影响的元素
d. 利用早就提前封装好的DOM增删改查操作，只修改界面中受影响的个别元素。
(4). 总结: VUE的绑定原理=访问器属性+虚拟DOM树
虚拟DOM树的好处: 4个
(1). 小: 只保存可能发生变化的少量元素
(2). 快: 因为保存的元素少，所以遍历查找快
(3). 效率高: 因为只修改受影响的元素。
(4). 避免重复编码: 已经提前封装好了DOM增删改查操作。
MVVM原理图
分享到这里啦
