学习了vue.js一段时间，拿它来做2个小组件，练习一下。
我这边是用webpack进行打包，也算熟悉一下它的运用。
源码放在文末的 github 地址上。
首先是index.html
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', Arial, sans-serif;
}
.contianer {
width: 50%;
height: auto;
margin: 20px auto;
}
article {
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class='contianer'>
<article>
文章内容...
</article>
<div id='main'>
<app></app>
</div>
</div>
<script type="text/javascript" src='bundle.js'></script>
</body>
</html>
我将 app这个组件放在 <div id=’main’></div> 内
通过webpack打包后,入口的js文件是entry.js，用来引入app.vue组件
entry.js
let Vue = require('vue');import App from './components/app';
let app_vue = new Vue({
el: '#main',
components: {
app: App
}
});
接下来看下这个app组件
<style type="text/css" scoped></style>
<template>
<comment :cur-page-index="curPageIndex" :each-page-size="eachPageSize" :comment-url="commentUrl"
:comment-params="commentParams" :comment-is-sync="commentIsSync">
</comment>
<page :cur-page-index.sync="curPageIndex" :each-page-size="eachPageSize" :page-url="pageUrl"
:page-params="pageParams" :page-is-sync="pageIsSync">
</page>
</template>
<script type="text/javascript">
import Comment from './comment';
import Page from './page';
export default {
data () {
return {
curPageIndex: 1,
eachPageSize: 7,
}
},
components: {
comment: Comment,
page: Page
},
}
</script>
它有2个子组件，分别是comment.vue和page.vue，通过动态绑定数据，进行父子间组件通信，我是这样认为的，对于 当前在第几页 应当由 page.vue传递给app.vue，所以这里我们使用 双向绑定,其余的如 params, url, isSync，即向后台请求数据的东西以及是否同步或异步操作<当然，这里我还没有测试过后台数据，目前是直接js生成静态数据>。
接下来,看下comment.vue评论组件
<style type="text/css" scoped>
.comt-mask {
opacity: 0.5;
}
.comt-title {
