Promise
-
promise 是用来解决回调问题的
-
他有三个状态:成功态,失败态,等待
let p=new Promise((resolve,reject)=>{ //resolve代表转向成功态,reject转向失败态 setTimeout(function () { let a="mogu"; reject(a); },2000) }); p.then((data)=>{console.log(data)},(err)=>{console.log("err")}); promise的实例才有then方法,then中有两个参数都是函数
ajax获取数据时加入Promise对象解决异步问题
function ajax({url="",type='get',dataType='json'}) { return new Promise((resolve,reject)=>{ let xhr=new XMLHttpRequest(); xhr.open(type,url,true); xhr.responseType=dataType; xhr.onload=function () { //onload表示xhr.staus==200和xhr.readystate==4 if(xhr.status==200){ resolve(xhr.response); //成功调用成功方法 }else { reject("not found"); } }; xhr.onerror=function (err) { reject(err); //失败调用失败方法 }; xhr.send() }) }
computed 计算”属性” 是属性不是方法
-
方法不会有缓存 ,computed会根据依赖(归vue管理的数据,可以响应式的变化的)的属性进行缓存
-
有两部分组成get()和set(),不能只写set(),必须有get()
-
一般情况下通过js赋值影响其他人或者表单元素设置值时会调用set方法
-
get()方法必须要有return ,computed不支持异步
-
放在computed中也会放在vm中,不能和methods和data相同
computed:{ checkAll:{ //当products值变化时会重新计算 get(){ //get set中this指向实例 默认v-model会获取checkAll的值会调用get方法 return this.products.every(item=>item.isSelected); }, set(val){ //val是当我们给checkbox赋的值 console.log("set"); this.products.forEach(item=>item.isSelected=val); } }, sum(){ //如果计算属性写成函数 默认调用get方法 return this.products.reduce((prev,next)=>{ if(!next.isSelected)return prev; return prev+next.productPrice*next.productCount;},0); }
watch
watch:{ //只有值变化时才会触发 支持异步了 其他情况我们更善于用computed a(newVal,oldVal){ //watch要和观察的人的名字一致 setTimeout(()=>{ if(newVal.length6){ return this.msg="太多"; } this.msg=""; },2000) } }
filters 管道符
-
原数据不变的情况下,只是改变显示的效果
{{ message | capitalize }}
-
全局过滤器 放到页面顶部 否则报错找不到
Vue.filter("my",(data)=>{return "gyw"+data;});
v-if/v-show
-
v-if=”” 操作的是dom v-show操作的是样式
-
如果频繁切换dom使用v-show
-
当数据一开始就确定下来使用v-if更好一些 如果if不通过内部指令也不会再执行
-
只有dom从显示到隐藏或者隐藏到显示 才能使用vue动画
-
template标签 是vue提供给我们的没有任何实际意义,用来包裹元素用的 v-show不支持 只有v-if使用
很美很美很美非常美
-默认情况下在切换dom时相同的结构会被复用,如果不需要复用 需要加key
很美很美很美非常美
v-bind/:
-
动态绑定”属性” 给元素属性绑定数据时用
-
class绑定的样式和class绑定的不冲突 style同理
-
1)对象方法:{classname:isActive}
-
2)数组方法:[class1,class2]
-
directives
-
自定义指令
let vm = new Vue({
directives:{
/*el 值当前的dom元素 也就是button按钮*/
/*bindings是个对象,里面value的属性就是赋的值*/
color(el,bindings){
el.style.backgroundColor=bindings.value;
}
},
el:'#app',
data:{
flag:"red"
}
}