前端開發vue

框架： 一套現成的解決方案，程序員只能遵守框架的規則，去構造自己的業務，學習vue就是在學習vue中規定的用法，組件是對UI的復用 

構造用戶界面：用vue向頁面中填充數據，非常方便。

vuex： Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式 + 庫。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

　　狀態自管理應用包含以下幾個部分：

• 狀態，驅動應用的數據源；
• 視圖，以聲明方式將狀態映射到視圖；
• 操作，響應在視圖上的用戶輸入導致的狀態變化。

為什么使用vuex？

當我們的應用遇到多個組件共享狀態時，單向數據流的簡潔性很容易被破壞：

• 多個視圖依賴于同一狀態。
• 來自不同視圖的行為需要變更同一狀態。

:

 

 webpack  是前端工程化的具體解決方案 

 

 

 

-S 開發和上線運行的時候都要用的包  就用-S 

只是開發的話，用-D

 

 

 

 

 

 

為了修改源代碼后直接看到效果 :  

 

 

base64圖片  優點:可以防止發起過多的網絡請求    

　　　　缺點: 體積會變大 

 

 

 上線運行打包項目的時候，在package.json文件的scripts節點下，新增build項目，使用命令 npm run build  

--mode production  可以在打包時壓縮項目。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 或者直接關閉 Source Map

 

 

 

 

單向數據綁定：數據驅動視圖

 

 

雙向數據綁定 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 v-bind使用中， 它的內容是js語法，所以如果要給定一個字符串9，必須是這樣    :age="  '9' "  ，這才是一個字符串的9 

 

 

 

 

 

 

 

 

 

 

 

 

 當一個事件對象需要 使用參數時，可以用原生的$event這個參數，來代表這個元素本身。如e.target即指向這個button元素 

 

 

 

 

 

 

 

 

 

 

 

 

 

 v-model只能用于表單元素，是雙向綁定。 

 

 

 

 

 

 

 

 

 

 

 

過濾器： vue3中已被淘汰，只能用在vue2，它是一個函數

 

 

 

 

 

 

 

 

 

 全局過濾器：  day.js需要從第三方庫引入。

 

 

 

 

 偵聽器：

 

 

 

 

 

 

 

 

 ###方法格式：

 

 

 

 

 

 

 

 

計算屬性：  最終還是一個屬性 定義的時候是方法，用的時候是屬性 

 

 

 

定義的時候是方法，用的時候是屬性 

 

 

 

 

 

 

 

 

 

 

 

 

 經過我實際使用：

get不能使用data，data中的數據不會發送也接收不到，它只能用params傳值。 post可以使用data，也可以使用params。

payload是一種以json格式傳送數據的方式。

 

 

 

 vue-cli

 

 

 單頁面應用程序：復雜程度高

 

 

 

 

 

 

 

 

 

 

 

main.js:  

 

 

 

 

 test.vue：

 

 

 在組件中，this就表示當前組件的實例對象。

 

 組件的使用： 注意最后以標簽的形式使用

 

 

 

 父子傳值：

 

 

 

 

 

 

 當props是一個數組，不能賦初始值， 但它里面所有的內容都是這個vue component這個組件的屬性， 所以都可以直接用this.方法調用，不用在意屬性的位置

　　　props中的　required:true //可以使用required選項來聲明這個參數是否必須傳入。

 

 

 

 

 

 Vue的組件實例：當你使用代表該組件的標簽的時候，就創建了組件實例

 

導入import，全局組件注冊Vue.component（)

 

 

 

 使用：

 

 

 

 vue的生命周期函數:

 

 

 

 created生命周期函數： 很常用，用于發ajax請求。可以調用methods中的方法，或操作data中的數據

通過ajax去發送請求，經常用它去調用methods中的方法來請求服務器的數據，并把請求到的數據，轉存到data中，  供 template 模板渲染頁面的時候使用 

 

 

 在內存中，創建模板結構。

beforeMount：將要把內存中編譯好的HTML頁面結構渲染到瀏覽器，此時瀏覽器還沒有當前組件的DOM結構。

Mounted：初次把內存中的HTML結構渲染到瀏覽器中。最早操作dom元素 。 

 

 

beforeUpdate： 根據變化過后、最新的數據，將要重新渲染HTML結構。

updated：已經根據最新的數據，完成了組件dom結構的重新渲染。

 數據分享：

 

 在使用這種方式傳值的時候，不要在子組件中去修改傳遞過來的值。

 

 

 

 

 

 

this.$refs.xxx   可以獲取DOM元素，也可以獲取子組件中的數據和方法。

 使用方法：在標簽中添加 ref屬性

 

 

 

 

 

 動態組件

 

components  是內置標簽，  是動態使用組件的占位符。注意：現在使用的是components  標簽

 

 

 

 

 

 

 

 exclude屬性： 只有名稱匹配的組件不會被緩存。 和include相反。

