Vue2+Vue3前端開發

Vue2+Vue3前端開發_Day5

參考課程:

【黑馬程序員 Vue2+Vue3基礎入門到實戰項目】

[https://www.bilibili.com/video/BV1HV4y1a7n4]

@ZZHow(ZZHow1024)

自定義指令

基本語法（全局 & 局部注冊）

介紹：自己定義的指令，可以封裝一些 DOM 操作，擴展額外功能。
全局注冊 - 語法

Vue.directive('指令名', {"inserted" (el) {// 可以對 el 標簽，擴展額外功能el.focus();}
});

局部注冊 - 語法

directives: {"指令名": {inserted() {// 可以對 el 標簽，擴展額外功能el.focus();}}
}

指令的值
- 語法：在綁定指令時，可以通過**“等號”**的形式為指令綁定具體的參數值。
```
<div v-color="color">我是內容</div>
```
- 通過 binding.value 可以拿到指令值，指令值修改會觸發 update 函數。
```
directives: {color: {inserted (el, binding) {el.style.color = binding.value;},update(el, binding) {el.style.color = binding.value;}}
}
```
v-loading 指令封裝
- 場景：實際開發過程中，發送請求需要時間，在請求的數據未回來時，頁面會處于空白狀態，用戶體驗不好。
- 需求：封裝一個 v-loading 指令，實現加載中的效果。
- 思路：
  1. 本質 loading 效果就是一個蒙層，蓋在了盒子上。
  2. 數據請求中，開啟 loading 狀態，添加蒙層。
  3. 數據請求完畢，關閉 loading 狀態，移除蒙層。
- 實現：
  1. 準備一個 loading 類，通過偽元素定位，設置寬高，實現蒙層。
  2. 開啟關閉 loading 狀態（添加移除蒙層），本質只需要添加移除類即可。
  3. 結合自定義指令的語法進行封裝復用。
- inserted 鉤子中，binding.value 判斷指令的值，設置默認狀態。
- update 鉤子中，binding.value 判斷指令的值，更新類名狀態。

插槽

默認插槽
- 作用：讓組件內部的一些結構支持自定義。
- 需求：要在頁面中顯示一個對話框，封裝成一個組件。
- 問題：組件的內容部分，不希望寫死，希望能使用的時候自定義。
- 基本語法：
  - 組件內需要定制的結構部分，改用 <slot>…</slot> 占位。
```
<div class="dialog-content"><slot></slot>
</div>
```
  - 使用組件時，<MyDialog>…</MyDialog> 標簽內部，傳入結構替換 slot。
```
<MyDialog>你確認要退出本系統么？
</MyDialog>
```
后備內容（默認值）
- 介紹：封裝組件時，可以為預留的 <slot>…</slot> 插槽提供后備內容（默認內容）。
- 語法：在 <slot>…</slot> 標簽內，放置內容，作為默認顯示內容。
- 效果：
  - 外部使用組件時，不傳東西，則 <slot>…</slot> 會顯示后備內容。
  - 外部使用組件時，傳東西了，則 <slot>…</slot> 整體會被換掉。
具名插槽
- 定義：一個組件內有多處結構，需要外部傳入標簽，進行定制。
- 語法：
  - 多個 <slot>…</slot> 使用 name 屬性區分名字。
  - template 配合 v-slot:名字 來分發對應標簽。
  - v-slot:插槽名 可以簡化成 #插槽名。
插槽分類：
- 默認插槽：組件內定制一處結構。
- 具名插槽：組件內定制多處結構。
作用域插槽
- 區分：是插槽的一個傳參語法，不屬于插槽的一類。
- 介紹：定義 <slot>…</slot> 插槽的同時，是可以傳值的。給插槽上可以綁定數據，將來使用組件時可以用。
- 步驟：
  1. 給 <slot>…</slot> 標簽，以添加屬性的方式傳值。
  2. 所有添加的屬性，都會被收集到一個對象中。
  3. 在 template 中，通過 #插槽名="obj"，默認插槽名為 default。

綜合案例：商品列表

需求：
- my-tag 標簽組件封裝
  1. 雙擊顯示輸入框，輸入框獲取焦點。
  2. 失去焦點，隱藏輸入框。
  3. 回顯標簽信息。
  4. 內容修改，回車-修改標簽信息。
- my-table 表格組件封裝
  1. 動態傳遞表格數據渲染。
  2. 表頭支持用戶自定義。
  3. 主體支持用戶自定義。
技術點：
1. props 父傳子、$emit 子傳父和 v-model。
2. $nextTick 自定義指令。
3. 插槽：具名插槽、作用域插槽。
案例演示：product-list

路由入門

單頁應用程序

SPA - Single Page Application
單頁面應用(SPA)：所有功能在一個 HTML 頁面上實現。
典型案例：網易云音樂

單頁應用程序對比多頁應用程序

開發分類	實現方式	頁面性能	開發效率	用戶體驗	學習成本
單頁	一個 HTML 頁面	按需更新
性能高	高	非常好	高	慢	差
多頁	多個 HTML 頁面	整頁更新
性能低	中等	一般	中等	快	優

單頁應用程序常用類型：系統類、內部網站、文檔類網站和移動端站點
多頁應用程序常用類型：公司官網和電商類網站

路由概念
- 網絡中的路由器：設備和 IP 的映射關系。
- Vue 中的路由：路徑和組件的映射關系。
VueRouter 的基本使用
- 目標：認識插件 VueRouter，掌握 VueRouter 的基本使用步驟。
- 作用：修改地址欄路徑時，切換顯示匹配的組件。
- 說明：Vue 官方的一個路由插件，是一個第三方包。
- 官網：
  
  Vue Router
- 版本對應（233，344）：
  - Vue2 → VueRouter3.x - Vuex3.x
  - Vue3 → VueRouter4.x - Vuex4.x
- 使用步驟：
  - 5 個基礎步驟（固定）
    1. 下載：下載 VueRouter 模塊到當前工程，版本3.x。
```
npm install vue-router@3
```
    1. 引入。
```
import VueRouter from'vue-pouter';
```
    1. 安裝注冊。
```
Vue.use(VueRouter);
```
    1. 創建路由對象。
```
const router = new VueRouter();
```
    1. 注入，將路由對象注入到 new Vue 實例中，建立關聯。
```
new Vue({render: h => h(App),router
}).$mount('#app')
```
  - 2 個核心步驟（根據項目需要配置）
    1. 創建需要的組件（views 目錄），配置路由規則。
      
      如：Find.vue、My.vue 和 Friend.vue。
```
import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'const router = new VueRouter({routes: [{ path: '/find', component: Find },{ path: '/my', component: My },{ path: '/friend', component: Friend },]
})
```
    1. 配置導航，配置路由出口（路徑匹配的組件顯示的位置）。
```
<div class="footer_wrap"><a href="#/find">發現音樂</a><a href="#/my">我的音樂</a><a href="#/friend">朋友</a>
</div>
<div class="top"><router-view></router-view>
</div>
```
組件目錄存放問題
- 注意：.vue 文件放在哪里，文件本身并沒有區別。
- 分類的目的：便于維護。
- 組件分類：
  - 頁面組件
    - 使用場景：頁面展示 - 配合路由使用。
    - 路徑：src/views
  - 復用組件
    - 使用場景：展示數據 - 常用于復用。
    - 路徑：src/components

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/919663.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/919663.shtml
英文地址，請注明出處：http://en.pswp.cn/news/919663.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！