【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的实际应用更了解了，继续加油鸭~