這兩個屬性不要同時使用。

 

組件標簽的名稱：當沒有提供name屬性，那就會使用注冊時的名稱。這里推薦給每個組件都使用name名稱，容易區分組件。

 

 注冊名稱：

 

 聲明名稱：

 

 

 

 

具體的使用方式：1和2如下：

 

在components標簽中，  :is屬性綁定的值使用的是組件的注冊名稱，因為這是在組件的渲染過程

 

 

 

插槽

 

 

 

 

 

 

 

 

 

 

 v-slot：的簡寫形式是  #，   v-slot：default等價于 #default

 作用域插槽：在定義slot時，有name屬性，也有別的自定義屬性；

只有name屬性的，叫具名插槽。 

 

使用：在對應的slot名后面  =“scope”  （建議使用scope，作用域的意思）

 

 

結果：

 

 

 

在調用別的自定義屬性時，當做一個對象去調用，如果有多個自定義屬性，那也會匯聚成一個對象。 還可以進行解構賦值。

 

 

 

 

自定義指令：

 

 

el是形參，可以修改； bind是固定的函數名，不可修改。

 

 

 

bind函數的缺點：只會調用一次。

 

 

 

 

 在binder這個對象中，expression屬性是v-color=“color”中的“color”表達式，

在取值的時候還是要使用value屬性。

這里的形參binder最好是binding這個官方約定

 

 

 

 

 

 

update函數，更新時被調用。 

 

 

 

 

原對象如下： 

 

簡寫的函數格式如下： 

 

 

 

全局的自定義指令，必須放在main.js中。 

這是一個簡寫的，不簡寫——function那里換成一個對象

　?。?color：

bind（）｛

｝，

update（）｛

｝｝

 

 

 

 

 把axios掛載到Vue的全局屬性中，使用的話不用導入了。 this.$http.get/post

但是有個缺點：把axios不利于掛載到Vue的原型上， 不利于API接口的復用 

 

 

 

 

 具體使用：  

 

 

 

 路由：router ，對應關系。 

前端路由，就是hash地址與組件之間的對應關系。 不同的hash地址，就展示不同的頁面

 

 #代表hash，在ref跳轉地址中不可省略。

前端路由的工作原理：

 

 

實際中會使用vue-router，不會自己手動配置。

 

 

 

 

 

 

 掛載路由：

 

 

 

 

 因為屬性名router和屬性值router相同，所以可以簡寫為router 

 使用路由router來顯示組件：

 

 實例對象中的routes：是路由規則形成的數組。

讓路由自動跳轉主頁： 

 

當路由組件中還嵌套了一個子級路由的時候，需要使用子路由規則：

 

 注意：子路由的path，不需要寫之前的路徑了，只需要寫它的父級路由之后的路徑；并且子路由規則，最好不要加/

 為哪個路由組件添加子路由規則，加在哪條規則后面，用逗號隔開，添加一個children數組，這個數組中放子級路由規則。

默認子路由的三種實現方式：  我覺得前兩個好用

1 和在父組件中一樣，使用 {path:'/',redirect:'tab1'}, 即path設置為/，后面設置屬性redirect為想要的默認組件 

2 直接在要添加的子路由的children同級下，添加 redirect:'/about/tab1'  

3 將子路由的其中一個path設置為空字符串，后面用component設置默認組件 component:Tab1。

并且在元組件中，將默認子路由的路徑設置為父組件的路徑：如下圖所示 

 

動態路由

用法1：  用冒號+參數去接受不同的組件。  即后面不同的部分用：id來去獲取  

 

 

 

注意1：在hash地址中，/后面的參數叫路徑參數，如123都是路徑參數。

在路由“參數對象”中，通過this.$route.params來訪問路徑參數

注意2：在hash地址中，？后面的叫查詢參數，使用$route.query來訪問查詢參數

 

 注意3：在獲取路徑時，一個是完整地址fullPath，包含了查詢參數；

一個只是路徑path，不包含查詢參數。

 

 

 

 

 

 用法2：  可以用props去傳參，在對應的路由規則中去添加 props：true，  從而方便拿到動態傳參的值。

 

 

然后在對應的組件中去設置props參數。

 

 

聲明式導航：使用a標簽、router-link等通過點擊實現跳轉的導航方式；

編程式導航：通過調用API方法，實現跳轉的導航方式，如下：給button按鈕添加如下的方法即可

 

 實現前進后退的兩種方式：

1、只前進后退一步的，直接使用 $router.back()   $router.forward()方法就行

 

2、可以實現多步的前進后退，數值正前進，數值負后退。

 

導航守衛

 

 

 

 next的三種調用方式：

 

 

導航守衛的具體實現：下面的代碼中， /main是后臺主頁， /login是登錄頁面