VueJS-CLI学习教程 - 3 - VueRouter

为了方便记忆和学习，整理了一下之前学习VueJS的要点，并通过在中的代码注释来阐述知识点。

本章重点：使用vue-router。
GitHub前端代码 - liyingxuan/vue-cli-tutorial
GitHub后端代码 - liyingxuan/lara-vue-api

1. 安装vue-router

如果是跟着我的系列教程走的，应该已经默认安装了router了，此步可以直接跳过。
如果没有：官网安装Vue-Router中文教程

2. 将之前代码重构

• ./src/router/index.js：
  • 增加Todos路由

import Vue from 'vue'
import Router from 'vue-router'
import Todos from '@/components/Todos'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Todos',
      component: Todos
    }
  ]
})

• ./src/App.vue：
  • 改成路由部署组件
  • 通过router-view传递参数

<template>
  <div id="app"> <!-- 这里的ID是用来声明template的 -->
    <!-- Bootstrap的部分不用关注，只是基础样式 -->
    <div class="navbar navbar-default navbar-static-top"></div>

    <div class="container"> <!-- 这里的ID是用来提供Vue操作的 -->
      <div class="row">
        <!-- 数组数据操作和动态显示，事件的监听和绑定等 -->
        <div class="col-md-8 col-md-offset-2">
          <div class="panel panel-default">
            <div class="panel-heading">通过Vue-Cli进行组件化开发</div>
            <div class="panel-body">
              <h4>My Todos {{todoCount}}</h4>
              <router-view :todos="todos"/> <!-- 通过router view部署组件和传参 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() { // 基础数据和变量
      return {
        todos: []
      }
    },
    mounted() { // 获取后端API的数据
      this.axios.get('http://localhost/api/todos').then(response => {
        this.todos = response.data
      })
    },
    computed: { // 页面中需要处理之后展示的数据，统一放这里
      todoCount() {
        return this.todos.length
      }
    }
  }
</script>

• ./src/components/Todos.vue：
  • 将TodoForm作为子组件传入
  • 增加外层div控制器

<template>
  <div id="todos"> <!-- 这里的ID是用来声明template的 -->
    <!-- 将显示数组数据部分组件化： -->
    <ul class="list-group">
      <!-- 通过v-bind来根据数据的不同设置class样式；把index输出，是为了提供删除使用 -->
      <li class="list-group-item"
          v-bind:class="{ 'completed' : todo.completed}"
          v-for="(todo,index) in todos">
        {{todo.title}}
        <button class="btn btn-success btn-xs pull-right"
                v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success']"
                v-on:click="completedTodo(todo)">
          {{ todo.completed ? 'undo' : 'done' }}
        </button>
        <button class="btn btn-warning btn-xs pull-right" v-on:click="delTodo(index)">Delete</button>
      </li>
    </ul>
    <todo-form :todos="todos"></todo-form> <!-- 引入子组件 -->
  </div>
</template>

<script>
  import TodoForm from './TodoForm' // 引入子组件

  export default {
    name: 'Todos',
    props: ['todos'], // 引入到组件中的数据/变量
    methods: { // 逻辑方法
      delTodo(index) {
        this.todos.splice(index, 1)
      },
      completedTodo(todo){
        todo.completed = !todo.completed
      }
    },
    components: { // 引入子组件
      TodoForm
    }
  }
</script>

<style>
  .completed {
    color: #00a379;
    text-decoration: line-through;
  }
</style>

The end.

→ VueJS-CLI学习教程 - 4 - RouterLink
← VueJS-CLI学习教程 - 2 - 前后端分离