Vue仿CNode社区笔记 2-PostList-axios

1. 使用axios步骤

1. 安装axios，

npm install axios //注意在项目目录下安装

2. 在main.js中引用，并挂载到原型属性上

import axios from "axios"
Vue.prototype.$http = axios

3. 在组件中使用

methods:{
    getData(){this.$http                             //getData(){} == getData:function(){}
    .get('url',{params:{page:1,limit:5}})}
    .then(res=>{console.log(res)})
    .cath(function(err){console.log(err)}
}
beforeMount:{
    this.getData()
}

2. 组件中data返回数据必须是函数

data(){
    return {
    msg:[]
    }
}

3 过滤器的使用

1. 在main.js中声明过滤器filter

Vue.filter('formaDate',function(str){
  var date = new Date(str)
  var time = new Date().getTime() - date.getTime() //当前时间-回复时间(毫秒)
  if((time / 3600000) < 24){
    return parseInt(time / 3600000)+'小时前'
  }else if ((time / 86400000) < 31){
    return parseInt(time / 86400000) + '天前'
  }else 
  return parseInt(time / 2592000000) + '月前'
})

2. 在组件中直接使用filter名

{{msg.last_reply_at | formaDate}}

4. 动态class的绑定

<span :class="[{put_good:(post.good  == true),put_top:(post.top  == true),
    'topiclist-tab':(post.good  != true && post.top  != true)}]">
    <span>
        {{post | tabFormatter}}
    </span>
</span>
        
Vue.filter('tabFormatter',function(post){
  if(post.good== true){
    return '精华'
  }else if(post.top == true){
    return '置顶'
  }else if(post.tab == 'ask'){
    return '问答'
  }else if(post.tab == 'share'){
    return '分享'
  }else{
    return '招聘'
  }
})