复习VUE.JS第三天

DEMO(续昨天)

  methods:{
        add:funcion(){
                //发送请求
                this.$http({
                      url:URL,
                      data:{
                           act:'add',
                           content:this.t1,
                      }
                }).then(function(res){
                          var json = res.data;
                          
                })
        },
      //获取某一页的数据
      getPageData(2);
      getPageData:function(n){
                this.$http({
                      url:URL,
                      data:{
                            act:'get',
                            page:n
                      }    
                }).then(function(res){
                        console.log(res.data);
                        var arr = res.data;
                        for(var i=0; i<arr.length;i++){
                                this.msgData.push({
                                          content:arr[i].content,
                                          time:arr[i].time,  
                                          acc:arr[i].acc,
                                          ref:arr[i].ref,
                                          id:arr[i].id
                                })
                        }
                })
      }
  }

vue生存周期

  钩子函数：
          created :   ->实例已经创建
          beforeCompile -> 编译之前
          compiled ->编译之后
          ready      ->插入到文档中
          beforeDestroy  ->销毁之前
          destroyed         ->销毁之后 

---

用户会看到花括号标记：

 防止闪烁 v-cloak： 
  属性选择器：用在比较大的段落zhong
   <style>
          [v-cloak]{
               display:none; 
         }
   </style>

---

 <span v-text="msg"></span>
 <span v-html="msg"></span>

---

计算属性的使用：

  computed:{
      
  }
demo:
      <script>
          var vm = new Vue({
                  el:'#box',
                  aa:1111,//自定义属性
                  show:function(){
                         alert(1);
                  },
                  data:{
                        a:1,
                        b:2
                  },
                  computed:{
                        b:function(){
                            //业务逻辑代码
                            return this.a+1;
                         },
                         b：{
                            get：function(){
                                    return  this.a+2;
                              },
                            set：function(val){
                                 this.a=val
                            }  
                        }
                  }
          })
          document.onclick=function(){
                    vm.a = 101;
          }
           // 获取自定义属性
          console.log(vm.$options.aa);
          //调用自定义中的方法
          vm.$options.show();
      </script>
      *computed 里面可以放置一些逻辑代码，切记一定 return

---

vue实例简单方法：
vm.$el --> 就是元素
vm.$el.style.background='red';
vm.$data -->数据对象
vm.$mount('#box');//手动挂载或者
vm.$options -> 获取自定义属性
vm.$destroy -> 销毁对象
vm.$log(); ->查看现在数据的状态

---

循环：
v-for="value in data"
会有重复数据？
track-by = "索引" //提高循环性能
track-by = "$index/uid"
Demo:
<ul v-for="val in arr" track-by="$index">
{{val}}
</ul>

---

过滤器：
vue提供过过滤器：
capitalize uppercase currency...
debounce 配合事件，延迟执行
数据配合使用的过滤器：
limitBy 限制几个
limitBy 参数（取几个）
limitBy 取几个 从哪开始
filterBy 过滤数据