前端學習總結vue
es6中，用於宣告變數的var和let有什麼區別？
let宣告的變數只在let關鍵字所在的程式碼塊內有效。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
1.vue簡介
Vue的兩大核心思想：元件化和資料驅動
優點：輕量級，漸進式框架，可以自己選擇需要用到的模組
資料驅動就是讓DOM隨著資料的變化自然而然的變化，開發者不必過多關注DOM，只需要將資料組織好就行。原理暫時不清楚。
元件化就是將一個整體合理拆分為一個一個小塊component(元件)，元件可重複使用，可以簡單的認為元件就是一個自定義標籤的過程。
什麼是元件化？將大型專案拆分成不同的小專案（元件），元件可以重複使用
生命週期及生命週期鉤子函式lifecycle hooks
created mounted updated destroyed
1.1 .native的作用:將元件標籤當做一個普通的HTML標籤，以便於新增觸發事件。
沒有使用.native修飾符的元件標籤 在新增普通事件之後不能被正確執行。
<my-component @click="alert()">
如果點選這個my-component標籤，並不會執行alert()函式，原因是元件預設只能新增元件內部的事件
給普通的HTML標籤監聽一個事件，之後新增 .native 修飾符是不會起作用的
訪問根元件的資料和方法使用this.$root,訪問子元件或者子元素，在元件宣告的時候加上一個attribute ref="component"
例如
2.Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。
它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
在以往的開發中，我們很難在兄弟元件或者父類元件之外之間進行傳值，有了vuex就可以很好的解決了這個問題。
定義一個數據管理倉庫store，然後在某一個組建中進行註冊，那麼在這個元件及其子孫元件內，store倉庫中所有的資料都是直接可呼叫的。
如果我們在專案根元件App.vue中進行註冊的話，那麼所有的store中的值對於所有的元件都是直接可用的。
一個簡單的狀態管理模式應該包括三個部分
state，驅動應用的資料來源，就是一個個資料
view，以宣告的方式將state對映到檢視，就是畫面上看到的效果
actions，響應在view上的使用者狀態輸入導致的變換，就相當於一個函式，對state中的資料進行操作
getters方法就像計算屬性一樣，getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。
在vuex
mutation是vuex中的事件提交方式，它允許我們直接對state中的資料進行操作，通常情況下我們可以將
資料的邏輯操作放在其中，不過這個操作邏輯必須是同步的。
v-if和v-show的區別
v-if：當條件不成立時不會渲染
切換開銷較大，不適合經常變化的場景
v-show：無論條件成不成立都會渲染，會根據條件的真值判斷是否隱藏
首次渲染開銷較大，但是切換開銷小，適合經常變化的場景。
git checkout命令
1.還沒有將檔案add到暫存區，如果修改了某個檔案，這時候執行git checkout --xxx 就會撤銷修改，將檔案恢復到之前的狀態。
2.已經將修改後的檔案add到暫存區，git reset HEAD filepathname （比如： git reset HEAD readme.md）來放棄指定檔案的快取，放棄所有的快取可以使用 git reset HEAD . 命令。
這時候執行git checkout --xxx 就會撤銷修改，將檔案恢復到之前的狀態
.gitignore 配置不需要git管理的檔案，告訴Git哪些檔案不需要新增到版本管理中。
*.txt就表示所有.txt字尾的檔案都不會新增到版本管理中，git add .對此類檔案無效
1.常見的行內元素和塊級元素
1).行內元素
span
a
br
b
strong
img
input
2).塊級元素
h1-h6 hr p pre ulaxios是一個可以執行在瀏覽器和nodejs上的http庫
http協議是用於從www伺服器傳輸超文字到本地瀏覽器的傳輸協議
超文字就是HTML 檔案, 圖片檔案, 查詢結果等等
http是一個基於tcp/ip通訊協議來傳遞資料的協議
- HTTP三點注意事項：
- HTTP是無連線：無連線的含義是限制每次連線只處理一個請求。伺服器處理完客戶的請求，並收到客戶的應答後，即斷開連線。採用這種方式可以節省傳輸時間。
複雜的軟體必須有清晰合理的架構，否則無法開發和維護
設計一個程式的結構涉及到一個專門的學問：架構模式，屬於程式設計的方法論
MVC模式就會架構模式的一種，它不僅可以用來設計軟體，還適用於其他廣泛的設計和組織工作
mvc
控制層接收使用者的請求，進行相應的資料操作，從資料庫取回資料，之後將資料放進view層中返回給使用者
回撥地獄：回撥函式中多次巢狀回撥函式，造成可讀性變差，程式碼不好維護
解決方式：Promise物件
物件的狀態不受外界影響。Promise 物件代表一個非同步操作，有三種狀態：
- pending: 初始狀態，不是成功或失敗狀態。
- fulfilled: 意味著操作成功完成。
- rejected: 意味著操作失敗。
什麼是nexttick()
nextTick是一個回撥函式，它保證操作資料是在dom更新後進行的。
簡單的理解是：當資料更新了，在dom中渲染後，自動執行該函式，
為什麼要用這個函式？
因為Vue實現響應式並不是在資料變化後DOM立即變化，而是按照一定的策略進行更新。
created鉤子函式執行時，dom並沒有被掛載上，如果在created鉤子函式中對dom進行操作會出錯。
如果這時使用this.$nextTick() dom操作放在函式內部，那麼在更新了dom後 就會執行響應的程式碼。
什麼是nextTick函式（理解後手打）
是一個回撥函式，他讓們在dom渲染完成後在對dom進行操作
通常情況下會在created中使用，因為在這個函式中 完成了資料的操作但是沒有將dom渲染到頁面上，
所以我們執行nextTick函式就很容易將資料延後執行。
Vue專案中每個檔案和資料夾的用法
dist存放打包後的專案
public 存放index.html和static資料夾
src 專案的原始碼檔案
assets 素材檔案 存放圖片 自定義css 等其他靜態檔案
components 元件檔案
router 路由相關的配置
main.js專案的入口檔案
App.vue主元件檔案
在Rrouter-link標籤中使用tag屬性，可以更改渲染後的標籤屬性
對mvvm架構的理解
mvvm架構就是一個軟體設計模式，將軟體分成不同的層級，每個層級負責不同的任務。
m就是model 負責資料及業務邏輯
v是view 負責ui介面，在vue中變現為dom
vm是一個連線model和view的中間層，有了它我們可以實現資料的雙向繫結，在更改資料model的時候
檢視層會相應地發生改變，在更新檢視層的時候 model也會發生相應的變化。具體的實現原題就是js中的Object.Defineproperty()
和監視器來實現的。
model和view之間的同步完全是自動的，不需要認為干涉，因此開發者只需要關注業務邏輯即可。
vue的生命週期是什麼?
從建立到銷燬vue的過程，具體就是開始建立，載入資料，編譯模板，掛載dom——>渲染，更新——>渲染，解除安裝
等一系列過程
在每一個階段vue為我們提供了鉤子函式
beforecreate
created
beforeMoute
Mouted
beforeUpdate
Updated
BeforeDestroy
Destroyed
第一次建立頁面的時候會執行
beforecreate
created
beforeMoute
Mouted
這四個鉤子函式
在mouted階段dom已經被渲染到頁面上了
vue router有幾種模式
兩種mode hash模式 和history模式
hash模式基於hash碼而來，在瀏覽器中會出現#
history依賴於html5的pushState()和replaceState()這兩個api，在瀏覽器中不會有#