Vue快速上手（三）语法概括、组件、路由

在上一章我们了解了vue-cli的流程关系之后，我们开始来写vue的小项目。语法部分简单概括下，然后我们处理组件和路由。
接下来的部分都是写代码相关的，所以从本章开始以及后面几章中的代码都是一个项目，最后看情况是否放在git上面，主要都比较简单，应该不需要放上去。

语法概括

模板语法

<!-- 从data中找到msg的值并展示在页面中-->
{{ msg }}
<!-- 循环-->
<ul v-for="article in articles">
  <li>{{ article }}</li>
</ul>

其他的v-if、v-show……类似，不解释，大家到时候看文档。

<!-- 上面代码中的值从这里获得-->
<script>
export default {
  data () {
    return {
      msg: 'msg的值直接展示',
      articles:['good','batter','best']
    }
  }
}
</script>

展示结果如下

image.png

完整代码看图

image.png

组件

组件？自行到官网补充理论吧，地址：http://doc.vue-js.com/v2/guide/components.html 简单说就是按UI界面划分，方便UI组件的重用。
一个组件下只能有一个并列的 div，可以直接复制示例的div 里面的内容。
错误示范如下：

image.png

//上面这种写法会报错，错误提示如下：
Component template should contain exactly one root element. If you are using v-if on multiple elements, u
se v-else-if to chain them instead.

简单说就是组件模板只能包含一个根元素。如果在多个元素上就使用V-IF。

练手

在components目录下创建一个maincomponent.vue的文件，内容嘛，直接复制实例HelloWorld.vue的也可以。

image.png

因为我们还没讲路由，所以嘛，我们要在App.vue中进行配置（这里如果不清楚为啥的，就去上一章看我画的那张图，component要在App.vue中配置或者在路由中配置，才能被调用到）。
App.vue只需要在<template></template>内加上<maincomponent></maincomponent>
见图（话说我知道肯定有的人干脆就不看我写的这些东西，而是直接照着图上的代码打一遍）

image.png
来看下效果，实际上就是在模板里面把刚刚我们写的这一块给接上了
image.png

路由

脚手架的作用就是把整个的结构给你搭建好，你按这个来就可以了。
路由嘛~自己去搜干嘛用的就可以，只需要知道在路由里面，按你配置的要求调用对应组件去展示就可以了。
删掉上面App.vue中我们配置的<maincomponent></maincomponent>，因为这里已经引入了<router-view/>我们直接去路由router/index.js中配置就可以了。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import maincomponent from '../components/maincomponent'

Vue.use(Router)

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

不贴图了，直接上代码（反正就这么几行）
运行结果如下：

image.png

加一个跳转吧

上面基本语法说了，组件说了，刚刚路由也说了，基本上就这些东西，只不过这里比较概括，细节没写，原理类似，写到细节的时候找文档就可以了。
App.vue中增加跳转

<ul class="nav nav-pills" id="navlink">
   <li>
     <router-link to="/main">点我到主页</router-link>
   </li>
   <li>
     <router-link to="/">回首页</router-link>
   </li>
</ul>

image.png

点击“点我到主页”，跳转页面如下：

image.png