Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。

特點(diǎn): 易用，靈活，高效，漸進(jìn)式框架。

前端優(yōu)選

可以隨意組合需要用到的模塊 vue + components + vue-router + vuex + vue-cli

一.Vue的概念和特性

1.什么是庫，什么是框架？

• 庫是將代碼集合成一個(gè)產(chǎn)品，我們可以調(diào)用庫中的方法實(shí)現(xiàn)自己的功能。
• 框架則是為解決一類問題而開發(fā)的產(chǎn)品，我們?cè)谥付ǖ奈恢镁帉懞么a，使用時(shí)框架幫我們調(diào)用。

框架與庫之間最本質(zhì)區(qū)別在于控制權(quán)：you call libs, frameworks call you.

Vue屬于框架

2.MVC模型 && MVVM模型

前端優(yōu)選

在傳統(tǒng)的mvc中除了model和view以外的邏輯都放在了controller中，導(dǎo)致controller邏輯復(fù)雜難以維護(hù),在mvvm中view和model沒有直接的關(guān)系，全部通過viewModel進(jìn)行交互

Vue是MVVM模式

3.聲明式和命令式

• 自己寫for循環(huán)就是命令式 (命令其按照自己的方式得到結(jié)果)
• 聲明式就是利用數(shù)組的方法forEach (我們想要的是循環(huán)，內(nèi)部幫我們?nèi)プ?

二.Vue的基本使用

1.mustache語法

允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。在使用數(shù)據(jù)前需要先聲明：

• 編寫三元表達(dá)式
• 獲取返回值
• JavaScript 表達(dá)式

<div id="app">
    {{ 1+1 }}
    {{ msg == 'hello'?'yes':'no' }}
    {{ {name:1} }}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
    el:'#app',
    data:{
        msg:'hello'
    }
})
</script>

2.響應(yīng)式數(shù)據(jù)變化

Vue中使用Object.defineProperty重新將對(duì)象中的屬性定義，如果是數(shù)組的話需要重寫數(shù)組原型上的方法

function notify() {
    console.log('視圖更新')
}
let data = {
    name: 'youxuan',
    age: 18,
    arr: [1,2,3]
}
// 重寫數(shù)組的方法
let oldProtoMehtods = Array.prototype;
let proto = Object.create(oldProtoMehtods);
['push', 'pop', 'shift', 'unshift'].forEach(method => {
    proto[method] = function (...args) {
        let inserted;
        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args;
                break;
        }
        observerArray(inserted)
        notify();
        oldProtoMehtods[method].call(this, ...args)
    }
})
function observerArray(obj) { // 觀察數(shù)組中的每一項(xiàng)
    for (let i = 0; i < obj.length; i++) {
        observer(obj[i]);
    }
}
function observer(obj) {
    if(typeof obj !== 'object'){
        return obj
    }
    if (Array.isArray(obj)) {
        obj.__proto__ = proto
        observerArray(obj);
    }else{
        for (let key in obj) {
            defineReactive(obj, key, obj[key]);
        }
    }
}
function defineReactive(obj, key, value) {
    observer(value); // 再一次循環(huán)value
    Object.defineProperty(obj, key, { // 不支持?jǐn)?shù)組
        get() {
            return value;
        },
        set(val) {
            notify();
            observer(val);
            value = val;
        }
    });
}
observer(data);
data.arr.push({name:'jw'})
console.log(data.arr);

· 缺陷

• 不能通過通過長度、索引改變數(shù)組
• 不能給對(duì)象新增屬性
• 需要通過vm.$set和vm.$delete方法強(qiáng)制添加/刪除響應(yīng)式數(shù)據(jù)

3.Vue實(shí)例上的方法

• vm.$el;
• vm.$data;
• vm.$options;
• vm.$nextTick();
• vm.$mount();
• vm.$watch();
• vm.$set();

三.Vue中的指令

在vue中 指令 (Directives) 是帶有 v- 前綴的特殊特性,主要的功能就是操作DOM

1.v-once

<div v-once>{{state.count}} </div>

2.v-html

永遠(yuǎn)不要對(duì)用戶輸入使用v-html，可能會(huì)導(dǎo)致xss攻擊

<div v-html="text"></div>

3.v-bind

動(dòng)態(tài)綁定屬性需要使用v-bind進(jìn)行綁定

<img v-bind:src="src">

可以使用:來簡(jiǎn)寫 v-bind

4.v-for

<template v-for="(fruit,index) in fruits" >
    <li :key="`item_${index}`">{{fruit}}</li>
    <li :key="`fruit_${index}`">{{fruit}}</li>
</template>

多個(gè)元素循環(huán)時(shí)外層需要增加template標(biāo)簽，需要給真實(shí)元素增加key，而且key不能重復(fù)，盡量不要采用索引作為key的值

舉個(gè)key值的例子:

前端優(yōu)選

5.v-if/v-else/v-show

v-if可以切換DOM元素是否存在，并且v-if為false時(shí)內(nèi)部指令不會(huì)被執(zhí)行
v-show可以控制元素的顯示及隱藏，主要控制的是元素樣式

6.v-on

• 事件的綁定 v-on綁定事件
• 事件修飾符 (.stop .prevent) .capture .self .once .passive

7.v-model

雙向數(shù)據(jù)綁定

<input type="text" :value="value" @input="input">
<input type="text" v-model="value">

四.面試題環(huán)節(jié)

• 請(qǐng)說下對(duì)于MVVM的理解
• Vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理
• Vue常用的指令有哪些
• v-model的原理
• v-if 和 v-show 區(qū)別
• Vue中 key 值的作用

歡迎關(guān)注 [ 前端優(yōu)選 ] 精彩文章，等你來看！
webyouxuan