優勢：當資料發生變化時，頁面也會自動重新渲染
雙向資料繫結： 用表單元素時，檢視變化影響資料，資料變化影響檢視
指令概念：是vue為開發這提供的模板語法，用於輔助開發者渲染頁面的基本結構
v-text：把值渲染到標籤內部
}插值表示式： 內容佔位符，不會覆蓋標籤內部內容；只能用在元素的內容節點中，不能用在元素的屬性節點
v-html()：把帶有標籤的字串，渲染成真正的html內容；跟插值表示式同時使用時，會覆蓋插值表示式
v-bind：對元素的
屬性進行動態繫結
語法：v-bind:屬性=''變數名' ，可簡寫為:
v-on
語法：v-on:事件名稱=''事件處理函式的名稱',可簡寫為@
事件物件
$event：繫結事件的處理函式名稱，不傳參，不帶小括號，可以獲取到元素dom的事件物件e,若是帶小括號及傳參了，則需要使用$event
提供了內建變數，它就是元素dom的事件物件e
修飾符事件修飾符
語法： @:事件名稱.修飾符=''事件處理函式的名稱'
@事件型別.修飾符，可以不繫結事件處理函式，只阻止預設行為
. prevent：
阻止事件跳轉，在事件名稱後面加prevent，即可阻止跳轉；
. stop： 阻止事件冒泡；
. capture : 以捕獲模式觸發當前的事件處理函式
. once ： 繫結的事件只會觸發1次
. self ： 只有在event.target是當前元素自身時觸發事件處理函式
按鍵修飾符
語法：@鍵盤事件.修飾符="變數名"
. esc：鍵盤按下鍵是esc呼叫
. enter：鍵盤按下鍵是enter呼叫
配合input表單使用此指令，
真正實現資料驅動檢視，檢視驅動資料
修飾符
v-if
原理：每次動態建立或者移除 元素，從而實現元素的顯示與隱藏
效能：若剛進入頁面某些元素預設不需要被展示 ，而且後期這個元素很可能不需要被展示出來，此時v-if效能好
v-show
原理：動態為元素新增或者移除display:none樣式，來實現元素的顯示與隱藏
效能：若頻繁切換元素顯示狀態，用v-show效能更好
總結：實際開發中，不用考慮效能問題，直接使用v-if,效能問題是面試時說給面試官聽的
v-if配套指令
v-else-if
v-else
v-for 迴圈
語法：v-for="( 值變數，索引變數)in 目標結構"
目標結構：可以遍歷陣列 / 物件 / 數字 / 字串 (可遍歷結構)
v-for頁面更新
1:陣列變更方法，會導致v-for更新，頁面更新，會改變原陣列
陣列變更方法有：push() unshift() pop() shift() splice() reverse()
2:陣列非變更方法，返回新陣列(不會改變原陣列)，就不會導致v-for更新，可採用覆蓋陣列或者this.$set()
陣列非變更方法有：filter()、concat()、slice()、map()
注意：更新某個值的時候，v-for是監測不到
// 更改某乙個值，無需更改所有陣列
// 更新的目標結果、更新的位置、更新的值
this.$set(this.arr, 0, 100);
v-for 中 key 的作用
知識鋪墊
虛擬 dom
是什麼： 記錄了關鍵 dom 節點資訊的 js 物件
為什麼： 為什麼要用虛擬 dom
如何用： diff演算法對比規則，當資料更新時，將新舊 dom 樹，逐層對比，有 key 就對比 key，無 key 就地更新
v-for 有無key的情況
無 key： 就地更新策略，盡可能的復用相同的 dom 元素，減少 dom 操作
key 是 index： 和無 key 一樣是就地更新
key 是 id：唯一的字串或數字；新舊 dom 對比時，使用 key 進行比較，差異更新
vue基礎指令
filter 對介面的轉換，比如貨幣 顯示形式 vue基礎指令 v mode 雙向繫結，用於文字框 輸入框 單選 複選 下拉框等等，輸入改變，模型也會改變 反之，模型改變，輸入也會改變。v text 更多的是乙個文字的渲染，與 類似，只是在頁面未載入完vue的時候，會顯示在頁面上，所以一般採用v t...
Vue 基礎指令
指令 是帶有 v 字首的特殊屬性 1 v html 非轉義輸出 將xml型別資料解析 防止xss,csrf 2 v text 和 結果是一樣的，但是 有個短暫的 顯示 3 v bind 單項資料繫結 作用 將乙個資料賦值給已有屬性 4 v model 雙向資料繫結 作用範圍 表單元素,因為預設繫結了...
Vue基礎指令
msg span 和下面的一樣 span 相當於 innerhtml 可以識別元素。有點元件的感覺 message h2 div vue.js script newvue script 根據表示式，例如index 0，即當index！0時顯示，根據真假值，切換元素的 display css 屬性。條...