在上一章我们了解了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
网友评论