為什么要用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開發學習之路仍在繼續…
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/246534.html
標籤：其他
上一篇：微服務架構下的子服務器記憶體波動