Promise
Promise出现的原因： 就是为了解决回调地狱问题（将回调函数的写法进行了更新，之前是传参现在可以通过then）
Promise的使用
Promise的状态说明
pendding: 异步操作还未结束
fullfilled / resolved: 异步操作已经结束并且成功了
rejected : 异步操作已经结束并且失败了
别人提供的Promise的api我们可以直接使用then方法来写回调！
axios().then(res=>{})
- 我们可以通过Promise来给别人提供相应的回调函数的改进写法
function timeOut(time){
return new Promise(function(resolve, reject){
//resolve就是将当前promise对象的状态更改为成功， 会调用then里面的第一个函数
//reject就是将当前promise对象的状态更改为失败，会调用then里面的第二个函数，或者catch里的函数
setTimeout(function(){
resolve();
}, time);
})
}
timeOut(1000).then(_=>console.log("1s后做的事情"))
自定义指令
指令的基本格式
指令名:参数.修饰符="表达式"
自定义指令什么时候用？
在Vue中如果遇到需要进行DOM操作的情况，就使用自定义指令
如何注册自定义指令
- 全局注册
Vue.directive("指令名不带v-", {
bind(el, binding){
//el 就是当前指令所在的元素dom对象
//binding： 就是和指令相关的所有的信息（上面的指令的格式中的所有的内容）
//指令名： binding.name binding.rawName
//参数： binding.arg
//修饰符: binding.modifiers
//表达式：binding.expression
//表达式的值： binding.value
},
inserted(){},
update(){},
componentUpdated(){},
unbind(){}
})
//平时使用的时候 并不一定5个钩子都会用到，最常用的是bind和update
//所以下面的简写形式，就是同时设置了bind和update两个钩子函数
Vue.directive("指令名不带v-", function(){})
- 局部注册
var vm = new Vue({
directives: {
"指令名": {},
"指令名": function(){}
}
})
自定义指令练习（3遍！！）
自定义过滤器
概念？？
过滤器可以接收一个数据，并且加工之后返回一个新的数据
本质就是一个函数，接收参数，并且有返回值
html中如何用？？
{{data | 过滤器名称(arg1...argN)}}
如何注册过滤器
Vue.filter("过滤器名称", function(value, arg1...argN){
//value指的就是|前面的内容，也就是要被过滤的内容
//arg1...argN就是过滤器名称后面传入的参数
//过滤器一定要有返回值
})
var vm = new Vue({
filters:{
"过滤器名称": function(value, arg1...argN){
}
}
})
过渡
过渡的6个状态
进入前 进入时 进入后
离开前 离开时 离开后
实现方式
自定义类样式实现
1.1 在css样式表中，添加6个类样式 name-enter name-enter-to name-enter-active
name-leave name-leave-to name-leave-active
1.2 在要实现过渡的元素上包裹一个transition标签，将name设置为类样式开头的name，如果不设置name，默认会找v-打头的类样式-
第三方css库实现
<transition enter-active-class="animated tada" leave-active-class="animated bounceOutRight"> <div></div> </transition> -
js钩子函数实现
3.1 8个钩子函数
before-enter
enter
after-enter
enter-cancelled
before-leave
leave
after-leave
leave-cancelled3.2 一般我们会在 before-enter中设置进入前的样式 enter中设置进入后以及过渡时的样式， enter中需要先触发一次重绘 el.offsetWidth
单页面应用
本质： 根据hash值的改变，切换显示页面中的内容！！
练习（自己实现一个简单的单页面应用！）
组件
组件化
将页面按照功能，进行拆分，创建成组件，每需要一个页面的时候，只需要把创建好的组件拿过来组装成一个新的页面即可
组件
包含html，css，js的功能代码！
组件的注册
Vue.component("组件名（不能用驼峰命名）", {
template: "html模板字符串",
data(){
return {
// 这里就是数据
}
}
})
var vm = new Vue({
components: {
"组件名（不能用驼峰命名）": {
template: "html模板字符串",
//data为什么是个函数（仔细思考！！！）
data(){
return {
// 这里就是数据
}
}
}
}
})
var obj = Vue.extend({
template: "html模板字符串",
data(){
return {
// 这里就是数据
}
}
})
Vue.component("组件名", obj)
如何在页面中使用一个组件
<组件名></组件名>
<组件名/>
预习组件！
- 组件之间的切换
- 组件之间的通信
