??1??4??、VueX

??1??4??.1?? Vuex是什么?

• 集中管理所有組件的數(shù)據(jù)
• 可以把它理解為是一個(gè)倉庫
• 將組件中公有的數(shù)據(jù)都抽到VueX中
• VueX中的數(shù)據(jù) 所有的組件都可以獲取 所有的組件都可以修改

??1??4??.2?? 起步

??1??4??.2??.1?? 下載

npm install vuex --save

??1??4??.2??.2?? 創(chuàng)建VueX倉庫

??1??4??.2??.3?? 在組件中獲取VueX的數(shù)據(jù)

• HTML
  {{$store.state.count}}
• JavaScript
  this.$store.state.count

??1??4??.2??.4?? 在組件中修改VueX的數(shù)據(jù)

• VueX修改數(shù)據(jù)必須通過 mutations 中的方法修改數(shù)據(jù)
  this.$store.commit(''mutations中的方法,'參數(shù)')

??1??4??.3?? VueX - state

• 數(shù)據(jù)
• 所有組件的都可以使用 獲取數(shù)據(jù)

??1??4??.4?? VueX - mutation

• 方法 修改state中的數(shù)據(jù)

??1??5??、VueCLI

??1??5??.1?? 單文件組件

??1??5??.1??.1?? 用一個(gè)文件能夠包含組件的所有內(nèi)容

• 結(jié)構(gòu)

<template></template>

• 邏輯

• 樣式

<style></style>

??1??5??.1??.2?? 單文件開發(fā)的好處

• 更利于編碼
• 利于后期維護(hù)
• 一個(gè)文件包含了所有內(nèi)容

??1??5??.2?? 什么是Vue-CLI

• 腳手架
• 可以把.vue文件翻譯成瀏覽器可以識別的內(nèi)容
• 自動刷新瀏覽器
• 自動壓縮代碼
• 自動的把高版本的JavaScript翻譯成低版本的JavaScript
• 作為代理服務(wù)器
• ...

把很多開發(fā)中需要用到的功能整合到了一起 讓Vue開發(fā)人員專注于邏輯代碼即可 是用webpack配置出來的

??1??5??.3?? 搭建一個(gè)腳手架

vue create 項(xiàng)目名 <= 項(xiàng)目名不要有中文!!!不要大些
cd 項(xiàng)目名
npm run serve

??1??5??.4?? Vue-CLI搭建項(xiàng)目的本質(zhì)

• 創(chuàng)建文件夾
• 下載第三方模塊
• 創(chuàng)建項(xiàng)目的基本結(jié)構(gòu)
• 設(shè)置各個(gè)文件之間的關(guān)系
• 創(chuàng)建git倉庫

1??5??.5?? Vue-cli項(xiàng)目結(jié)構(gòu)

• main.js
  主要的文件 所有和頂級Vue實(shí)例相關(guān)的都放到這里
• App.vue
  最頂級的組件 僅次于Vue實(shí)例 看到的頂級頁面結(jié)構(gòu)一般都放在這里
• /components
  組件的文件夾
• /assets
  靜態(tài)資源

1??5??.6?? 搭建webpack-vue腳手架(詳細(xì)版本)

npm init webpack '項(xiàng)目名'
cd '項(xiàng)目名'
npm instal
npm run dev

最后一步選 No, I will handle that myself 自己再npm i 下載速度會快一點(diǎn)

1??5??.7?? webpack-vue項(xiàng)目結(jié)構(gòu)

1??5??.8?? Vue-CLI項(xiàng)目編碼

1??5??.8??.1?? 編碼位置

• 組件的邏輯直接寫在xxx.vue中
• 靜態(tài)資源放在assets文件夾下面 直接使用對應(yīng)路徑引用即可

1??5??.8??.2?? 引入css

• 全局引入
  main.js => import '路徑'
• 局部引入
  組件內(nèi)的script標(biāo)簽 => @import url('路徑')

