vue-cli##
vue-cli是vue官方提供的腳手架的工具
- 使用vue-cli的優(yōu)勢(shì)
- 成熟的vue項(xiàng)目架構(gòu)設(shè)計(jì)
- 提供本地測(cè)試服務(wù)器
- 集成打包上線的方案webpack 或者grulp
- 使用vue-cli的系統(tǒng)要求
image.png
命令行中使用node運(yùn)行js
image.png
工具M(jìn)obaXterm
全局安裝
image.png
vue list 可用的模板
image.png
安裝開發(fā)依賴，可在package.json中查看，
npm install命令
image.png
image.png
npm run dev和npm run builddata采用函數(shù)方式越锈，有自己的作用域
image.png
總結(jié)
image.png
es6語(yǔ)法##
導(dǎo)出com時(shí)递沪，要用花括號(hào)
image.png
引用該組件時(shí)霞玄，也要使用{com}
image.png
前端路由##
前端路由：通過(guò)js控制
安裝路由
配置文件package.json更新了
image.png
在入口文件里引如VRouter，注冊(cè)，實(shí)例化，插入到vue實(shí)例中
設(shè)置映射map
image.png
使用
使用
路由默認(rèn)加了哈希罗标，有一個(gè)#號(hào)
設(shè)置mode:history沒(méi)有哈希，
image.png
image.png
頁(yè)面內(nèi)的跳轉(zhuǎn)积蜻，
router-link內(nèi)置組件闯割，默認(rèn)解讀為一個(gè)a標(biāo)簽
image.png
路由參數(shù)
image.png
映射表里添加color參數(shù)
image.png
組件內(nèi)部獲取參數(shù)，this.$route全局對(duì)象
image.png
image.png
image.png
image.png
image.png
路由嵌套
apple/redapple
image.png
redapple是apple的子組件
訪問(wèn)子路由竿拆，redapple出現(xiàn)
image.png
使用router-link直接跳轉(zhuǎn)
同時(shí)傳入?yún)?shù)
image.png
具名路由宙拉，通過(guò)name訪問(wèn)
image.png
image.png
具名視圖
image.png
在component里為不同的視圖指定不同的組件
image.png
默認(rèn)為a標(biāo)簽，也可以通過(guò)tag指定為li標(biāo)簽
默認(rèn)
router-link為聲明式導(dǎo)航丙笋，在模板里聲明
編程式導(dǎo)航
image.png
結(jié)合使用
image.png
路由重定向##
image.png
過(guò)渡和動(dòng)態(tài)組件##
image.png
用keep-alive做緩存
用keep
類可以在router中進(jìn)行設(shè)置
image.png
總結(jié)
image.png
