一.Vue
1.什么是vue
第三方开发的基于MVVM设计模式的渐进式的纯前端js框架
(1). 第三方开发: 下载 cn.vuejs.org
(2). 基于MVVM设计模式? 待定
(3). 渐进式: 可以逐步在项目中引入vue的功能。不必整个项目通篇使用vue。
(4). 纯前端js: 无需任何后端知识和技术，vue就可在客户端浏览器中独立使用和运行！
(5). 框架: 已经包含核心功能的半成品代码
2.为什么使用框架
简单——避免大量重复的代码！
3.何时使用Vue
只要以数据操作（增删改查）为主的前端项目，都可用框架开发！
二.如何使用vue
1.下载 2种
(1). 只下载一个独立的vue.js文件，引入网页中使用——只适合于初学者(2天半)
最高版本: 2.6
开发版: 具有完备的注释、代码格式和见名知义的变量名
带有极其友好的错误提示！便于调试！
可读性好，用于开发和学习之用
体积大，下载慢，不便于生产环境(项目开发测试完，上线之后)使用
生产版: 删除一切注释和代码格式，极简化了变量名
删除了错误提示，不便于调试！
体积小，下载快，用于生产环境中
可读性差，不适合于开发和学习之用
(2). 下载vue项目的脚手架代码——企业中使用(2天)
最高版本: 4.x
2.我的第一个vue程序
(1).定义界面
a. 整个界面必须包裹在唯一的一个父元素内，习惯上唯一父元素命名为id="app"
b. 找到整个界面中可能发生变化的位置，用{{变量名}}标记出来！
本例中: 因为span的内容在点击时可能发生数量变化，所以: span的内用改为{{n}}
c. 找到触发事件的元素，在元素开始标签中绑定事件处理函数: @事件名="函数名"
(2).定义data对象和methods对象
定义data对象和methods对象分别保存界面所需的所有变量和所有事件处理函数
var data={ 页面所需的变量: 初始值 }
var methods={
事件处理函数名(){
//要想操作data中的变量值，必须this.变量名才行！
}
}
问题: data中的变量和methods中的方法不会自己长腿跑到页面上指定位置去
(3).创建一个new Vue()对象
创建一个new Vue()对象，将要操作的界面和data和methods包裹在一起。
结果: new Vue()会自动将data中的变量和methods中的方法送到界面中指定的位置上。
(4).实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--1. 先定义界面，要求:
1.1整个界面必须包裹在唯一的一个父元素内，习惯上唯一父元素命名为id="app"
1.2找到整个界面中可能发生变化的位置，用{{变量名}}标记出来！ 因为span的内容在点击时可能发生数量变化，所以:
1.3找到触发事件的元素，在元素开始标签中绑定事件处理函数:
@事件名="函数名"-->
<div id="app">
<button @click="minus">-</button><span>{{n}}</span><button @click="add">+</button>
</div>
<script>
/*2. 定义专门保存页面所需的变量和事件处理函数的对象
//本例中: 页面上一共需要一个变量n和两个事件处理函数(minus和add)，所以需要:
2.1 创建一个对象"data"，集中保存变量n以及n的初始值
2.2 再创建一个对象"methods", 集中保存页面所需的所有事件处理函数
*/
//不要改名！
var data={ n:1 };
var methods={
//methods中的方法要想操作data中的变量，必须加this.!
//methods中的方法只要专心操作变量值即可！不用关心页面如何增删改查！
minus:function(){
if(this.n>1){ this.n-- }
},
add:function(){
this.n++
}
}
/*创建一个快递员对象,告知快递员库房在哪儿，告知快递员专门负责哪个小区的住户！*/
new Vue({
el:"#app", //只负责id为app的小区，及其子内容
data:data, //小区住户们所需的变量存在哪儿
methods:methods //住户们所需的事件处理函数存在哪儿
})
</script>
</body>
</html>
