零基础Vue入门学习记录（2）

零基础Vue入门学习记录（2）

继续搞Vuejs的前端，在之前我已经在Windows系统上配置好了一个初始的vue-cli页面，目前我需要做的工作，就是开始写代码，学习增删页面，加入输入框按钮什么的。另外希望能尽快学会如何通过API取数据，感觉上，能学会这些东西，就能达到一项技术2/8原则里边那个8了。

为了实现这个目的，我上网看了一系列的博客教程，照着抄了很多代码，最后都没办法用。我怀疑原因可能是大家用的版本不一样，感觉上Vue发展速度很快，导致的结果就是每个人写的风格都不一样，后来费了好大力，终于算是自己摸索出了一些结果。搞定了增删按钮以及页面跳转。

我们先回溯一下上一次的进度：刚刚使用vue-cli建立了一个项目，这个项目内似乎东西很多，但是我们只需要关注src文件夹下的东西就行了，运行npm run dev以后，浏览器会自动弹出一个页面，如下：

而目前的文件夹目录如下：

我们要做的，就是开始理解Vue增删页面的模式，组件和路由（就是网页链接URL）的跳转模式。

大致理解Vue设计思想

首先要理解的是vue的设计理念是怎样的？在我眼里，组件化是vue最为成功的一项涉及。组件化这个特性把一整个网站都打散成了很小的一个又一个部分。举个例子，看目前的目录下，有三个文件：整个项目目录下的index.htm，src目录下的App.vue，和components文件夹下的Hello.vue.

理解这三者的关系很重要，Index是一个最外层的网站框架，它其实什么都没有，有一个head，head里边可以定义一些CSS一类的，然后body部分完全是空的，它仅仅载入了一个名字叫做app的vue module.

所以说App.vue这个东西，就是嵌套在index.html中的。然后我们在看App.vue文件写了些什么？

// App.vue file
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

额外说一句，vue文件都是这个模式，一共由三个部分构成：上边的<template>包含有最终用户看到的按钮框框；中间的 <script> 定义了这个组件（module）所用到的数据和函数；后边的<style>定义了这个组件的样式等等。

所以我们暂时只关注最上边的<template>，其中只有两句代码比较核心：一行插入了一个图片，另一行写的是<router-view></router-view>。在这里，大概能猜到，App.vue里其实也差不多是空的，它只是给页面上添加了一个Logo而已，实质性的文章，都没有添加。那么我们看到的页面上的文字到底是哪里来的？它们全部在Hello.vue文件里。App.vue调用了Hello.vue这个组件，并将它显示在了Logo的下方，并且，是通过router来控制的显示，而不是直接插入组件。

最后，我们打开router文件夹下的index.js:

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

Vue.use(Router)

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

这个router文件是针对App.vue的路由，对应的内容，全部都会显示在刚才看到的那一行<router-view></router-view>中，在这里，App.vue会自动寻找这一些组件，比如，在目前的index.js中，path显示的是”/”对吧？这就意味着，当页面打开到App.vue，而没有增加其他的url后缀的时候 （http://localhost:8080/#/），App.vue会自动载入Hello这个组件，加载在那个Logo的下面。

如果还不能理解，下面我们做一个小实验：

你修改path的值为“/Hello”，那么你只有在（http://localhost:8080/#/Hello）才会重新看到刚才那个页面。而在（http://localhost:8080/#/）目录下，你会发现，只有一个logo，其他什么都没有。

稍微总结一下

1. 上述的小实验已经充分证明了，index.html, App.vue, Hello.vue之间的关系。一般来说，index.html是不用动的（顶多增加一些css头文件）。所以我们开始修改的其实文件就是App.vue，然后鉴于我们想要添加文件，所以需要修改router里边的index.js文件，最后鉴于我们要添加新页面和组件，我们还需要增加一些components文件夹里边的东西。
2. 如果按照目前的index.js的结构，如果你怎么修改那个Hello.vue文件，或者增加其他组件，它们只有一个归宿：就是躺在App.vue里的那个Logo图像的下面。因为App.vue是父组件，而Hello.vue只不过是它的子组件。但是这并不意味着谁重要谁难写，因为如果你把App.vue里边那个logo那一行注释掉，App.vue就什么都无法呈现，仅仅是为Hello.vue以及未来的一些页面提供了一个承载框架而已。
3. 未来开发完的网站里，用户感觉上可能是一个页面和一个url的单独对应，就像是曾经的每一个PHP文件对应每一个url一样，但实际上，可能很多页面，都像Hello.vue一样，仅仅是App.vue的子组件而已。
4. 目前在App.vue里，有Hello组件；以后我们在Hello组件里，还可以插入其他的组件，当然不一定是这种使用router的办法，因为用这个模式，每一个组件都会有一个对应的url，如果你的页面上有三个tab，可能没有必要每一个tab对应一个url吧？但目前要理解的就是：我个人觉得Vue最核心的设计理念，就是把一个看起来很完整的页面，分散到了每一个组件，这个组件可能大道一个页面，Hello.vue，也可能小到一个按钮，最终我们看到