【Vue2.0版cnode社区】---项目开发

1.组件介绍

1.Header //头部栏
2.PostList //论坛列表
3.Article //帖子内容(带有回复内容)
4.SlideBar //帖子内容的侧边栏(作者信息)
5.userinfo //用户信息
6.Pagination //页码

2.需要注意的一些问题

1.命名视图的使用
有时候想同时（同级）展示多个视图，例如这里要创建一个布局，左边是帖子内容，右边是作者的信息两个视图，这时候就要用到命名视图：

<div id="app">
    <Header></Header>
    <div class="main">
      <router-view name="slidebar"></router-view>
      <router-view name="main"></router-view>
    </div>
  </div>

一个视图要用一个组件来渲染，所以对于同个路由，多个视图就需要多个组件，要用components配置：

export default new Router({
routes: [
  {
    name:'root',
    path:'/',
    components:{
      main:PostList
    }
  },
  {
    name:'post_content',
    path:'/topic/:id&author=:name',
    components:{
      main:Article,
      slidebar:SlideBar
    }
  },
  {
    name:'user_info',
    path:'/userinfo/:name',
    components:{
      main:UserInfo
    }
  }
]

2.命名路由的使用
通过一个名称来标识一个路由显得更方便一些，所以在Router下的index.js里面给路由设置名称：

export default new Router({
routes: [
  {
    name:'root',
    path:'/',
    components:{
      main:PostList
    }
  }
  ]
  })

要链接到一个命名路由，可以给router-link的to属性传一个对象：

   <router-link :to="{
               name:'post_content',
               params:{
                   id:post.id,
                   name:post.author.loginname
               }
           }">
           <span>
             {{post.title}}
           </span>
   </router-link>

这里的params是同时传递给路由的参数，由一个组件来传递，下一个路由跳转的组件来接受使用这个传递来的参数
例如上面代码是PostList组件中的代码，跳转的路由页面是Article组件，在Article组件中：

${this.$route.params.id}

这样来接收传递过来的id

3.axios的使用
首先axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

首先安装axios

npm install axios

然后在main.js里引入axios

import Axios from 'axios'

全局挂载

Vue.prototype.$http = Axios;

然后就可以来发请求拿到数据,例如PostList组件里：

getData(){
          this.$http.get('https://cnodejs.org/api/v1/topics',{
            params:{
              page:this.postpage,
              limit:20
            }
          })
            .then(res=>{
              this.isLoading=false; //加载成功去除动画
              this.posts=res.data.data;
            })
            .catch(function (err) {
              //处理返回失败后的问题
              console.log(err);
            })
     }

4.解决路由跳转到第二页时位置不在首部的问题

export default new Router({
  routes: [
    {
      name:'root',
      path:'/',
      components:{
        main:PostList
      }
    },
    {
      name:'post_content',
      path:'/topic/:id&author=:name',
      components:{
        main:Article,
        slidebar:SlideBar
      }
    },
    {
      name:'user_info',
      path:'/userinfo/:name',
      components:{
        main:UserInfo
      }
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    return {x: 0, y: 0}
  }
})

如上，只要在路由后面加入这段代码即可
5.类名的动态绑定

<span :class="[{put_good:(post.good == true),put_top:(post.top == true),
            'topiclist-tab':(post.good != true && post.top != true )}]">

button v-for="btn in pagebtns"
              @click="changeBtn(btn)"
              :class="[{currentPage:btn == currentPage},'pagebtn']">
        {{btn}}
      </button>

6.子组件向父组件传递值
子组件用$emit来触发事件

this.$emit('handleList',this.currentPage);

父组件用$on来监听子组件事件，父组件也可以直接在子组件的自定义标签上使用” v-on ” 来监听子组件触发的自定义事件。

<pagination @handleList="renderList"></pagination>

renderList(value){
          this.postpage=value;
          this.getData();
        }

总结

that's all~
做完这个小项目自己对vue的实际应用更了解了，继续加油鸭~