Vue 小阶段学习总结

前三天学习了Vue的一些基础知识（首刷到这篇文章的同学，可以点击作者的个人主页查看往期文章），下面来复习一下，更深入的理解所学的知识。

工程结构：

首先，回顾一下Vue的工程结构：

• build：里面保存一些webpack的初始化配置
• config：保存一些项目初始化配置
• index.html：是首页
• src：存放最关键的代码
• package.json：保存一些依赖信息

路由：

在 App.vue 文件中这行代码 <router-view></router-view>

这句代码在页面放入一个路由容器，当我们访问 http://localhost:8080/#/page 的时候，会将page.vue 的内容放进去，访问 http://localhost:8080/#/nav 的时候会将 pageQuiNav.vue 的内容放进去。

可以发现，无论打开 http://localhost:8080/#/btn 还是 http://localhost:8080/#/nav ，页面中的这个部分都是公共部分：

变得只是路由器里面的内容，路由器的内容是由 src/router/index.js 文件中配置的。

import Vue from 'vue'
import Router from 'vue-router'

import index from '../pages/index'
import pageQuiButton from "../pages/pageQuiButton";
import pageQuiNav from "../pages/pageQuiNav"
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/btn',
      name: 'btn',
      component: pageQuiButton
    },
    {
      path: '/nav',
      name: 'nav',
      component: pageQuiNav
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

前面先引入了路由插件 vue-router ，然后显示声明要用 Vue.use(Router) 。接着注册路由器，然后开始配置路由。

从初始化到页面展示，Vue的页面架构流程大概是这样：

按钮组件：

在学习按钮组件的时候，学会了用 props 给按钮自定义文案，用 on 和 emit 给按钮自定义点击触发，用 slot 给按钮添加一些自定义结构。忘记具体怎么做的同学，回头看一下第二天和第三天的内容。

按钮组件的架构大致是这样：

导航组件：

在学习做导航组件的时候，学会了用 v-for 关键字，以及动态类名的概念。

for循环输出每个tab，为每个tab绑定动态的class类名，同时在点击事件中动态切换类。