vue知識點記錄

VUE前期知識點

MVC概念

• MVC是一種分層開發模式,讓業務更加清晰，並不會減小業代碼量，可能會更多,減小模塊的耦合度
• MVC是站在整個項目的角度對項目進行分層
• 1.M(數據鏈接層---數據庫)
• 2.V(視圖層)--前端頁面
• 3.C(業務層----路由那一塊)

框架和庫的區別

+ 框架：是一套完整的解決方案，對項目的侵入性較大，項目若是須要更換框架，那就須要從新架構整個項目。
  + 庫： 提供某一個功能，對項目侵入較小，在項目中也容易切換庫進行開發。

複製代碼

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

• 是一套構建用戶界面的框架, 只關注視圖層,能夠和其餘類庫整合。
• 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布爾值

• 對象的形式

在Vue中只須要關注數據的改變，而無需關心DOM操做。在Vue中已經實現了數據的雙休綁定，每當咱們修改data的數據時，就會自動監聽數據的變化，應用到頁面上。
複製代碼

過濾器

• 用做常見的文本格式化
• 用在差值表達式 {{}} 和 v-bind 屬性裏
• 語法： 1.定義全局的過濾器
  • {{ name | 過濾器名稱}}
  • Vue.filter('過濾器的名稱',function(data){ })
  • 能夠屢次調用過濾器,一直 | (管道符)下去
  2. 定義vue實例的私有過濾器
  • 在Vue實例裏，寫 filters: {}
  • 使用的時候以查找私有過濾器爲先,沒有則查找全局過濾器。

填充字符串

• padStart(length,str)
• padEnd(length,str)

按鍵修飾符

vue自帶的修飾符

• enter --鍵盤碼至關於13
• table
• up
• down
• ....
• 鍵盤碼

用法： @keyup.enter = "function" 或者  @keyup.13 = "function" ------- 
複製代碼

自定義鍵盤修飾符

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實例建立、運行、到銷燬期間，老是伴隨各類各樣的事件，這些事件(函數)，統稱爲生命週期
• 建立期間的生命週期函數：
  • beforeCreate：實例剛在內存中被建立出來，此時，尚未初始化好 data 和 methods 屬性
  • created：實例已經在內存中建立OK，此時 data 和 methods 已經建立OK，此時尚未開始 編譯模板。能夠在這裏獲取 ajax 數據。
  • beforeMount：此時已經完成了模板的編譯，可是尚未掛載到頁面中
  • mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示。是Vue實例建立的最後一個函數,實例也即將進入運行階段。最先此處能夠進行 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 合用。

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模板寫在一塊兒；
• 子組件的數據和父組件的區別 ：

子組件傳值給父組件

• 相似一個 回調函數。
• 一、在渲染的子組件上使用 v-on 綁定要傳遞的函數
• 二、在渲染的子組件中使用 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.router

• this.$route 是路由參數對象，全部路由中的參數，params,query等等都屬於他
• this.$router 是一個路由導航對象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等須要 loader 2. 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項目

• 1. -D 表示通常安裝項目所需的工具,放在package.json中的devDependencies 如css-loader 、less
• 2. -S 表示項目所需的依賴文件 dependencies 如vue JQuery
• 3. -g 表示全局文件

vue學習的幾個點以及其餘，可自行擴展

js的一些東西變量的聲明方式

數組的擴展，對象的擴展，函數的擴展

代理、反射、promise、class、模塊化

promise

• 1. 就是單純的解決 回調地獄 的問題，也就是多層嵌套，好比ajax裏面還有ajax。
• 2. 代碼量不必定減小。
• 3. 重要概念

  • 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的需求

• 1. 在一連串的 .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進行公共頁面的佈局。