知识铺垫：
ES6语法：
1. let 和 const
1 ES6中，可用 let和 const 声明变量 2 let 声明的变量是：块级作用域（通常用于for 循环中）；不能重复声明；不存在变量提升 3 const 声明一个只读的常量；一旦声明，常量的值就不能改变；并且const一旦声明变量，就必须立即初始化，不能留到以后赋值（只声明不赋值会报错）
2. 模板字符串语法：
var a = 1; var b = 2; var str = `哈哈哈${a}嘿嘿嘿${b}`; // 反引号
3. 箭头函数：
// function(){} === ()=>{} //无形参 var f = () => 5; // 等同于 var f = function () { return 5 }; //多个形参 var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; }; // 箭头函数有几个使用注意点（坑）： // （1）函数体内的this对象，就是定义时所在的对象（指向window），而不是使用时所在的对象。 // （2）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
4. 对象的单体模式：
var person = { name:'小马哥', age:12, fav(){ console.log(this.name,this.age); } } person.fav(); // fav:function(){} 等价于 fav(){} （该函数可以使用 this；解决了箭头函数的第一个问题）
5. ES6 引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
class Animal{ // 构造器 当你创建实例之后 constructor()方法会立刻调用 通常这个方法初始化对象的属性 constructor(name,age){ this.name = name; this.age = age; } showName(){ console.log(this.name); } } var a2 = new Animal('点点',3); // 上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5 的构造函数Animal，对应 ES6 的Animal类的构造方法。 // Animal类除了构造方法，还自己定义了一个showName方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。
6. 模块化 esModule
// 一个js文件就是一个模块 export default xxx import xxx from yyy
7. 前端工具:
(1) webpack：打包机；它能将我们的html,css,js,png,font 等进行打包，交给服务器
作用：html压缩、css压缩、js压缩、js进行混淆、图片压缩等
(2) nodejs：服务器语言
命令： npm init // 初始化项目（自动生成一个文件 package.json）；如果想立即生成 package.json ===> npm init --yes npm install 包名称 --save // 下载包 （--save 意味着 项目依赖） npm install webpack --save-dev // 下载开发依赖 当拿到一个新的项目时： 1. cd 当前目录 2. npm install // 下载 node_module ; 如果 npm install 报错，先运行 npm rebuild npm run dev // 启动当前项目服务器；运行的是 package.json 中 "scripts" 脚本中写的变量 npm start // 淘宝镜像 npm run build // 让webpack 编译、打包，最后生成一个静态文件夹
Vue
Vue 的设计模式：MVVM；M是Model，V是View，VM是ViewModel
总览：
1 // vue 的实例化对象 2 3 var app = new Vue({ 4 el:"#divd", // 第一个参数el：表示要绑定的元素 5 data:{}, // data：当前的数据、属性（对象{}的形式） 6 methods:{}, // methods:当前Vue实例化对象的 所有事件 7 computed:{ // 计算属，默认只有 getter 方法；里面的getter方法需要有返回值,// 计算数据属性，也有watch（实时监听）的作用 8 reverseStr:{ 9 set:function(newValue){ this.xxx = newValue }, // 当给 reverseStr 进行赋值操作时，会自动调用 set 方法 10 get:function(){} 11 } 12 },
created(){
// 通常都用来做页面的初始化的动态等
},
mounted(){ // 页面加载完成后执行的操作
} 13 }) 14 15 16 v-bind: 简便写法：: // v-bind: === : 17 v-on: 简便写法： @ // v-on: === @ 18 19 vue核心思想：1. 数据驱动视图；2. 双向的数据绑定 20 21 双向数据绑定 = 意向数据绑定 + UI事件监听 （v-model 是数据双向绑定最重要的体现；v-model只适用在表单控件中）
指令系统：
v-if
v-show
v-bind 绑定属性 :
v-on 绑定事件 @
v-for 遍历
v-html 解析html标签
v-model 只适用在表单控件；双向数据绑定的一个体现
（1）Vue的使用
1. 建议使用<script>引入 vue.js
2. 引入vue.js文件之后，Vue被注册为一个全局的变量，它是一个构造函数。
3. 使用Vue实例化对象
<div id="app"> {{ msg }} </div>
/* {{ }}插值的语法:{}}插值，不仅可以插变量，只要你能想到的插入都可以(if-else不可以)，如下： */
/* <p>{{1==1?'真的':'假的'}}</p> */
// 创建vue实例对象
// data中存储的就是我们的数据属性。Vue实例还暴露了一些有用的属性和方法，它们都有前缀$，以便与用户定义的属性区分开来 var app = new Vue({ el:'#app', data:{ msg : '路飞学城' } })
（2）指令系统
2.1. 条件渲染
2.1.1 v-if 表示 条件渲染
在vue中，我们使用v-if指令，将当前的dom元素设置
<p v-if = 'show'>显示</p> // 注意：show变量，是数据属性中存储的值。要么真(true)要么假(false)。该属性值为true的时候，p标签显示，反之则不显示。
也可以添加一个v-else块。
<divv-if = 'show'>显示</div> <divv-else>隐藏</div>
另外还有v-else-if块，它是2.1.0新增的。（相当于python 中的 elif）
2.1.2. v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<p v-show='ok'>网站导航</p> /* ok也是变量，是数据属性中存储的值 */
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display
v-show 和 v-if 的对比：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
另外，当v-if与v-for一起使用时，v-for具有比v-if更高的优先级
2.2 class 和 style绑定
2.2.1 v-bind
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
(a). 绑定字符串：
<span v-bind:title='time'>鼠标悬停几秒后当前时间</span>
data:{ time: `页面加载于${new Date().toLocaleString()}`, }
当鼠标悬停在span标签几秒之后，会显示time的值。
(b). 绑定HTML Class：
我们在js中操作dom的css样式属性的方法有很多，在vue中可以直接使用v-bind:class来给每个标签元素添加class。
对象语法：
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
... data:{ isRed:true }
<div v-bind:class='{box1:isRed}'></div>
如果有按钮的话，我们可以通过点击按钮动态的切换class。此外，v-bind:class 指令也可以与普通的 class 属性共存
<div class='a' v-bind:class='{box1:isRed,box2:isGreen}'></div>
和如下data：
data:{ isRed:true, isGreen:false }
有这么一个css样式：
.box1{ width: 100px; height: 100px; background-color: red; } .box2{ width: 100px; height: 100px; background-color: green; }
那么我们在文档结构中可以加一个切换按钮：
<button v-on:click ='clickHandler'>切换</button>
使用v-on绑定点击事件，在实例化options参数中添加如下配置：
methods:{ clickHandler(){ this.isGreen = !this.isGreen; } }
数组语法：
我们可以把一个数组传给v-bind:class,以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: { activeClass: 'active', errorClass: 'text-danger' }
渲染为：
<div class="active text-danger"></div>
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
注： 常用的还是 对象语法
2.3 事件处理
监听事件：可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id='app'> <button v-on:click = 'count+=1'>加{{count}}</button> <p>点了{{count}}次</p> </div>
var app = new Vue({ el:'#app', data:{ count:0 } })
结果为：当我点击的按钮的时候，下面p标签的数据也会发生变化，同时button的文字也会发生变化。
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称
<div id='app'> <button v-on:click = 'countClick'>加{{count}}</button> <p>点了{{count}}次</p> </div>
var app = new Vue({ el:'#app', data:{ count:0 }, methods:{ countClick(){ this.count+=1; } } })
2.4 列表渲染
一个数组列表的 v-for :
用v-for把一个数组对应为一组的元素。
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
另外：v-for 还支持一个可选的第二个参数为当前项的索引。
一个对象的v-for:
你也可以用 v-for 通过一个对象的属性来迭代。
（3） 计算属性（实时监听）
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div> {{ message.split('').reverse().join('') }} </div>
但对于任何复杂逻辑，应当使用计算属性。
<div id = 'com'> <h3>{{msg}}</h3> <p>{{currentMsg}}</p> <button @click='clickHandler'>更改</button> </div>
var com = new Vue({ el:'#com', data:{ msg:'学习computed' }, methods:{ clickHandler(){ this.msg = '我更改了数据' } }, computed:{ currentMsg(){ // computed方法中默认只有getter return this.msg } } })
当点击按钮的时候更改了当前的数据，同时h3和p标签中数据也随时改变。
计算属性的 getter：
计算属性默认只有getter，不过在需要时你也可以提供一个setter。
var com = new Vue({ el:'#com', data:{ msg:'学习computed' }, methods:{ clickHandler(){ this.currentMsg = '我更改了数据' // 该赋值操作会调用 setter 方法；赋的值传给 setter 方法的 newValue 形参 } }, computed:{ currentMsg:{ set : function(newValue){ this.msg = newValue; }, get : function(){ return this.msg; } } } })
当点击按钮的时候，会触发computed中的setter方法，从而将newValue的值，赋值给msg。计算属性方法的getter方法因为跟msg有依赖关系，从而会相应的发生改变。
（4）表单输入绑定
vue的核心：声明式的指令和数据的双向绑定。
前面的知识为声明式的指令，以下为数据的双向绑定。
双向绑定和单向绑定的区别：
单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新；
有单向绑定，就有双向绑定；
如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。
什么情况下用户可以更新View呢？填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定。
我们可以这样认为：双向数据绑定=单向数据绑定+UI事件监听。
vue中双向数据绑定的例子：
<body> <div id="app"> <input type="text" v-model="meg"> <p>{{meg}}</p> </div> <script> var app = new Vue({ el:'#app', data :{ meg:'' } }) </script> </body>
效果显示，当我们在input输入框中输入内容的时候，下面p标签同步显示内容。这就是最典型的双向数据绑定的例子。vue里使用v-model实现此想法。
v-mode 的实现原理：通过官网的介绍，我们知道v-mode指令是v-bind:value 和 v-on:input的结合体。
v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理
v-model只适用在表单控件中
比如：表单文本、多行文本、复选框、单选按钮、多选按钮、选择框。内容太多，就不给大家一一阐述了。大家一定要去阅读vue的官网文档
https://cn.vuejs.org/v2/guide/forms.html
v-model的 修饰符 参考： https://www.cnblogs.com/majj/p/9050338.html
（5） 组件
vue的核心基础就是组件的使用；组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。
这里有一个Vue组件的示例：
Vue.component('Vheader',{ // 第一个参数 'Vheader' 是组件的名字
data:function(){ // data属性不再是返回对象，而是返回一个函数。而且必须返回一个函数。
return { // 函数必须要有返回值，哪怕是返回一个空对象
}
},
template:`<div class="header">
<div class="w">
<div class="w-l">
<img src="./logo.png"/>
</div>
<div class="w-r">
<button>登录</button><button>注册</button>
</div>
</div>
</div>`
})
组件是可复用的Vue实例，并且带有一个名字：在这个例子中是 <Vheader>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
<div id="app"> <Vheader></Vheader> </div>
var app = new Vue({ el:'#app', data:{ } })
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项
组件的复用：
<div id="app"> <Vheader></Vheader> <br> <Vheader></Vheader> <br> <Vheader></Vheader> </div>
在创建组件过程中第一个参数是组件的名字，第二个参数是跟new Vue实例一样的options。跟实例对象不同的是有两点：
1、组件中没有el，因为el仅仅的是绑定Vue的根元素；
2、data属性不再是返回对象，而是返回一个函数。而且必须返回一个函数。
上面的例子中，我们把整个Vheader组件看作是全局注册的组件，局部组件如下：
在compoents选项中定义你想要使用的组件：
new Vue({ el: '#app' components: { // components 中放局部组件 A B } })
在对象中放一个类似A 的变量名其实是A:A 的缩写，即这个变量名同时是：
- 用在模板中的自定义元素的名称
- 包含了这个组件选项的变量名
另外，一个组件必须只有一个根元素，所以模板的内容应该包裹在一个父元素内。
补充： HTML Audio/Video Dom 的 ended 事件： onended
axios 发送 ajax请求：
// npm install axios --save // 第一步：在 main.js中配置 import axios from 'axios' Vue.prototype.$axios = axios // 在vue的全局变量中设置了 $axios =axios；以后每个组件使用时：this.$axios // 第二步：使用axios发送请求 this.$axios.request({ url:"www.xxx.com", method:"POST", data:{ // POST的请求体 }, headers:{ // 请求头 'Content-Type':'application/json', // 发的是 json 格式 } }).then(function(ret){ // .then() 中是回调函数 // ajax请求发送成功后，获取的响应内容 // ret.data：获取返回的数据 }).catch(function(ret){ // ajax请求失败后，获取响应的内容，（ .catch() 自动执行） }) // this.axios.request() 中不能用this;应该在其之前先把 this 赋值给 that 变量，即 var that = this