博客项目

环境配置

参考第二节：VUE 安装

  1. vue init webpack vuex-demo
  2. cd vuex-demo
  3. npm install
  4. npm run dev

结构调整

删除没用的代码

添加路由

利用 vue-router 添加路由 /post 及 post 下的 CommentBox 以及 PostBody

使用组件内部数据

在 CommentBox 组件中添加 data 数据 ，利用 {{ comment.text }} 拿到数据

  1. <template>
  2.   <div class="comment-box">
  3.     <ul>
  4.       <li v-for="comment in comments">
  5.         {{ comment.text }}
  6.       </li>
  7.     </ul>
  8.   </div>
  9. </template>
  11. <script>
  12.   export default {
  13.     name: 'comment-box',
  14.     data: () => ({
  15.       comments: [
  16.         {
  17.           text: 'hello git'
  18.         },
  19.         {
  20.           text: 'hello vuejs'
  21.         }
  22.       ]
  23.     })
  24.   }
  25. </script>
  27. <style scoped>
  28.   .comment-box {
  29.     background-color: #fff;
  30.     box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  31.     width: 80%;
  32.     margin: 30px auto;
  33.     padding: 20px;
  34.     line-height: 1.8;
  35.    }
  36. </style>