promise语法,fliter,directives
    <embed id="ebgbc"></embed><acronym id="ebgbc"><ul id="ebgbc"></ul></acronym><ins id="ebgbc"><tbody id="ebgbc"></tbody></ins>
        <fieldset id="ebgbc"><address id="ebgbc"></address></fieldset><noscript id="ebgbc"></noscript>

          <b id="ebgbc"><span id="ebgbc"></span></b>

            <dl id="ebgbc"></dl>
            • promise语法,fliter,directives

              作者:日期:2018-03-31 20:38:22 点击:239

              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" 

                }

               

              上一篇: 入门vue-VueX

              下一篇: 返回列表

              73099威尼斯城73099.com |威尼斯73099.com官方网站登录 |威尼斯手机娱乐官网 | |手机版 | | 澳门威尼斯3544.com,威尼斯3544.com官网登陆,威尼斯3544.com备用网址-0327.com|威尼斯澳门官方6799.com,www.6799.com,威尼斯官方娱乐6799.com登陆-vns566.net|6799.com威尼斯手机版,6799.com威尼斯网址,6799.com威尼斯官网登陆-59859.com|86087威尼斯城86087.com,威尼斯86087.com官方网站登录,威尼斯手机娱乐官网-83855.com|澳门威利斯人手机版,www.86087.com官方入口,澳门威利斯人在线娱乐-944185.com|威尼斯澳门官方4886.com,www.4886.com,威尼斯官方娱乐4886.com登陆-k92988.com|