vue2.x -簡介
Vue框架的意義：vue 在編碼背後做了大量工作。
現在數據和 DOM 已經被建立了關聯,響應式數據和非響應式數據。
指令帶有前綴 v-，以表示它們是 Vue 提供的特殊 attribute。
幾乎任意類型的應用界面都可以抽象爲一個組件樹。
vue 常用選項參數
var vm = new Vue({
data: {},
created(){},
computed:{},
watch:{},
methods:{},
})
vue 鉤子函數和生命週期
created 鉤子可以用來在一個實例被創建之後執行代碼還有 mounted、updated 和 destroyed
場景： 在使用echarts 元素掛載的時候用過 mounted
vue 計算屬性
計算屬性是基於它們的響應式依賴進行緩存的。
只在相關響應式依賴發生改變時它們纔會重新求值。
vue 偵聽屬性
當你有一些數據需要隨着其它數據變動而變動時，你很容易濫用 watch。
更新時使用偵聽屬性監聽表單變化，判斷是否調用更新接口。
場景： 調用表單修改接口時可偵聽表單對象是否修改，有修改則調用修改按鈕。
vue 增強綁定
操作元素的 class 列表和內聯樣式是數據綁定的一個常見需求。
在將 v-bind 用於 class 和 style 時，Vue.js 做了專門的增強。
<div :class="{ active: isActive }"></div>
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :class="[activeClass, errorClass]"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="[baseStyles, overridingStyles]"></div>
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
vue 組件
組件註冊有全局註冊和局部註冊
Vue.component("",{
props:[], // 參數接收
template:"", // 參數接收
})
vue 組件通信
子組件可以通過調用內建的 $emit 方法並傳入事件名稱來觸發一個事件
使用 $emit 的第二個參數來提供這個值
一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。
vue 響應式數據
只有當實例被創建時就已經存在於 data 中的屬性纔是響應式的。
使用 Object.freeze()，這會阻止修改現有的屬性，也意味着響應系統無法再追蹤變化。
有前綴 $是vue實例屬性方法，以便與用戶定義的屬性區分開來。
console.log(this.$data === data);
this.$watch('a',function(newVal,oldVal){})
場景： 響應數據初始化
export default{
resetSubmit(){
this.queryForm = Object.assign({},this.queryForm,this.queryFormInit);
},
}
vue 實例初始化過程包括
設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等
vue 模板語法
vue 支持 Mustache 雙大括號語法。
vue 提供完全的 JavaScript 表達式支持。
設計模板內的表達式的初衷是用於簡單運算的。
在模板中放入太多的邏輯會讓模板過重且難以維護。
vue 常用指令1
v-bind 動態綁定元素屬性。
v-on 指令添加一個事件監聽器。
v-model 指令能輕鬆實現表單雙向綁定。
v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定。
v-html 來複合局部模板
vue 條件判斷
v-if 指令用於條件性地渲染一塊內容
v-for 指令用於列表渲染
v-else-if 指令用於條件性地渲染一塊內容
v-else 指令用於條件性地渲染一塊內容
v-show 指令 是另一個用於根據條件展示元素的選項
v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。
v-if 有更多的切換開銷
v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做，知道條件爲真。
v-show 只是簡單地切換元素的 CSS property display
v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
v-show 有更高的初始渲染開銷
v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。
vue 列表渲染
v-for 還支持一個可選的第二個參數，即當前項的索引。
你也可以用 of 替代 in 作爲分隔符，因爲它更接近 JavaScript 迭代器的語法。
在遍歷對象時，會按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下都一致。
vue2.2.0+ 的版本里，當在組件上使用 v-for 時，key 現在是必須的。
vue 常用指令2
v-bind 動態綁定屬性，靜態綁定屬性
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :class="[activeClass, errorClass]"></div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
v-show v-show 不支持 元素，也不支持 v-else 初始渲染開銷大
v-model 表單雙向綁定
<input v-model.lazy="msg">
<input v-model.number="age" type="number">
<input v-model.trim="msg">
<input v-model.lazy="msg">
vue 數組方法包裹
//Vue 將被偵聽的數組的變更方法進行了包裹
let arr =[];
arr.push()
arr.pop()
arr.shift()
arr.unshift()
arr.splice()
arr.sort()
arr.reverse()
//數組替換方法 filter()、concat() 和 slice()。
//它們不會變更原始數組，而總是返回一個新數組。
arr.filter()
arr.concat()
arr.slice()
vue 渲染順序
添加一個具有唯一值的 key attribute 表達“這兩個元素是完全獨立的，不要複用它們”
vue 動態事件綁定 動態參數預期會求出一個字符串，異常情況下值爲 null
<a @[eventName]="doSomething"> doSomething </a>
vue 事件修飾符
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。
<!--表單默認提交-->
<form @submit.prevent="onSubmit">...</form>
<a @click="doSomething">...</a>
<a @[event]="doSomething"> ... </a>
<!--a標籤默認跳轉 阻止冒泡 -->
<a v-on:click.stop.prevent="doThat"></a>
<form v-on:submit.prevent="onSubmit"></form>
<a v-on:click.stop.prevent="doThat"></a>
<div v-on:click.capture="doThis">...</div>
<div v-on:click.self="doThat">...</div>
<a v-on:click.once="doThis"></a>
<div v-on:scroll.passive="onScroll">...</div>
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，然後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滾動事件的默認行爲 (即滾動行爲) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
vue 按鍵修飾符 按鍵碼 系統修飾符
<input v-on:keyup.enter="submit">
<input v-on:keyup.13="submit">
<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button v-on:click.exact="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>