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=>{
})