1??5??.8??.3?? 注冊組件

• 全局組件
  引入在main.js中
  import 組件 from 地址
Vue.component('組件名',組件)
  任意地方都可以使用 將組件名作為標(biāo)簽名 一次注冊 全部使用
• 局部組件
  在需要用到這個(gè)組件的地方 導(dǎo)入import 組件名 form '地址'
  導(dǎo)入后 設(shè)置給components 就可以在導(dǎo)入的組件中通過組件名使用該組件
  根據(jù)使用的位置 決定局部或者全局注冊 只在某些地方用 用局部組件
• 組件中的name屬性
  直接在組件的內(nèi)部寫name:值即可
  不能用中文
  寫了只會 Chrome的Vue插件中就可以看見這個(gè)名字 更加利于檢索 利于編碼

1??5??.8??.4?? 整合路由

1??5??.8??.4??.1?? 下包

npm install vue-router

1??5??.8??.4??.2?? 導(dǎo)包

import VueRouter from 'vue-router'

1??5??.8??.4??.3?? 用包

• 創(chuàng)建路由規(guī)則
  在components文件夾下創(chuàng)建一個(gè)組件xxx.vue
import 組件名 from '組件路徑'
const routes = [{path:'/xxx/:xx},component:組件名]
• 創(chuàng)建路由對象

`const router = new VueRouter({    routes})`

• 設(shè)置給Vue實(shí)例

1??5??.8??.4??.4?? 編碼位置

• 導(dǎo)入 注冊路由 main.js
• router-link router-view app.vue
• 添加組件components
• 靜態(tài)資源assets

1??5??.9?? 在Vue中使用其他插件

• 可以將插件寫到Vue原型中 這樣在其他組件中都可以使用這個(gè)插件
• (main.js)Vue.prototype.$XXX = XXX
• (其他組件) this.$XXX
• $XXX 的$的目的是 區(qū)分是Vue自帶的屬性還是后面自定義在原型中的屬性

1??5??.9??.1?? 面試問及

• Vue原型用過沒
• 為了共享 將插件設(shè)置在Vue原型上
• 所有組件都是Vue的實(shí)例
• 所有在其他組件中 可以通過 this.$XXX 獲取

1??5??.1??0?? css預(yù)處理與css作用域

1??5??.1??0??.1?? css預(yù)處理

1??5??.1??0??.1??.1??使用less

• 下載
  -npm install -D less-loader less
• 使用
  <style lang='less'></style> 也可以直接導(dǎo)入less文件

1??5??.1??0??.1??.2?? 使用sass

• 下載
  -npm install -D sass-loader node-sass
• 使用
  <style lang='scss'></style> 也可以至今導(dǎo)入scss文件

1??5??.1??0??.2?? css作用域

• 為style標(biāo)簽 添加 scoped 屬性即可
• 生成樣式，和渲染組件時(shí)

為元素添加隨機(jī)屬性
樣式中添加屬性選擇器
2者結(jié)合 就把css的作用范圍 約束

• 為了不影響其他 可以添加這個(gè)屬性
• 注意
  樣式的屬性是隨機(jī)生成的 如果要修改樣式
  直接修改在scoped中的樣式 不要抽離成樣式文件導(dǎo)入

1??5??.1??1?? ES6模塊化語法

1??5??.1??1??.1?? 默認(rèn)導(dǎo)出導(dǎo)入

• 導(dǎo)出
  export default xxx 只能寫一個(gè) 如果需要暴露多個(gè) 可以在default后面寫對象
• 導(dǎo)入
  import xxx from '模塊'

1??5??.1??1??.2?? 按名字導(dǎo)出導(dǎo)入

• 導(dǎo)出
  export const bbb 導(dǎo)出和導(dǎo)入的名字必須一樣
• 導(dǎo)入
  import {bbb} from '模塊'

1??5??.1??2?? Vue全家桶

• Vue
• axios
• Vue-router
• 餓了么ui

餓了么前端團(tuán)隊(duì)開發(fā)的PC端的基于Vue的組件
內(nèi)部封裝了很多現(xiàn)成的組件
在VueCLI中使用elementUI
npm i element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
有些組件并沒有在組件內(nèi)部使用原生事件
但是有些情況需要一些原生事件
就可以使用.native修飾符來觸發(fā)

• Vuex

??1??6??、擴(kuò)展

??1??6??.1?? link 和 @import 的區(qū)別

??1??6??.1??.1?? link

• link是html提供引入樣式的標(biāo)簽
• link沒有兼容性問題
• 可以通過JavaScript來控制link標(biāo)簽 修改樣式文件路徑
• 會和html一起加載

??1??6??.1??.2?? @import

• @import是提供的提供導(dǎo)入樣式的方法
• @import有兼容問題 ie5以下不支持
• 不能通過JavaScript來操縱@import
• 等html全部加載完畢后再加載@import

??1??6??.2?? JavaScript數(shù)組方法

• arr.filter()

返回所有匹配成功的值
創(chuàng)建一個(gè)新數(shù)組,
其包含通過所提供函數(shù)實(shí)現(xiàn)的測試的所有元素
(數(shù)組過濾)

const oldArr = ['dajsk', 'dkjdklas', 'kgjftlk', 'ksf', 'ds', 'mfksjjks'];let res = oldArr.filter((val, index) => val.indexOf('d') != -1); // 返回所有匹配成功的值console.log(res); // [ 'dajsk', 'dkjdklas', 'ds' ]

• arr.find()

返回匹配的第一個(gè)值
返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的值
沒有匹配成功返回undefined

• arr.map()

將匹配成功的值做對應(yīng)的計(jì)算后再次返回
創(chuàng)建一個(gè)新數(shù)組
其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果

const oldArrMap = [3, 4, 7, 1, 8, 5];let res2 = oldArrMap.map((val, index) => {  // 將匹配成功的值做對應(yīng)的計(jì)算后再次返回  if (val > 5) {    val = val * 2;  }  return val;});console.log(res2); // [ 3, 4, 14, 1, 16, 5 ]

因?yàn)檫@些??????方法都是返回的新數(shù)組 并沒有覆蓋原來的數(shù)組所以可以繼續(xù)鏈?zhǔn)秸{(diào)用數(shù)組的方法繼續(xù)過濾

• arr.forEach()

遍歷數(shù)組
方法對數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)

??1??6??.3?? 解決跨域方案

• CORS
  服務(wù)器設(shè)置允許訪問 響應(yīng)一個(gè)響應(yīng)頭
  存在低版本不識別這個(gè)響應(yīng)頭
• JSONP
  瀏覽器script的src支持跨域訪問 發(fā)送一個(gè)callback去服務(wù)器
  服務(wù)器接收callback 返回一個(gè)函數(shù)的調(diào)用攜帶數(shù)據(jù)
  瀏覽器接收到返回值當(dāng)作js執(zhí)行 執(zhí)行代碼

注意
需要在瀏覽器聲明callback去的函數(shù)
需要在script請求前聲明
兼容性強(qiáng)
只能發(fā)送get請求

• flash
  現(xiàn)已不用 蘋果不支持flash
• sliverlight
• WebSocket
• postmessage
• iframe
• ...

??1??6??.4?? 接口的請求方法和restful api

網(wǎng)絡(luò)請求設(shè)計(jì)方法時(shí)
考慮到數(shù)據(jù)的操作主要：增刪改查
方法的命名可以體現(xiàn)這個(gè)操作
一般常用的就是get和post

1. GET（SELECT）：從服務(wù)器取出資源（一項(xiàng)或多項(xiàng)）.
2. POST（CREATE）：在服務(wù)器新建一個(gè)資源.
3. PUT（UPDATE）：在服務(wù)器更新資源（客戶端提供改變后的完整資源）.
4. PATCH（UPDATE）：在服務(wù)器更新資源（客戶端提供改變的屬性）.
5. DELETE（DELETE）：從服務(wù)器刪除資源.
6. HEAD：獲取資源的元數(shù)據(jù).
7. OPTIONS：獲取信息，關(guān)于資源的哪些屬性是客戶端可以改變的.

??1??6??.5?? Cookie、Session、token、localStorage、sessionStorage

??1??6??.5??.1?? Cookie

• 用來解決http 是無狀態(tài) 的
• 什么是無狀態(tài)？

每次請求 瀏覽器和服務(wù)器交互完畢后 彼此并沒有留下什么
繼續(xù)請求 也無法判斷你是誰
如登陸功能
為了能夠保存一些信息
服務(wù)器返回響應(yīng)報(bào)文時(shí) 會偷偷的帶一個(gè)響應(yīng)頭
作用是在瀏覽器中偷偷保存一些信息set-cookie
瀏覽器接收到這個(gè)響應(yīng)頭后 會在本地保存這個(gè)響應(yīng)頭
第二次請求時(shí) 瀏覽器就會自動帶上這個(gè)信息去服務(wù)器
服務(wù)器接收到這個(gè)信息 就知道你是誰了
ajax跨域請求 默認(rèn)不攜帶cookie 需要設(shè)置
跨域cookie在瀏覽器中無法看到 需要抓包

??1??6??.5??.2?? Session

Seesion 是將用戶數(shù)據(jù)存儲在服務(wù)器中
通過sessionId來驗(yàn)證查找服務(wù)器中的用戶信息
sessionId一般是存放在瀏覽器的cookie中的

所以Session需要配合瀏覽器的cookie或者瀏覽器的其他存儲技術(shù)一起使用

??1??6??.5??.3?? token

和cookie差不多 也可以記錄登陸狀態(tài)
服務(wù)器生成的
通過用戶瀏覽器版本、用戶信息...生成的一個(gè)密鑰

瀏覽器不會自動保存
可以接口本地存儲來保存token
瀏覽器不會自動攜帶發(fā)送
每次請求接口時(shí)可以通過headers攜帶存儲的token
headers{ Authorization ：token }

??1??6??.5??.4?? localStorage

可以把數(shù)據(jù)存儲到本地(瀏覽器) 只要用戶不刪除 則會一直保存 每個(gè)域名都是獨(dú)立的保存數(shù)據(jù) 不同域名不能互相訪問 長久保存數(shù)據(jù)可以存儲到 localStorage 可以存儲5M數(shù)據(jù)

• 保存數(shù)據(jù) localStorage.setItem(key,value)
• 獲取數(shù)據(jù) localStorage.getItem(key) => 如果沒有這個(gè)數(shù)據(jù) 則返回 null
• 刪除一個(gè)數(shù)據(jù) localStorage.removeItem(key)
• 清空所有數(shù)據(jù) localStorage.clear()

??1??6??.5??.5?? sessionStorage

短暫存儲數(shù)據(jù) 可以多頁面?zhèn)髦?相當(dāng)于localStorage會更安全 瀏覽器關(guān)閉后就不會保存了 可以存儲5M數(shù)據(jù)

• 保存數(shù)據(jù) sessionStorage.setItem(key,value)
• 獲取數(shù)據(jù) sessionStorage.getItem(key) => 如果沒有這個(gè)數(shù)據(jù) 則返回 null
• 刪除一個(gè)數(shù)據(jù) sessionStorage.removeItem(key)
• 清空所有數(shù)據(jù) sessionStorage.clear()

??1??7??、Xmind筆記

很多都是自己的話去解釋和理解 可能會存在錯(cuò)誤 或者有錯(cuò)別字 歡迎指出謝謝