Vue開發看這裡就夠了
阿新 • • 發佈：2019-01-05
Vue -漸進式JavaScript框架
介紹
- Vue.js 是一套構建使用者介面(UI)的漸進式JavaScript框架
庫和框架的區別
Library
庫，本質上是一些函式的集合。每次呼叫函式，實現一個特定的功能，接著把控制權交給使用者- 代表：jQuery
- jQuery這個庫的核心：DOM操作，即：封裝DOM操作，簡化DOM操作
Framework
框架，是一套完整的解決方案，使用框架的時候，需要把你的程式碼放到框架合適的地方，框架會在合適的時機呼叫你的程式碼
- 框架規定了自己的程式設計方式，是一套完整的解決方案
- 使用框架的時候，由框架控制一切，我們只需要按照規則寫程式碼
主要區別
- You call Library, Framework calls you
核心點：誰起到主導作用（控制反轉）
- 框架中控制整個流程的是框架
- 使用庫，由開發人員決定如何呼叫庫中提供的方法（輔助）
- 好萊塢原則：Don't call us, we'll call you.
- 框架的侵入性很高（從頭到尾）
MVVM的介紹
MVC
- M: Model 資料模型（專門用來操作資料，資料的CRUD）
- V：View 檢視（對於前端來說，就是頁面）
- C：Controller 控制器（是檢視和資料模型溝通的橋樑，用於處理業務邏輯）
MVVM組成
- MVVM ===> M / V / VM
- M：model資料模型
- V：view檢視
- VM：ViewModel 檢視模型
優勢對比
- MVC模式，將應用程式劃分為三大部分，實現了職責分離
- 在前端中經常要通過 JS程式碼 來進行一些邏輯操作，最終還要把這些邏輯操作的結果現在頁面中。也就是需要頻繁的操作DOM
MVVM通過
資料雙向繫結讓資料自動地雙向同步- V（修改資料） -> M
- M（修改資料） -> V
- 資料是核心
- Vue這種MVVM模式的框架，不推薦開發人員手動操作DOM
Vue中的MVVM
雖然沒有完全遵循 MVVM 模型，Vue 的設計無疑受到了它的啟發。因此在文件中經常會使用 vm (ViewModel 的簡稱) 這個變數名錶示 Vue 例項
學習Vue要轉化思想
- 不要在想著怎麼操作DOM，而是想著如何操作資料！！！
起步 - Hello Vue
- 安裝：
npm i -S vue
<!-- 指定vue管理內容區域，需要通過vue展示的內容都要放到找個元素中 通常我們也把它叫做邊界 資料只在邊界內部解析--> Vue例項
- 注意 1：先在data中宣告資料，再使用資料
- 注意 2：可以通過
vm.$data訪問到data中的所有屬性，或者vm.msg
var vm = new Vue({
data: {
msg: '大家好，...'
}
})
vm.$data.msg === vm.msg // true資料繫結
- 最常用的方式：
Mustache(插值語法)，也就是{{}}語法 - 解釋：
{{}}從資料物件data中獲取資料 - 說明：資料物件的屬性值發生了改變，插值處的內容都會更新
- 說明：
{{}}中只能出現JavaScript表示式 而不能解析js語句 - 注意：Mustache 語法不能作用在 HTML 元素的屬性上
<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no' }}</p>
<!-- ！！！錯誤示範！！！ -->
<h1 title="{{ err }}"></h1>雙向資料繫結 Vue two way data binding
雙向資料繫結：將DOM與Vue例項的data資料繫結到一起，彼此之間相互影響
- 資料的改變會引起DOM的改變
- DOM的改變也會引起資料的變化
原理：
Object.defineProperty中的get和set方法getter和setter：訪問器- 作用：指定
讀取或設定物件屬性值的時候，執行的操作
/* defineProperty語法 介紹 */
var obj = {}
Object.defineProperty(obj, 'msg', {
// 設定 obj.msg = "1" 時set方法會被系統呼叫 引數分別是設定後和設定前的值
set: function (newVal, oldVal) { },
// 讀取 obj.msg 時get方法會被系統呼叫
get: function ( newVal, oldVal ) {}
})Vue雙向繫結的極簡實現
<!-- 示例 -->
<input type="text" id="txt" />
<span id="sp"></span>
<script>
var txt = document.getElementById('txt'),
sp = document.getElementById('sp'),
obj = {}
// 給物件obj新增msg屬性，並設定setter訪問器
Object.defineProperty(obj, 'msg', {
// 設定 obj.msg 當obj.msg反生改變時set方法將會被呼叫
set: function (newVal) {
// 當obj.msg被賦值時 同時設定給 input/span
txt.value = newVal
sp.innerText = newVal
}
})
// 監聽文字框的改變 當文字框輸入內容時 改變obj.msg
txt.addEventListener('keyup', function (event) {
obj.msg = event.target.value
})
</script>動態新增資料的注意點
- 注意：只有
data中的資料才是響應式的，動態新增進來的資料預設為非響應式 可以通過以下方式實現動態新增資料的響應式
- 1
Vue.set(object, key, value)- 適用於新增單個屬性 - 2
Object.assign()- 適用於新增多個屬性
- 1
var vm = new Vue({
data: {
stu: {
name: 'jack',
age: 19
}
}
})
/* Vue.set */
Vue.set(vm.stu, 'gender', 'male')
/* Object.assign 將引數中的所有物件屬性和值 合併到第一個引數 並返回合併後的物件*/
vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })非同步DOM更新
- 說明：Vue 非同步執行 DOM 更新，監視所有資料改變，一次性更新DOM
- 優勢：可以去除重複資料，對於避免不必要的計算和 避免重複 DOM 操作上，非常重要
如果需要那到更新後dom中的資料 則需要通過
Vue.nextTick(callback)：在DOM更新後，執行某個操作（屬於DOM操作）- 例項呼叫
vm.$nextTick(function () {})
- 例項呼叫
methods: {
fn() {
this.msg = 'change'
this.$nextTick(function () {
console.log('$nextTick中列印：', this.$el.children[0].innerText);
})
console.log('直接列印：', this.$el.children[0].innerText);
}
}指令
- 解釋：指令 (Directives) 是帶有
v-字首的特殊屬性 - 作用：當表示式的值改變時，將其產生的連帶影響，響應式地作用於 DOM
v-text
- 解釋：更新DOM物件的 textContent
<h1 v-text="msg"></h1>v-html
- 解釋：更新DOM物件的 innerHTML
<h1 v-html="msg"></h1>v-bind
- 作用：當表示式的值改變時，將其產生的連帶影響，響應式地作用於 DOM
- 語法：
v-bind:title="msg" - 簡寫：
:title="msg"
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>v-on
- 作用：繫結事件
- 語法：
v-on:click="say"orv-on:click="say('引數', $event)" - 簡寫：
@click="say" - 說明：繫結的事件定義在
methods
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>事件修飾符
.stop阻止冒泡，呼叫 event.stopPropagation().prevent阻止預設行為，呼叫 event.preventDefault().capture新增事件偵聽器時使用事件捕獲模式.self只當事件在該元素本身（比如不是子元素）觸發時，才會觸發事件.once事件只觸發一次
v-model
- 作用：在表單元素上建立雙向資料繫結
- 說明：監聽使用者的輸入事件以更新資料
- 案例：計算器
<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>v-for
- 作用：基於源資料多次渲染元素或模板塊
<!-- 1 基礎用法 -->
<div v-for="item in items">
{{ item.text }}
</div>
<!-- item 為當前項，index 為索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 為值，key 為鍵，index 為索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>key屬性
- 推薦：使用
v-for的時候提供key屬性，以獲得性能提升。 - 說明：使用 key，VUE會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。
<div v-for="item in items" :key="item.id">
<!-- 內容 -->
</div>樣式處理 -class和style
- 使用方式：
v-bind:class="expression"or:class="expression" - 表示式的型別：字串、陣列、物件（重點）
- 語法：
<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===> 解析後
<div class="active"></div>
<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>解析後
<div class="active text-danger"></div>
<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>解析後
<div class="active text-danger"></div>
--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 將多個 樣式物件 應用到一個元素上-->
<!-- baseStyles 和 overridingStyles 都是data中定義的物件 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>v-if 和 v-show
- 條件渲染
v-if：根據表示式的值的真假條件，銷燬或重建元素v-show：根據表示式之真假值，切換元素的 display CSS 屬性
<p v-show="isShow">這個元素展示出來了嗎？？？</p>
<p v-if="isShow">這個元素，在HTML結構中嗎？？？</p>提升效能：v-pre
- 說明：vue會跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。
<span v-pre>{{ this will not be compiled }}</span>提升效能：v-once
- 說明：vue只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。
<span v-once>This will never change: {{msg}}</span>過濾器 filter
- 作用：文字資料格式化
- 過濾器可以用在兩個地方：
{{}}和 v-bind 表示式 - 兩種過濾器：1 全域性過濾器 2 區域性過濾器
全域性過濾器
- 說明：通過全域性方式建立的過濾器，在任何一個vue例項中都可以使用
- 注意：使用全域性過濾器的時候，需要先建立全域性過濾器，再建立Vue例項
- 顯示的內容由過濾器的返回值決定
Vue.filter('filterName', function (value) {
// value 表示要過濾的內容
})- 示例：
<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>
<script>
Vue.filter('date', function(value, format) {
// value 要過濾的字串內容，比如：dateStr
// format 過濾器的引數，比如：'YYYY-MM-DD hh:mm:ss'
})
</script>區域性過濾器
- 說明：區域性過濾器是在某一個vue例項的內容建立的，只在當前例項中起作用
{
data: {},
// 通過 filters 屬性建立區域性過濾器
// 注意：此處為 filters
filters: {
filterName: function(value, format) {}
}
}按鍵值修飾符
- 說明：在監聽鍵盤事件時，Vue 允許為
v-on在監聽鍵盤事件時新增關鍵修飾符 - 其他：修飾鍵（.ctrl等）、滑鼠按鍵修飾符（.left等）
// 只有在 keyCode 是 13 時呼叫 vm.submit()
@keyup.13="submit"
// 使用全域性按鍵別名
@keyup.enter="add"
---
// 通過全域性 config.keyCodes 物件自定義鍵值修飾符別名
Vue.config.keyCodes.f2 = 113
// 使用自定義鍵值修飾符
@keyup.enter.f2="add"監視資料變化 - watch
- 概述：
watch是一個物件，鍵是需要觀察的表示式，值是對應回撥函式 - 作用：當表示式的值發生變化後，會呼叫對應的回撥函式完成響應的監視操作
new Vue({
data: { a: 1, b: { age: 10 } },
watch: {
a: function(val, oldVal) {
// val 表示當前值
// oldVal 表示舊值
console.log('當前值為：' + val, '舊值為：' + oldVal)
},
// 監聽物件屬性的變化
b: {
handler: function (val, oldVal) { /* ... */ },
// deep : true表示是否監聽物件內部屬性值的變化
deep: true
},
// 只監視user物件中age屬性的變化
'user.age': function (val, oldVal) {
},
}
})計算屬性
- 說明：計算屬性是基於它們的依賴進行快取的，只有在它的依賴發生改變時才會重新求值
- 注意：Mustache語法（{{}}）中不要放入太多的邏輯，否則會讓模板過重、難以理解和維護
- 注意：
computed中的屬性不能與data中的屬性同名，否則會報錯
var vm = new Vue({
el: '#app',
data: {
firstn