柚子快報(bào)激活碼778899分享：vue.js Vue從零到實(shí)戰(zhàn)
柚子快報(bào)激活碼778899分享：vue.js Vue從零到實(shí)戰(zhàn)
?????歡迎來(lái)到我的博客，很高興能夠在這里和您見(jiàn)面！希望您在這里可以感受到一份輕松愉快的氛圍，不僅可以獲得有趣的內(nèi)容和知識(shí)，也可以暢所欲言、分享您的想法和見(jiàn)解。
非常期待和您一起在這個(gè)小小的網(wǎng)絡(luò)世界里共同探索、學(xué)習(xí)和成長(zhǎng)。??? ?? 歡迎訂閱本專(zhuān)欄 ?? ?
前言
本欄目是根據(jù)黑馬程序員的網(wǎng)課來(lái)整理的筆記，也會(huì)結(jié)合我的一些個(gè)人見(jiàn)解，來(lái)記錄自己學(xué)習(xí)Vue的過(guò)程，俗話(huà)說(shuō)，好記性不如爛筆頭，小鄭喜歡在學(xué)習(xí)的過(guò)程中記筆記，記下自己在學(xué)習(xí)過(guò)程中難以理解的知識(shí)點(diǎn)，反復(fù)練習(xí)，加深印象，小鄭打算在這個(gè)暑假的第一個(gè)月學(xué)習(xí)完Vue從0到1實(shí)現(xiàn)項(xiàng)目，希望廣大網(wǎng)友一起監(jiān)督學(xué)習(xí)，互相進(jìn)步!
自定義指令
1.指令介紹
內(nèi)置指令：v-html、v-if、v-bind、v-on... 這都是Vue給咱們內(nèi)置的一些指令，可以直接使用 自定義指令：同時(shí)Vue也支持讓開(kāi)發(fā)者，自己注冊(cè)一些指令。這些指令被稱(chēng)為自定義指令 每個(gè)指令都有自己各自獨(dú)立的功能
2.自定義指令
概念：自己定義的指令，可以封裝一些DOM操作，擴(kuò)展額外的功能
3.自定義指令語(yǔ)法
全局注冊(cè)
//在main.js中
Vue.directive('指令名', {
? "inserted" (el) {
? ? // 可以對(duì) el 標(biāo)簽，擴(kuò)展額外功能
el.focus()
? }
})
局部注冊(cè)
//在Vue組件的配置項(xiàng)中
directives: {?
"指令名": {?
? inserted () {?
? ? // 可以對(duì) el 標(biāo)簽，擴(kuò)展額外功能 ?
? el.focus()? ? }? }}
使用指令 注意：在使用指令的時(shí)候，一定要先注冊(cè)，再使用，否則會(huì)報(bào)錯(cuò) 使用指令語(yǔ)法： v-指令名。如： 注冊(cè)指令時(shí)不用加v-前綴，但使用時(shí)一定要加v-前綴
4.指令中的配置項(xiàng)介紹
inserted:被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用的鉤子函數(shù)
el：使用指令的那個(gè)DOM元素
自定義指令-指令的值
1.需求
實(shí)現(xiàn)一個(gè) color 指令 - 傳入不同的顏色, 給標(biāo)簽設(shè)置文字顏色
2.語(yǔ)法
1.在綁定指令時(shí)，可以通過(guò)“等號(hào)”的形式為指令 綁定 具體的參數(shù)值
2.通過(guò) binding.value 可以拿到指令值，指令值修改會(huì) 觸發(fā) update 函數(shù)
directives: {
? color: {
? ? inserted (el, binding) {
? ? ? el.style.color = binding.value
? ? },
? ? update (el, binding) {
? ? ? el.style.color = binding.value
? ? }
? }
}
v-loading指令的封裝
1.場(chǎng)景
實(shí)際開(kāi)發(fā)過(guò)程中，發(fā)送請(qǐng)求需要時(shí)間，在請(qǐng)求的數(shù)據(jù)未回來(lái)時(shí)，頁(yè)面會(huì)處于空白狀態(tài) => 用戶(hù)體驗(yàn)不好
2.需求
封裝一個(gè) v-loading 指令，實(shí)現(xiàn)加載中的效果
3.分析
1.本質(zhì) loading效果就是一個(gè)蒙層，蓋在了盒子上
2.數(shù)據(jù)請(qǐng)求中，開(kāi)啟loading狀態(tài)，添加蒙層
3.數(shù)據(jù)請(qǐng)求完畢，關(guān)閉loading狀態(tài)，移除蒙層
4.實(shí)現(xiàn)
1.準(zhǔn)備一個(gè) loading類(lèi)，通過(guò)偽元素定位，設(shè)置寬高，實(shí)現(xiàn)蒙層
2.開(kāi)啟關(guān)閉 loading狀態(tài)（添加移除蒙層），本質(zhì)只需要添加移除類(lèi)即可
3.結(jié)合自定義指令的語(yǔ)法進(jìn)行封裝復(fù)用
插槽-默認(rèn)插槽
1.作用
讓組件內(nèi)部的一些 結(jié)構(gòu) 支持 自定義
2.需求
將需要多次顯示的對(duì)話(huà)框,封裝成一個(gè)組件
3.問(wèn)題
組件的內(nèi)容部分，不希望寫(xiě)死，希望能使用的時(shí)候自定義。怎么辦
4.插槽的基本語(yǔ)法
組件內(nèi)需要定制的結(jié)構(gòu)部分，改用
插槽-后備內(nèi)容（默認(rèn)值）
1.問(wèn)題
通過(guò)插槽完成了內(nèi)容的定制，傳什么顯示什么, 但是如果不傳，則是空白
2.插槽的后備內(nèi)容
封裝組件時(shí)，可以為預(yù)留的
3.語(yǔ)法
在
4.效果
外部使用組件時(shí)，不傳東西，則slot會(huì)顯示后備內(nèi)容
外部使用組件時(shí)，傳東西了，則slot整體會(huì)被換掉
插槽-具名插槽
1.需求
一個(gè)組件內(nèi)有多處結(jié)構(gòu)，需要外部傳入標(biāo)簽，進(jìn)行定制
上面的彈框中有三處不同，但是默認(rèn)插槽只能定制一個(gè)位置，這時(shí)候怎么辦呢?
2.具名插槽語(yǔ)法
多個(gè)slot使用name屬性區(qū)分名字
template配合v-slot:名字來(lái)分發(fā)對(duì)應(yīng)標(biāo)簽
3.v-slot的簡(jiǎn)寫(xiě)
v-slot寫(xiě)起來(lái)太長(zhǎng)，vue給我們提供一個(gè)簡(jiǎn)單寫(xiě)法 v-slot —> #
作用域插槽
1.插槽分類(lèi)
默認(rèn)插槽 具名插槽 插槽只有兩種，作用域插槽不屬于插槽的一種分類(lèi)
2.作用
定義slot 插槽的同時(shí), 是可以傳值的。給 插槽 上可以 綁定數(shù)據(jù)，將來(lái) 使用組件時(shí)可以用
3.場(chǎng)景
封裝表格組件
4.使用步驟
給 slot 標(biāo)簽, 以 添加屬性的方式傳值
?
? ?
?
單頁(yè)應(yīng)用程序介紹
1.概念
單頁(yè)應(yīng)用程序：SPA【Single Page Application】是指所有的功能都在一個(gè)html頁(yè)面上實(shí)現(xiàn)
2.具體示例
單頁(yè)應(yīng)用網(wǎng)站： 網(wǎng)易云音樂(lè)
多頁(yè)應(yīng)用網(wǎng)站：京東
3.單頁(yè)應(yīng)用 VS 多頁(yè)面應(yīng)用
單頁(yè)應(yīng)用類(lèi)網(wǎng)站：系統(tǒng)類(lèi)網(wǎng)站 / 內(nèi)部網(wǎng)站 / 文檔類(lèi)網(wǎng)站 / 移動(dòng)端站點(diǎn)
多頁(yè)應(yīng)用類(lèi)網(wǎng)站：公司官網(wǎng) / 電商類(lèi)網(wǎng)站
路由的基本使用
作用
修改地址欄路徑時(shí)，切換顯示匹配的組件
VueRouter的使用
下載 VueRouter 模塊到當(dāng)前工程，版本3.6.5 yarn add vue-router@3.6.5 / npm install vue-router@3.6.5 main.js中引入VueRouter import VueRouter from 'vue-router' 安裝注冊(cè) Vue.use(VueRouter) 創(chuàng)建路由對(duì)象 const router = new VueRouter() 注入，將路由對(duì)象注入到new Vue實(shí)例中，建立關(guān)聯(lián) new Vue({
? render: h => h(App),
? router:router
}).$mount('#app') ?
當(dāng)我們配置完以上5步之后 就可以看到瀏覽器地址欄中的路由 變成了 /#/的形式。表示項(xiàng)目的路由已經(jīng)被Vue-Router管理了
兩個(gè)核心步驟
創(chuàng)建需要的組件 (views目錄)，配置路由規(guī)則
配置導(dǎo)航，配置路由出口(路徑匹配的組件顯示的位置)
App.vue
?
組件的存放目錄問(wèn)題
注意： .vue文件 本質(zhì)無(wú)區(qū)別
1.組件分類(lèi)
.vue文件分為2類(lèi)，都是 .vue文件（本質(zhì)無(wú)區(qū)別）
頁(yè)面組件 （配置路由規(guī)則時(shí)使用的組件） 復(fù)用組件（多個(gè)組件中都使用到的組件）
2.存放目錄
分類(lèi)開(kāi)來(lái)的目的就是為了 更易維護(hù)
src/views文件夾 頁(yè)面組件 - 頁(yè)面展示 - 配合路由用 src/components文件夾 復(fù)用組件 - 展示數(shù)據(jù) - 常用于復(fù)用
??????小鄭是普通學(xué)生水平，如有紕漏，歡迎各位大佬評(píng)論批評(píng)指正！???
???如果覺(jué)得這篇文對(duì)你有幫助的話(huà)，也請(qǐng)給個(gè)點(diǎn)贊、收藏下吧，非常感謝!? ? ?
柚子快報(bào)激活碼778899分享：vue.js Vue從零到實(shí)戰(zhàn)
好文閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Ozsale折扣專(zhuān)家
