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" 
} 
}