Vue核心概念及特性 (一)

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。
特色: 易用，靈活，高效 漸進式框架

能夠隨意組合須要用到的模塊 vue + components + vue-router + vuex + vue-cli

一.Vue的概念和特性

1.什麼是庫，什麼是框架?

• 庫是將代碼集合成一個產品,庫是咱們調用庫中的方法實現本身的功能。
• 框架則是爲解決一類問題而開發的產品,框架是咱們在指定的位置編寫好代碼，框架幫咱們調用。

框架與庫之間最本質區別在於控制權：you call libs, frameworks call you

Vue屬於框架

2.MVC模型 && MVVM模型

在傳統的mvc中除了model和view之外的邏輯都放在了controller中，致使controller邏輯複雜難以維護,在mvvm中view和model沒有直接的關係，所有經過viewModel進行交互

Vue是MVVM模式

3.聲明式和命令式

• 本身寫for循環就是命令式 (命令其按照本身的方式獲得結果)
• 聲明式就是利用數組的方法forEach (咱們想要的是循環，內部幫咱們去作)

二.Vue的基本使用

1.mustache語法

容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。在使用數據前須要先聲明

• 編寫三元表達式
• 獲取返回值
• JavaScript 表達式

<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.響應式數據變化

Vue中使用Object.defineProperty從新將對象中的屬性定義，若是是數組的話須要重寫數組原型上的方法

function notify() {
    console.log('視圖更新')
}
let data = {
    name: 'jw',
    age: 18,
    arr: [1,2,3]
}
// 重寫數組的方法
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) { // 觀察數組中的每一項
    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); // 再一次循環value
    Object.defineProperty(obj, key, { // 不支持數組
        get() {
            return value;
        },
        set(val) {
            notify();
            observer(val);
            value = val;
        }
    });
}
observer(data);
data.arr.push({name:'jw'})
console.log(data.arr);

缺陷

• 不能經過經過長度，索引改變數組
• 不能給對象新增屬性
• 須要經過vm.$set和vm.$delete方法強制添加/刪除響應式數據

3.Vue實例上的方法

• 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

永遠不要對用戶輸入使用v-html,可能會致使xss攻擊

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

3.v-bind

動態綁定屬性須要使用v-bind進行綁定

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

可使用:來簡寫 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>

多個元素循環時外層須要增長 template標籤,須要給真實元素增長 key,並且 key不能重複，儘可能不要採用索引做爲 key的值

舉個key值的例子:

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

v-if能夠切換DOM元素是否存在,而且v-if爲false時內部指令不會被執行
v-show能夠控制元素的顯示及隱藏，主要控制的是元素樣式

6.v-on

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

7.v-model

雙向數據綁定

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

• select

<select v-model="select">
    <option 
        v-for="fruit in fruits"
        :value="fruit">
            {{fruit}}
    </option>
</select>

• radio

<input type="radio" v-model="value"  value="男">
 <input type="radio" v-model="value"  value="女">

• checkbox

<input type="checkbox" v-model="checks" value="游泳" >
<input type="checkbox" v-model="checks" value="健身">

• 修飾符應用 .number .lazy .trim

<input type="text" v-model.number="value">
<input type="text" v-model.trim="value">

四.自定義指令

• 全局指令和局部指令

• 編寫一個自定義指令

  • 鉤子函數bind，inserted，update

    <input type="text" v-focus.color="'red'">
        Vue.directive('focus',{
            inserted:(el,bindings)=>{
                let color = bindings.modifiers.color;
                if(color){
                    el.style.boxShadow = `1px 1px 2px ${bindings.value}`
                }   
                el.focus();
            }
        });

  • clickoutside指令

    <div v-click-outside="change">
            <input type="text"  @focus="flag=true" >
            <div v-show="flag">
                contenter
            </div>
        </div>
        <script>
            let vm = new Vue({
                el:'#app',
                data:{
                    flag:false
                },
                methods:{
                    change(){
                        this.flag = false
                    }
                },
                directives:{
                    'click-outside'(el,bindings,vnode){
                        document.addEventListener('click',(e)=>{
                            if(!el.contains(e.target,vnode)){
                                let eventName = bindings.expression;
                                vnode.context[eventName]()
                            }
                        })
                    }
                }
            })
        </script>

五.Vue中的生命週期

• beforeCreate 在實例初始化以後，數據觀測(data observer) 和 event/watcher 事件配置以前被調用。
• created 實例已經建立完成以後被調用。在這一步，實例已完成如下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。這裏沒有$el
• beforeMount 在掛載開始以前被調用：相關的 render 函數首次被調用。
• mounted el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。
• beforeUpdate 數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。
• updated 因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。
• beforeDestroy 實例銷燬以前調用。在這一步，實例仍然徹底可用。
• destroyed Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。 該鉤子在服務器端渲染期間不被調用。

鉤子函數中該作的事情

• created 實例已經建立完成，由於它是最先觸發的緣由能夠進行一些數據，資源的請求。
• mounted 實例已經掛載完成，能夠進行一些DOM操做
• beforeUpdate 能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
• updated 能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態，由於這可能會致使更新無限循環。 該鉤子在服務器端渲染期間不被調用。
• destroyed 能夠執行一些優化操做,清空定時器，解除綁定事件