組價(jià)件化開(kāi)發(fā)
組件
- 組件就是一個(gè)自定義的html標(biāo)簽，通過(guò)組件名作為自定義標(biāo)簽名
組件注冊(cè)
- 全局組件
- 全局祖冊(cè)設(shè)置在根實(shí)例注冊(cè)之前
Vue.component('組件名',{
/*
選項(xiàng)內(nèi)容
*/
template: '<div>這是全局祖冊(cè)的組件</div>'
});
-
選項(xiàng)內(nèi)容
- template選項(xiàng)
- 設(shè)置組件的結(jié)構(gòu)，最終被引入根實(shí)例或其他組件中
- 只能有一個(gè)根元素
- data選項(xiàng) 必須是一個(gè)函數(shù)，return返回?cái)?shù)據(jù)
- template選項(xiàng)
-
局部組件
new Vue ({ ... components: { 'my-con':{ template : '#tmp', data(){ return { title : '標(biāo)題' } } } } })
組件通信
組件間數(shù)據(jù)傳遞叫組件通信
-
父組件傳遞給子組件
- 通過(guò)子組件的props選項(xiàng)接收父組件的傳值
- 父子組件間的所以props都是單向下行綁定的
- props屬性的命名規(guī)則：
- 建議使用camelCase 采用kebab-case進(jìn)行綁定
<html> <div id="app"> <h1>我是標(biāo)題</h1> <my-con :title="title" :content="content"></my-con> </div> </html> <script> new Vue({ ... data : { title: '我是標(biāo)題', content:'我是內(nèi)容哈哈哈' }, components: { 'my-con':{ template : ` <div> <h2>{{title}}</h2> <p>{{content}}</p> </div>`, props: ['title','content'] } } }); </script> -
子組件傳遞給父組件
- 通過(guò)事件向父組件傳值
<html> <div id="app"> <product-item v-for="product in products" :title="product.title" :key="product.id" @count-change="totalCount+=$event"></product-item> </div> </html> <script> Vue.component('product-item',{ props : ['title'], template : ` <div> <span>商品名稱：{{title}}</span> <span>商品個(gè)數(shù): {{count}}</span> <button @click="countIns">+1</button> </div> `, data(){ return { count:0 } }, methods: { countIns(){ this.$emit('count-change',); this.count++; } } }) new Vue({ el : '#app', data : { products : [ {id:1,title:'蘋(píng)果1斤'} ], totalCount: 0 } }) </script> -
組件與v-model
- v-model用于組件時(shí)，需要通過(guò)props與自定義事件實(shí)現(xiàn)
-
非父子組件的傳值
- 兄弟組件的傳值
-
其他的通信方式
- eventBus
- 發(fā)送數(shù)據(jù)的組件觸發(fā)bus事件，接收的組件給bus注冊(cè)對(duì)應(yīng)的事件
- 給bus注冊(cè)對(duì)應(yīng)的事件通過(guò)$on()操作
- $root 訪問(wèn)當(dāng)前組件樹(shù)的根實(shí)例，不建議使用
-
chidren 用于便捷訪問(wèn)父子組件 不建議使用
- $refs 獲取設(shè)置ref屬性的html標(biāo)簽或子組件
- 給子組件設(shè)置ref屬性，渲染后通過(guò)$refs獲取子組件實(shí)例
組件插槽
- 插槽 slot
- 單個(gè)插槽
<body>
<div id="app">
<com-a>
<p>這是第一個(gè)組件的內(nèi)容</p>
</com-a>
</div>
</body>
<script>
Vue.componet('com-a',{
template:`
<div>
<h3>組件的標(biāo)題</h3>
<slot></slot>
</div>
`
})
</script>
- 可以在插槽中設(shè)置默認(rèn)內(nèi)容，如果沒(méi)有傳入內(nèi)容默認(rèn)就是顯示默認(rèn)內(nèi)容
- 具名插槽
<body>
<div id="app">
<com-a>
<p slot="header">這是第一個(gè)組件的內(nèi)容</p>
<p slot="footer">我是腳步</p>
</com-a>
</div>
</body>
<script>
Vue.componet('com-a',{
template:`
<div>
<h3>組件的標(biāo)題</h3>
<slot name="header"></slot>
<slot name="footer"></slot>
</div>
`
})
</script>
內(nèi)置組件
- 動(dòng)態(tài)組件
- 適用于多個(gè)組件頻繁切換的處理
- component用于將一個(gè)元組件渲染為動(dòng)態(tài)組件，以is屬性決定渲染哪個(gè)組件
- is屬性會(huì)每次切換組件時(shí)，vue都會(huì)創(chuàng)建一個(gè)新的組件實(shí)例
- keep-live組件
- 用于保留組件狀態(tài)或避免組件重新渲染
- include可以是數(shù)組可以是正則可以是字符串
- exclude屬性用于指定哪些組件不會(huì)被緩存
- max屬性用于設(shè)置最大緩存?zhèn)€數(shù)
<body> <keep-live :include="/Com[ABC] /"> <component :is="currentCom"></compontent> </keep-live> </body> - 過(guò)渡組件
- 用于在vue插入，更新，或者移除DOM時(shí)，提供多種不同方式的應(yīng)用過(guò)渡，動(dòng)畫(huà)效果
- transition組件
- 條件渲染 v-if
- 條件展示 v-show
- 動(dòng)態(tài)組件
- 組件根節(jié)點(diǎn)
- 進(jìn)入的類名
- v-enter
- v-enter-to
- v-enter-active
- 離開(kāi)的類名
- v-leave
- v-leave-to
- v-leave-active
- 設(shè)置了name的transition組件需要將v-改成name-
- 自定義過(guò)渡類名
- transition-group
- 用于給列表統(tǒng)一設(shè)置過(guò)渡動(dòng)畫(huà)
vue Router
- vue router 是vue.js的官方插件，用來(lái)快速實(shí)現(xiàn)單頁(yè)應(yīng)用
單頁(yè)應(yīng)用
- 指的是網(wǎng)站的所以功能都在的單個(gè)頁(yè)面中進(jìn)行呈現(xiàn)
- 具有代表性的有后臺(tái)管理系統(tǒng)，移動(dòng)端，小程序等
- 優(yōu)點(diǎn)：
- 前后端分離，提高了開(kāi)發(fā)效率
- 業(yè)務(wù)場(chǎng)景切換時(shí)，局部更新結(jié)構(gòu)
- 用戶體驗(yàn)好，更加接近本地應(yīng)用
- 缺點(diǎn)：
- 不利于seo
- 初次首屏加載速度比較慢
- 頁(yè)面復(fù)雜度比較高
前端路由
- 前端路由指的是url與內(nèi)容間的映射關(guān)系
- hash方式
- 通過(guò)haskchange事件監(jiān)聽(tīng)hash變化，并進(jìn)行網(wǎng)頁(yè)內(nèi)容更新
- location.hash.replace('#','');
const router = { routes: {}, route(path,callback){ this.routes[path] = callback; }, //初始化路由 init(){ const that = this; window.onhashchange = function(){ const hash = location.hash.replace('#',''); that.routes[hash] && this.routes[hash](); } } }; - history方式
- 采用的是html5提供的新功能實(shí)現(xiàn)前端路由
const router = { routes: {}, route(path,callback){ this.routes[path] = callback; }, go(path){ history.pushState(null,null,path){ this.routes[path] && this.routes[path](); } } };
vue router
- 基本使用
- 安裝
- 提供了 router-link router-view
- router-link 默認(rèn)是a標(biāo)簽 可以通過(guò)tag設(shè)置
- router-view顯示路由匹配到的組件
- 命名視圖
- 如果導(dǎo)航后，希望同時(shí)在同級(jí)展示多個(gè)視圖(組件),這時(shí)就需要進(jìn)行命名視圖
- 路由中通過(guò)components屬性進(jìn)行設(shè)置不同視圖的對(duì)應(yīng)組件
- 編程式導(dǎo)航
- router.push()用來(lái)導(dǎo)航到一個(gè)新的url
- router-link的to屬性使用綁定方式也可屬性對(duì)象結(jié)構(gòu)
- 導(dǎo)航守衛(wèi)
router.beforeEach((to,from,next)=>{ console.log(to,from); next(); })
vue-cli
- 創(chuàng)建項(xiàng)目 vue create project-demo
- 啟動(dòng)項(xiàng)目 npm run serve
- 目錄與文件
- public 預(yù)覽文件目錄
- src
- assets 靜態(tài)資源目錄
- components 項(xiàng)目組件目錄
- App.vue 根目錄
- main.js 入口文件
- 打包與部署
- 打包
- npm run build 打包
- 部署
- npm i -g serve 靜態(tài)文件服務(wù)器
- 在dist下通過(guò)serve直接開(kāi)啟一個(gè)服務(wù)器
- 打包
