vue知識點記錄
- MVC是一種分層開發模式,讓業務更加清晰，並不會減少業程式碼量，可能會更多,減少模組的耦合度
- MVC是站在整個專案的角度對專案進行分層
- 1.M(資料連線層---資料庫)
- 2.V(檢視層)--前端頁面
- 3.C(業務層----路由那一塊)
cookie和session
- cookie 存在客戶端，安全性很低
- session 存在服務端，裡面也使用了cookie，安全性較高，資料也不容易丟失。
框架和庫的區別
+ 框架：是一套完整的解決方案，對專案的侵入性較大，專案如果需要更換框架，那就需要重新架構整個專案。 + 庫： 提供某一個功能，對專案侵入較小，在專案中也容易切換庫進行開發。 複製程式碼
MVVM的理解
相當於MVC模式中的V層，把V層分層了MVVM三層，在請求-處理-響應中，也就是V層-C層-M層（大致）。 複製程式碼
MVVM是前端檢視層的分層開發思想，主要把每個頁面分層M/V/VM,其中VM是MVVM思想的核心，它是M和V之間的排程者。VM提供了資料的雙向繫結。
- M ---保持的是每個頁面中單獨的資料
- V --- 檢視，也就是頁面的HTml結構。
- VM -- M渲染到V層 需要VM的排程,V到M也需要VM的排程。
注意點
+ 在函式內要注意this 的指向,比如定時器之類的,有時可以使用箭頭函式。 複製程式碼
什麼是vue.js
- 16年底火了起來
- 是一套構建使用者介面的框架, 只關注檢視層 ,可以和其他類庫整合。
- vue語法可以進行手機APP開發，需要藉助weex。
- 使用者不在操作DOM元素，雙向資料的繫結，程式設計師只需要關心資料的業務邏輯，以及元件系統。
- 目前最火的前端框架
- 引入MVVM 設計模式
- 簡單、輕量、快捷的快捷
單頁面應用(spa)
單頁面應用（SinglePage Web Application，SPA）---多頁面應用（MultiPage Application，MPA）
-
組成---- 一個外殼頁面和多個頁面片段組成 ------------------- 多個完整頁面構成
-
資源共用(css,js)----- 共用，只需在外殼部分載入 ------------------- 不共用，每個頁面都需要載入
-
重新整理方式---- 頁面區域性重新整理或更改 ------------------- 整頁重新整理
-
url 模式----a.com/#/pageone a.com/#/pagetwo -------------------a.com/pageone.htm… a.com/pagetwo.htm…
-
使用者體驗---- 頁面片段間的切換快，使用者體驗良好 -------------------頁面切換載入緩慢，流暢度不夠，使用者體驗比較差
-
轉場動畫---- 容易實現 ------------------- 無法實現
-
資料傳遞---- 容易 ------------------- 依賴 url傳參、或者cookie 、localStorage等
-
搜尋引擎優化(SEO)---- 需要單獨方案、實現較為困難、不利於 SEO檢索 可利用伺服器端渲染(SSR)優化 ------------------- 實現方法簡易
-
試用範圍---- 高要求的體驗度、追求介面流暢的應用------------------- 適用於追求高度支援搜尋引擎的應用
-
開發成本---- 較高，常需藉助專業的框架 ------------------- 較低 ，但頁面重複程式碼多
-
維護成本---- 相對容易 ------------------- 相對複雜
vue的指令
v-cloak和{{}} 插值表示式
- 在插值表示式裡 網速比較慢的時候,vue包還沒有載入完成的時候會在頁面顯示{{msg}},載入完了後才渲染出資料,就會產生閃爍問題。此時需要在css中寫 [v-cloak] {display:none} ,切插值的元素寫 v-cloak 屬性。
- 實現原理 1:通過[v-cloak] 給指定的元素執行新增 隱藏樣式 2：當vue引入完畢，則把此屬性刪除掉
v-text和 v-html
- v-text: 解析成字串,沒有閃爍問題但會覆蓋原來的文字內容
- v-html： 可以解析html標籤,沒有閃爍問題但會覆蓋原來的文字內容
v-bind、v-on
- v-bind: 可以直接簡寫成 : ,且v-bind可以寫合法的js程式碼及表示式
- 只能實現資料的單向繫結,從M到V層。
v-model 資料的雙向繫結
- 針對表單元素 Input、select、checkbox以及還有 元件上 component 等等,可以和使用者進行互動。
- vue中唯一一個雙向資料繫結的指令。
v-for的使用
- 迴圈陣列 v-for="item in arr" --- "(val,i) in arr"
- 迴圈物件
- 迭代數字 v-for="count in 10" -----count從1開始
- 要保證迴圈每一項的唯一性,M和V層的一一對應,需要新增 :key屬性。
- key 且必須是一個 string/number 的型別資料,資料也要保證唯一性。index的值不建議作為key值。
v-if、v-show、v-else
- v-if
- 直接刪除,為true則需要重繪，DOM操作
- v-show
- 類似於display: none; 切換比較頻繁的可以使用v-show
事件的修飾符
- .stop -------阻止事件冒泡
- .prevent ----阻止預設行為。<a href="baidu.com" @click.prevent="add">
- .capture(捕獲機制)----- .once(只執行一次)------.self(只執行自己) -事件修飾符可以連用
vue中設定class類、使用v-bind進行屬性繫結
- 陣列的形式
-
屬性繫結的形式
-
- 陣列中新增三元表示式
- 陣列中物件來代替三元表示式
-
屬性繫結的形式，在data中定義flag布林值
-
- 物件的形式
day2
在Vue中只需要關注資料的改變，而無需關心DOM操作。在Vue中已經實現了資料的雙休繫結，每當我們修改data的資料時，就會自動監聽資料的變化，應用到頁面上。 複製程式碼
過濾器
- 用作常見的文字格式化
- 用在差值表示式 {{}} 和 v-bind 屬性裡
- 語法： 1.
定義全域性的過濾器- {{ name | 過濾器名稱}}
- Vue.filter('過濾器的名稱',function(data){ })
- 可以多次呼叫過濾器,一直 | (管道符)下去
-
定義vue例項的私有過濾器
- 在Vue例項裡，寫 filters: {}
- 使用的時候以查詢 私有過濾器 為先,沒有則查詢 全域性過濾器 。
填充字串
- padStart(length,str)
- padEnd(length,str)
按鍵修飾符
vue自帶的修飾符
- enter --鍵盤碼相當於13
- table
- up
- down
- ....
- 鍵盤碼
用法： @keyup.enter = "function" 或者@keyup.13 = "add" ------- 複製程式碼
自定義鍵盤修飾符
Vue.config.keyCodes.enter = 13; //兩者一一對應 @keyup.enter = "function" 複製程式碼
指令的自定義 ----類似於 v-focus(系統沒有這個指令)
注： 在 Vue2.0 中，程式碼複用和抽象的主要形式是元件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。 1.定義全域性的指令 //定義的時候,指令的名稱前面，不需要加 v- 字首。在呼叫的時候，必須在名稱前新增 v- 字首來進行呼叫。 //其中：引數1 是指令的名稱。 // 引數2 是一個物件包裹的鉤子函式。
-
Vue.directive('focus',{ //注意： 在每一個函式中，第一個引數只能是 el ,表示被繫結的元素的原生的js物件，可以進行DOM操作。
bind: function(el){},//表示指令繫結到元素上的時候，會立即執行 bind 函式，只執行一次。bind表示還沒有掛載到DOM樹上去。故有些方法建議在inserted函式上呼叫。 //樣式操作，在這裡進行。
inserted: function(){}, // 表示元素插入到 DOM 中的時候，會執行此函式，只執行一次。 // JS操作在這裡
updated: function(){}, })
生命週期函式
- 從Vue例項建立、執行、到銷燬期間，總是伴隨各種各樣的事件，這些事件(函式)，統稱為 生命週期
- 建立期間的生命週期函式：
可以在這裡獲取 ajax 資料。 最早此處可以進行 DOM 操作
- 執行期間的生命週期函式：
- beforeUpdate：狀態更新之前執行此函式， 此時 data 中的狀態值是最新的，但是介面上顯示的 資料還是舊的，因為此時還沒有開始重新渲染DOM節點
- updated：例項更新完畢之後呼叫此函式，此時 data 中的狀態值 和 介面上顯示的資料，都已經完成了更新，介面已經被重新渲染好了！
- 銷燬期間的生命週期函式：
- beforeDestroy：例項銷燬之前呼叫。在這一步，例項仍然完全可用。
- destroyed：Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。
vue-resource vue裡面的請求資料
- .then()-------後面第一個引數為成功的回撥函式，第二個為失敗的回撥函式(失敗的可以省略)。
- 通過result.body 拿到請求的資料。
- 手動發起的 POST 請求，預設沒有表單格式，即沒有設定 application/x-www-form-urlencoded,有的伺服器處理不了。需要重新設定 {emulateJSON: true}
day3
vue動畫
-
使用 transition 設定動畫，把需要動畫的元素包裹起來。 // //
{{ 這是需要動畫的元素，需要被transition包裹起來 }}
//
-
v-enter 表示一個時間點，是進入之前元素的起始狀態
-
v-leave-to 表示終止狀態。
-
且包含的 元素(h3) 支援顯示隱藏。
-
在 transition 標籤裡面新增name 屬性可以把V- 字首換成自己定義的。 v-enter 變成 my-enter
-
vue 動畫可以和 animate.css 合用。---參見 vue day3-8節
transition-group 組合列表動畫標籤
-
.v-move 和.v-leave-active 要一起使用
-
初始化動畫需要加 appear
-
設定渲染成的標籤 tag=""
-
半場動畫的實現
-
@before-enter
-
@enter
- 手動重新整理 offsetWidth --offset系列
- done() ------觸發after-enter 函式
-
@after-enter
元件的出現
- 元件的出現就是為了拆分Vue例項的程式碼量，防止一個vue例項程式碼量過多。
- 元件化：從UI介面的角度進行劃分的，方便元件複用
- 模組化：從程式碼邏輯的角度的劃分的，方便程式碼分層開發，讓每個功能模組職能單一。
- 元件也有自己的生命週期函式
元件上的data資料
- data 是一個函式，且返回一個 物件.這樣可以使得每個元件都有一個私有的data資料域。
多個元件的切換
- 使用
元件渲染的幾種方式
- 直接以元件的名稱作為標籤渲染
- 用 component 標籤渲染 但是需要新增 :is 屬性來新增元件名稱。
在元件中操作DOM，如 ref，
- 在一個元件中可以操作頁面上所有的元素。
- 即在子元件中也可以獲取父元件的DOM元素
- 配合 getBoundingClientRect() 獲取偏移距離。
關於watch
- 使用這個屬性，可以監聽 data 中指定資料的變化，然後觸發函式。此函式有兩個引數。 參1 新資料 ； 參2 舊資料。
- watch最主要是用來監聽路由的變化 。
關於 computed
- 在 computed 中，可以定義一些 屬性，這些屬性，叫做 【計算屬性】， 計算屬性的，本質，就是 一個方法，只不過，我們在使用 這些計算屬性的時候，是把 它們的 名稱，直接當作 屬性來使用的；並不會把 計算屬性，當作方法去呼叫；
- 計算屬性的求值結果，會被快取起來，方便下次直接使用；
- 需要 return 一個值。
父元件向子元件傳值
- 原理：父元件通過屬性繫結 (v-bind/v-on)的形式，把資料(data/methods)繫結到子元件標籤上，子元件就可以通過屬性名獲取父元件的資料，並且子元件需要新增 props 屬性接收 繫結的屬性名 獲取資料。
- props 中的資料 是隻讀的,和template模板寫在一起；
- 子元件的資料和父元件的區別 ：
子元件傳值給父元件
- 類似一個 回撥函式。
- 1、在渲染的子元件上使用 v-on 繫結要傳遞的函式
- 2、在渲染的子元件中使用 this.$emit('函式名',引數)
ref 獲取DOM和元件
- Vue不建議操作DOM,故提供了ref操作DOM
- 1.在需要操作的元素或元件上新增 ref=""
- 2.可以在函式呼叫 this.$refs.str。
- 呼叫子元件的data和methods.
路由
什麼是路由： 路由是一種對應關係。
- 後端路由：是前端請求的URL和後端的處理函式的對應關係。
- 前端路由：是對於單頁面，主要通過 hash (#)來實現不同頁面之間的切換。在HTTP請求中，不會包含hash後面的內容
路由引入的兩種方式
- script引入
- webpack 模組化
路由物件
- 每當建立一個路由物件，在全域性中，就有了一個 路由的建構函式 VueRouter,傳遞一個配置物件。
- routes 表示【路由匹配規則】--是一個數組，每一項是物件
- 每一項匹配規則就是一個物件，必須帶有兩個屬性：
- path ------路徑
- component------路由跳轉的元件
- 如果有路由的巢狀，則新增第三個屬性 children:[],在裡面寫路由的匹配規則。
- 將路由物件註冊到vm例項上
- 在html上 放一個路由容器 router-view 標籤
關於 vue-router
- router-link 預設是a標籤，可以通過 tag='' 改為相應的標籤。
- router-link 有一個選中樣式屬性 .router-link-active
- linkActiveClass: 'myactive' // 和啟用相關的類,在路由例項裡新增修改上面的類名。
路由的重定向
- {path:'/', redirect:'/login(重定向的路徑)'}
路由傳參
-
在路由中以 序列化 形式傳遞。
-
在路由規則中以 ** this.$route.query 物件拿取。** /模板中提取
-
在路由中以 / 的方式傳遞
-
在path匹配路徑中新增 /:id
-
在元件中可以用 this.$route.params.id 提取
vue目前提供的標籤
- template transition transition-group component
data
- 在Vue 中一般是自己元件中的私有資料。
在網頁中有兩種跳轉形式
- 使用a標籤的形式 叫做標籤跳轉
- 使用 window.location.href 的形式 叫做 程式設計式導航。
區分this.route
- this.$route 是路由引數物件，所有路由中的引數，params,query等等都屬於他
- this.$route 是一個路由導航物件VueRouter，用它可以方便的 使用 JS程式碼，實現路由的前進和後退，跳轉到新的 URL地址。
webpack 的主要內容
打包時候問題：
+ 1 只有添加了外掛 webpack-dev-server 的時候 bundle.js檔案才會在虛擬記憶體中掛載。
+ 2 使用var htmlWebpackPlugin = require('html-webpack-plugin')
+ 2 先看一下文件。
複製程式碼
-
WEBPACK是基於node構建的。
-
npm run dev npm run build
-
webpack-dev-server
1.把專案開啟在伺服器上，類似於一個node服務2.把指定的 index.js 打包成 main.js ，並把 main.js 放入到記憶體中 -
html-webpack-plugin
1.把 index.html 檔案打包到記憶體中2.把main.js自動新增到 index.html 中 -
loader 1.
webpack預設只能打包 js型別的檔案。此時打包 css等需要 loader2. less less-loader 先這兩個包裝包 (vue腳手架不提供less和sass，只提供css的)----裝完包後 在頁面上引入 即可使用less格式的css樣式！ +
render方法(重點)
- render渲染元件會覆蓋之前 #app裡面的內容。
- render: function (createElements) { // createElements 是一個 方法，呼叫它，能夠把 指 定的 元件模板，渲染為 html 結構 return createElements(login) // 注意：這裡 return 的結果，會 替換頁面中 el 指定的那個 容器 }
包的查詢規則 import和require匯入規則都一樣。
- 1.在專案目錄中查詢 node_modules的資料夾
- 2.在node_modules的資料夾根據包名，查詢對應的 Vue資料夾(以vue為例子)
- 3.在vue檔案中查詢 package.json的配置檔案
- 4.在配置檔案中 查詢mian屬性,此mian屬性指定了包被載入的時候的入口檔案。
如何在webpack中使用vue專案
-
- -D 表示一般安裝專案所需的工具,放在package.json中的devDependencies 如css-loader 、less
-
- -S 表示專案所需的依賴檔案 dependencies 如vue JQuery
-
- -g 表示全域性檔案
vue學習的幾個點以及其他
js東西就是變數的宣告方式
陣列的擴充套件，物件的擴充套件，函式的擴充套件
代理、反射、promise、class、模組化
promise
-
- 就是單純的解決 回撥地獄 的問題，也就是多層巢狀，比如ajax裡面還有ajax。
-
- 程式碼量不一定減少。
-
-
重要概念
-
Promise 是一個 建構函式 ,那麼就可以 new Promise() 得到一個 Promise 例項.
-
Promise上有兩個函式,分別是 resolve(成功之後的回撥) 和 reject(失敗回撥)。
-
在 Promise 的 prototype 屬性上, 有一個 .then() 方法, 只要是Promise 構造出來的例項 都可以訪問 .then() 方法。
-
Promise 表示一個 非同步的操作，每new Promise的例項就表示一個具體的非同步操作。
-
既然 Promise 建立的例項是一個非同步操作。那麼，操作的結果只能是兩種狀態：
- 非同步執行成功---resolve(成功之後的回撥)和非同步執行失敗---reject()。
- 由於 Promise 的例項，是一個非同步，所以，內部拿到操作的結果侯，無法使用 return 把操作的結果返回給呼叫者；這個時候，只能使用回撥函式的形式，來把成功或失敗的結果，返回給呼叫者。 // function(data,callback){ return data;---這是錯的,而是下面這種。 return callback(data); }
-
我們可以在 new 出來的 Promise 例項上，呼叫.then() 方法【預先】為這個 Promise 非同步操作，指定成功resolve和失敗reject 的回撥函式。
-
// 注意：這裡 new 出來的 promise， 只是代表 【形式上】的一個非同步操作；
- // 什麼是形式上的非同步操作：就是說，我們只知道它是一個非同步操作，但是做什麼具體的非同步事 情，目前還不清楚 // var promise = new Promise()
-
// 這是一個具體的非同步操作，其中，使用 function 指定一個具體的非同步操作
- var promise = new Promise(function(){ // 這個 function 內部寫的就是具體的非同步操作！！！ })
-
const fs = require('fs')
-
// 每當 new 一個 Promise 例項的時候，就會立即 執行這個 非同步操作中的程式碼 // 也就是說，new 的時候，除了能夠得到 一個 promise 例項之外，還會立即呼叫 我們為 Promise 建構函式傳遞的那個 function，執行這個 function 中的 非同步操作程式碼； var promise = new Promise(function () { fs.readFile('./files/2.txt', 'utf-8', (err, dataStr) => { if (err) throw err console.log(dataStr) }) })
-
// 初衷： 給路徑，返回讀取到的內容。 且為了規避一new promise 就觸發括號裡面的function(){} 需要用一個函式把例項包裹起來 。 function getFileByPath(fpath) { return new Promise(function (resolve, reject) { fs.readFile(fpath, 'utf-8', (err, dataStr) => {
if (err) return reject(err) resolve(dataStr) }) 複製程式碼
}) }
-
-
promise的需求
-
- 在一連串的 .then 中， 哪怕前面的Promise 執行失敗了，但是，也不要影響後續 .then 的執行，此時， 我們可以單獨為每個 Promise 通過失敗的回撥裡 指定下一次的內容。 ----參照 Vue課程 day8-8節。
- catch 的作用 : 但是又有相反的需求，後續的Promise執行，和前面有關，一旦前面的報錯，後續的不能執行。
catch 的作用就是前面的Promise執行失敗，則立即終止所有Promise的執行，並馬上進入catch去處理Promise中丟擲的異常 catch(fn)。
axios的請求攔截和響應攔截有什麼用，能做什麼
關係vue
- 父子元件生命鉤子載入的順序
- 父子元件的通訊方案，兄弟元件的通訊方案
- 為什麼不建議在子元件改變父元件傳過來的值
- vue中的extend,extends,mixin的區別
- vue-router中的history模式和hash模式的區別，為什麼history模式更好，怎麼配置history模式
- vue-router的路由鉤子可以用它做什麼；
- 設定路由跳轉的取消和成功
- 怎麼利用vue-router進行公共頁面的佈局。