VUE
一 、mounted函数
mounted这个函数功能特殊，名字只能叫mounted，它的作用和window.onload类似，就表示页面一加载完成，立马自动执行
mounted(){
console.log('页面加载完成马上执行')
}
注意：mounted虽然是一个函数，但是它绝对不能写在methods里面
二 、在vue中操作dom
在vue中操作dom，通过ref属性，他表示dom的引用。用法在需要操作的标签的属性位置写上ref=‘自定义的名字
通过ref定义的dom方法：this.$refs.自定义的名字
注意：自定义的名字在当前页面不能有重复
mounted(){
console.log('页面加载完成马上执行')
this.$refs.idref.focus()//加载完成马上获得焦点
}
三 自定义指令
Vue.directive()方法创建全局自定义指令。
1、需求：创建一个v-myfocus指令 加载获得焦点
//该函数有两个参数
//1、 自定义指令的名字，不能带v-，使用全小写
//2、 一个对象，对象内部有一些配置项
Vue.directive('myfocus',{
// 这个配置项中，有很多方法，重点关注inserted方法，它表示指令插入标签中时自动执行,名字也不能变
//此函数有参数，el可以直接用来操作dom
inserted(el){
el.focus()
}
})
2、需求：创建一个指令：根据页面中标签中的文字，跟着data中数据的变化而变化
Vue.directive('mycolor',{
//binding参数是一个对象，里面保存的是自定义指令的信息，其中里面有一个value属性，它保存的是自定义自定义指令后面跟的变量的值
inserted(el,binding){
el.style.color = binding.value
}
}
四、过滤器 Vue.filter()
作用：将数据从一种格式经过过滤器处理之后，变成另一种格式的数据
创建全局过滤器
Vue.filter(’名字‘，function(data){
//必须要return
})
使用过滤器方法：|过滤器名字
<p>{{time | filterTime }}</P>
需求：把2018-09-26T03:17:15.858Z 变成 2018-09-26
//该方法有两个参数
// 1、 过滤器名字
// 2、 是一个函数，在这个函数里面可以去写处理逻辑,这个函数有一个默认参数，表示需要过滤的数据
Vue.filter('filterTime',function(time,seprator){
let y = time.getFullYear()
let m = time.getMonth()+1
let d = time.getDate()
//这个处理函数必须 return 一个数据
return y+seprator+m+sepratord
})
注意：这个函数中的参数，第一个参数始终是需要过滤的数据，不需要在过滤器使用的使用传递，这个参数后面的参数才是需要传递的
五 计算属性 computed
计算属性：是根据data中已有的属性，计算得到一个新的属性
定义计算属性在computed属性中
computed:{
//这个属性中写函数，但是这个函数名字非常特殊，它可以作为一个属性直接使用
fullName(){
//必须要return，里面不能涉及到异步操作
return = this.firstName + this.lastName
}
}
<p>{{fullName}}</p>
注意：计算属性依赖缓存，当页面多次使用同一个计算属性的时候，它会将第一次计算出来的结果缓存起来，后续直接调用第一次结果就行了，而不必再走计算逻辑
六、watch监听器
监听器能够用来监听data数据中的变化，并且执行相应的操作
创建：
监听器在watch属性中
data:{
firstName:'李',
lastName:'白',
//定义变量来接收新的全名
fullName:''
}
watch:{
//要监听谁，就将该变量拿过来作为一个函数名字，这个函数中带有newVal和odlVal两个参数，参数名字自定义
firstName(newVal,odlVal){
this.fullName = newVal +this.lastName
},
lastName(newVal,odlVal){
this.fullName = this.lastName +newVal
}
}
注意：watch和computed对比
1、computed性能比watch更好，我们能用computed事件就用computed去实现
2、涉及到异步数据的时候，就需要用watch去是实现
七 、深度监听
如果要监听对象的话，需要使用深度监听
data:{
student:{
name:'jack'
}
},
watch:{
student:{
//handler是一个函数，只能叫这个名字，表示对象中属性变化时的处理函数，它只有newVal
handler(newVal){
console.log('深度监听')
},
//表示深度监听
deep:true
}
}
八、promise
Promise 是异步编程的一种解决方案 。
Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值
一个 Promise有以下几种状态:
- pending: 初始状态，既不是成功，也不是失败状态。
- fulfilled: 意味着操作成功完成。
- rejected: 意味着操作失败。
Promise对象的状态改变，只能有两种情况：
- 从pending变为fulfilled
- 从pending变为rejected
1、通过Promise构造函数创建一个promise对象
这个promise构造函数中有个参数，这个参数是一个函数，它包含两个参数（这两个参数也是函数），一个是resolve，一个是reject
let pmObj = new Promise((resolve,reject)=>{
//模拟一个异步请求，想要将成功的数据发送出去
setTimeout(()=>{
//将成功的数据放在resolve函数中，传递出去
resolve('success')
},2000)
setTimeout(()=>{
//将失败的数据放在reject函数中，传递出去
reject('err')
},2000)
})
//通过这个promise对象，我们可以在.then()函数中获取成功的数据，在.catch()函数中获取失败的信息
pmObj.then(data=>{
console.log(data)
})
.catch(err=>{
console.log(err)
})
总结：
1、promise对象中保存的有状态，这个状态要么是成功的，要么是失败的
2、成过得状态可以通过promise中的 .then()函数访问,失败的状态可以通过promise中的 .catch()函数访问
九、axios
不支持jsonp方法，实际开发的时候，设置代理，解决跨域
获取get请求
注意：get请求发送传参的时候，注意params 的格式
getData(){
let url = 'https://jsonplaceholder.typicode.com/todos/1'
axios.get(url,{params:{id:123}})//传参的时候，必须按照此处来写
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err)
})
},
获取post请求
postData(){
let url = 'https://jsonplaceholder.typicode.com/posts'
axios.post(url,{title: 'foo',body: 'bar',userId: 1})
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})
}
十、vue-resource (不推荐使用)
注意：vue-resource依赖于vue，所以再引入vue之后再引入
vue-resource引入进来之后，它会在Vue.prototype上绑定一个$http对象，这个对象里面包含了get/post/delete/put…
vue-resource支持jsonp方法
get请求
let url = ''
this.$http.get(url)
//这里和axios的区别，它将成功和失败都写在了这个then函数中
.then(res=>{
//这里请求成功之后的数据封装在body里面
},err=>{
})
post请求
let url = ''
this.$http.post(url,{参数})
//这里和axios的区别，它将成功和失败都写在了这个then函数中
.then(res=>{
//这里请求成功之后的数据封装在body里面
},err=>{
})