爲什麼要用Vue.js框架來？當我們寫一個比較大的項目的時候就會發現，如果單純的將頁面寫成html或者jsp的時候，不僅頁面之間的邏輯跳轉很麻煩而且因爲沒有實現功能板塊之間的分離，所以後期的功能維護極其麻煩。VUE的出現就解決了這些問題，因爲它是單頁面應用，使頁面局部刷新，不用每次跳轉頁面都要請求所有數據和dom，這樣大大加快了訪問速度和提升用戶體驗。
先講板塊的分離，例如我們想寫一個登錄的界面，這個界面裏面有兩個功能區，一個是輸入賬號，密碼的登陸區，還有一個是公告欄區。分離的概念就是對應着.vue文件，每個.vue文件裏面放一個功能區，這樣後期維護就不用在整個登錄界面的html裏面修改源代碼，直接修改功能板塊所對應的.vue文件裏面的源代碼。那html對應的css，js怎麼辦？在每個.vue文件裏分開引入嗎？VUE.JS早就想好了。每個.vue文件裏面分爲三個板塊：
1，< /template >裏面放置html代碼
2，裏面放置css代碼
3，裏面放置js代碼
Vue.js 的核心是一個允許你採用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統。簡單來說就是可以通過js，Vue的語法將數據渲染到界面。每個 Vue 應用都需要通過實例化 Vue 來實現。例如：
<div id="app">
<div v-html="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>這是標題</h1>'
}
})
</script>
這就是一個簡單的數據渲染。真正用Vue開發前端的時候我們一般都用手腳架Vue cli他的功能如其名就是爲我們搭好框架將底層文件配置有助於我們迅速直接開發。在Vue cli中的文件劃分主要如下：
assets//主要放css文件與圖片文件再分兩個包
components//放公共組件。也可以分爲common//放項目之間的公共content//放業務相關的組件
views//放主要的組件
router//放路由
store//公共狀態管理文件夾
network//網絡相關的都放在這
common//公共js文件
接下來主要介紹一下我覺得重要的地方，路由——router
路由的作用就是管理頁面組件之間的組成以及跳轉，路由就是一個.js文件。
Const router =[]裏面就是配置每個組件的名稱，路徑，組件。例如一個登錄界面裏面包括登錄功能和公告欄功能
它的路由配置就是
const routes = [
{
path: '/homepage',
name: 'homepage',
component: homepage,
children: [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/notice',
name: 'notice',
component: notice
}
]
}
]
這樣就是將登錄與公告欄兩個功能區放在了homepage裏面
然後將整個homepage組件通過與放在App.vue裏面顯示，其中的作用主要是指明要展示的組件的路徑，就是用來展示組件如果沒有它既是加了頁面也不會顯示
想跳轉路徑時可以用
this.$router.push({
path: '*' })
語法進行跳轉，這個跳轉的實現就是改變剛剛組件所在裏的路徑，還是顯示在組件對應的所處的位置。
希望淺薄的知識對你有幫助。
Web開發學習之路仍在繼續…