在上一章我們了解了vue-cli的流程關(guān)系之后，我們開始來(lái)寫vue的小項(xiàng)目秩命。語(yǔ)法部分簡(jiǎn)單概括下尉共，然后我們處理組件和路由褒傅。
接下來(lái)的部分都是寫代碼相關(guān)的，所以從本章開始以及后面幾章中的代碼都是一個(gè)項(xiàng)目袄友，最后看情況是否放在git上面殿托，主要都比較簡(jiǎn)單，應(yīng)該不需要放上去剧蚣。
語(yǔ)法概括
模板語(yǔ)法
<!-- 從data中找到msg的值并展示在頁(yè)面中-->
{{ msg }}
<!-- 循環(huán)-->
<ul v-for="article in articles">
<li>{{ article }}</li>
</ul>
其他的v-if支竹、v-show……類似，不解釋鸠按，大家到時(shí)候看文檔礼搁。
<!-- 上面代碼中的值從這里獲得-->
<script>
export default {
data () {
return {
msg: 'msg的值直接展示',
articles:['good','batter','best']
}
}
}
</script>
展示結(jié)果如下
完整代碼看圖
組件
組件？自行到官網(wǎng)補(bǔ)充理論吧目尖，地址：http://doc.vue-js.com/v2/guide/components.html 簡(jiǎn)單說(shuō)就是按UI界面劃分馒吴，方便UI組件的重用。
一個(gè)組件下只能有一個(gè)并列的 div卑雁，可以直接復(fù)制示例的div 里面的內(nèi)容募书。
錯(cuò)誤示范如下：
//上面這種寫法會(huì)報(bào)錯(cuò)，錯(cuò)誤提示如下：
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.
簡(jiǎn)單說(shuō)就是組件模板只能包含一個(gè)根元素测蹲。如果在多個(gè)元素上就使用V-IF莹捡。
練手
在components目錄下創(chuàng)建一個(gè)maincomponent.vue的文件，內(nèi)容嘛扣甲，直接復(fù)制實(shí)例HelloWorld.vue的也可以篮赢。
因?yàn)槲覀冞€沒講路由，所以嘛琉挖，我們要在App.vue中進(jìn)行配置（這里如果不清楚為啥的启泣，就去上一章看我畫的那張圖，component要在App.vue中配置或者在路由中配置示辈，才能被調(diào)用到）寥茫。
App.vue只需要在<template></template>內(nèi)加上<maincomponent></maincomponent>
見圖（話說(shuō)我知道肯定有的人干脆就不看我寫的這些東西，而是直接照著圖上的代碼打一遍）
來(lái)看下效果矾麻，實(shí)際上就是在模板里面把剛剛我們寫的這一塊給接上了
路由
腳手架的作用就是把整個(gè)的結(jié)構(gòu)給你搭建好纱耻，你按這個(gè)來(lái)就可以了。
路由嘛~自己去搜干嘛用的就可以险耀，只需要知道在路由里面弄喘，按你配置的要求調(diào)用對(duì)應(yīng)組件去展示就可以了。
刪掉上面App.vue中我們配置的<maincomponent></maincomponent>甩牺，因?yàn)檫@里已經(jīng)引入了<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
}
]
})
不貼圖了，直接上代碼（反正就這么幾行）
運(yùn)行結(jié)果如下：
加一個(gè)跳轉(zhuǎn)吧
上面基本語(yǔ)法說(shuō)了，組件說(shuō)了急但，剛剛路由也說(shuō)了澎媒，基本上就這些東西，只不過(guò)這里比較概括羊始，細(xì)節(jié)沒寫旱幼，原理類似，寫到細(xì)節(jié)的時(shí)候找文檔就可以了突委。
App.vue中增加跳轉(zhuǎn)
<ul class="nav nav-pills" id="navlink">
<li>
<router-link to="/main">點(diǎn)我到主頁(yè)</router-link>
</li>
<li>
<router-link to="/">回首頁(yè)</router-link>
</li>
</ul>
點(diǎn)擊“點(diǎn)我到主頁(yè)”，跳轉(zhuǎn)頁(yè)面如下：
