Vue路由

Vue_UI組件庫

http://mint-ui.github.io/docs/#/zh-cn/quickstart

npm安裝

npm?i?mint-ui@1?-S

CDN

目前可以通過 unpkg.com/mint-ui@1 獲取到最新版本的資源，在頁面上引入 js 和 css 文件即可開始使用。

引入整個Mint UI

在 main.js 中寫入以下內容：

import?Vue?from?'vue' import?MintUI?from?'mint-ui' import?'mint-ui/lib/style.css' import?App?from?'./App.vue' Vue.use(MintUI) new?Vue({ ??el:?'#app', ??components:?{?App?} })

按需引入

借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

安裝 babel-plugin-component：

npm?install?babel-plugin-component?-D

然后，將 .babelrc 修改為：

{ ??"presets":?[ ????["es2015",?{?"modules":?false?}] ??], ??"plugins":?[["component",?[ ????{ ??????"libraryName":?"mint-ui", ??????"style":?true ????} ??]]] }

啟動：npm run dev

編譯：npm run build

vue-router

路由介紹:

github: https://github.com/vuejs/vue-router

中文文檔: http://router.vuejs.org/zh-cn/

安裝? npm install vue-router --save

vue用來實現SPA的插件

使用vue-router ????????1.?創建路由器:?router/index.js ??????????new?VueRouter({ ????????????routes:?[ ??????????????{?//?一般路由 ????????????????path:?'/about', ????????????????component:?about ??????????????}, ??????????????{?//?自動跳轉路由 ????????????????path:?'/',? ????????????????redirect:?'/about' ??????????????} ????????????] ??????????}) ????????2.?注冊路由器:?main.js ???????????import?router?from?'./router' ??????????? new?Vue({ ??????????? router ??????????? }) ????????3.?使用路由組件標簽: ??????????? Go?to?XXX ???????????

編寫路由的3步

定義路由組件

映射路由

編寫路由2個標簽

嵌套路由

children:?[ ????????????{ ??????????????path:?'/home/news', ??????????????component:?news ????????????}, ????????????{ ??????????????path:?'message', ??????????????component:?message ????????????} ?????????]

向路由組件傳遞數據

params:? ????????props:?

使用路由組件標簽

:??????????????用來生成路由鏈接 ????Go?to?XXX ???? ?:?用來顯示當前路由組件界面 ????

緩存路由組件的書寫方式為

??????????

相關API

this.$router.push(path): 相當于點擊路由鏈接(可以返回到當前路由界面)

this.$router.replace(path): 用新路由替換當前路由(不可以返回到當前路由界面)

this.$router.back(): 請求(返回)上一個記錄路由

數據綁定

一旦更新了 data 中的某個屬性數據, 所有界面上直接使用或間接使用了此屬性的節點都會

更新

數據劫持

數據劫持是 vue 中用來實現數據綁定的一種技術

數據劫持（數據綁定）的四個重要對象為

Observer 是用來給數據添加Dep依賴

Dep 是data每個對象包括子對象都擁有一個該對象, 當所綁定的數據有變更時, 通過dep.notify()通知Watcher。

Compile? 是HTML指令解析器，對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數。

Watcher? 是連接Observer和Compile的橋梁，Compile解析指令時會創建一個對應的Watcher并綁定update方法 , 添加到Dep對象上。

Vue數據代理的實現

- 通過 Object.defineProperty()給 vm 添加與 data 對象的屬性對應的屬性描述符

所有添加的屬性都包含 getter/setter

getter/setter 內部去操作 data 中對應的屬性數據

雙向數據綁定

雙向數據綁定是建立在單向數據綁定(model==>View)的基礎之上的

雙向數據綁定的實現流程

在解析 v-model 指令時, 給當前元素添加 input 監聽

當 input 的 value 發生改變時, 將最新的值賦值給當前表達式所對應的 data 屬性

VueRouter匹配優先級

有時候，同一個路徑可以匹配多個路由，此時，匹配的優先級就按照路由的

定義順序：誰先定義的，誰的優先級就最高

正常代碼邏輯應該是越往下優先級越高，但在router 上正好相反

下面案例兩個組件都對應有一個地址，但是'sapp' 的組件在路由中最先被注冊，

因此優先使用

NAT Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。