vue2.0入门及实战开发(十)

轮播图实现

<mt-swipe:auto="400">
   <mt-swipe-item v-for="{img,index} in imgs" :key="index">
       <a :href="img.url"><img :src="img.img"></a>
   </mt-swipe-item>
</mt-swipe>

export default{
   data(){
     return{
        imgs:[],//轮播图列表
     }
   }
   为什么是created，因为此时还没有dom
   created(){
     //发起请求
注意：在main.js中写个默认配置
Axios.defaults.baseURL='http:/182.254.146.100:8899/api/'

     this.$axios.get('getlunbo')
     .then(res=>{
         console.log(res.data.message);
         this.imgs=res.data.message;
    })
  }
}


<style scoped>
.mint-swipe{
    max-height: 187px;
}
.mint-swipe img{
    height: 100%;
}
</style>


九宫格部分  注意要引入样式
在main.js中引入
import './static/vendor/mui/dist/css/mui.css';
全局样式
import './static/css/global.css';

需求：
1：按钮的点击和锚点及路由关联起来，显示对应的组件
2：点击后，颜色高亮


注意：
在不同的vue中写出连接，然后在main.js中导航配置路由


点击按钮后触发高亮操作：
<router-link-active>的用法

默认值为：router-link-active
设置链接激活时使用的CSS类名，默认值可以通过路由的 构造选项 linkActiveClass来 全局 配置

let router=new VueRouter({
    linkActiveClass:'mui-active',
})

注意：配置文件发生更改时，要记得重启


<li v-for="news in newsList" :key="news.id">

:src="news.img_url"   <span v-text="news.title">
{{news.click}}  {{news.add_time}}

moment的使用和配置

Monent:引入moment
import moment from 'moment';

定义全局过滤器，大家都能使用
Vue.filter('convertDate',function(value){
    return Moment(value).format('YYYY-MM-DD');
})

使用：<p>发表时间:{{news.add_time | convertDate }}</p>