Vue 介紹,優點,例項

1.什麼是vue

以資料驅動的web漸進式框架

三大主流框架: Angular React Vue

2.vue優點

- 以資料驅動,不直接操作DOM,效率高
- 單頁面應用,減少請求頁面次數,速度快
- 資料的雙向繫結,更新快
- 虛擬DOM,開發操作資料,資料更新虛擬DOM,虛擬DOM渲染真實DOM
- 元件化開發

<script>

// new一個Vue就是一個例項

// 例項與頁面對應掛載點的所有頁面結構一一繫結

// 一個頁面中可以出現多個例項(掛載點),建議只出現一個例項,且掛載點用id

new Vue({

    // 掛載點

    el: "#app"

})

</script>

<div id="app">

    <!-- 插值表示式中存放的為變數,變數需要在vue例項的$data中進行初始化 -->

    {{ msg }}

</div>

<script>

var app = new Vue({

    el: "#app",

    //資料

    data: {

        msg: "資料"

    }

})

</script>

<script>

    //取資料

    app.$data.msg;

    app.msg

</script>

<div id="app">

    <!-- v-on: 指令,操作事件的 -->

    <p class="box" v-on:click="boxAction">{{ msg }}</p>

</div>

<script>

    new Vue({

        el: "#app",

        data: {

            msg: "資料"

        },

        // methods為掛載點內部提供方法的實現體

        methods: {

            boxAction: function(ev) {

                console.log(ev)

            }

        }

    })

</script>

<div id="app">

     <input type="text" v-model="a">

    <input type="text" v-model="b">

    <div>

        {{ c }}

    </div>

</div>

<script>

    // 一個變數依賴於多個變數

    new Vue({

        el: "#app",

        data: {

            a: "",

            b: "",

        },

        computed: {

            c: function() {

                // this代表該vue例項

                return this.a + this.b;

            }

        }

    })

</script>

<div id="app">

     <input type="text" v-model="ab">

    <div>

        {{ a }}

        {{ b }}

    </div>

</div>

<script>

    // 多個變數依賴於一個變數

    new Vue({

        el: "#app",

        data: {

            ab: "",

            a: "",

            b: "",

        },

        watch: {

            ab: function() {

                // 邏輯根據需求而定

                this.a = this.ab[0];

                this.b = this.ab[1];

            }

        }

    })

</script>

- 定義

每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的程式碼的機會。

- 鉤子方法

beforeCreate：在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫。

created：在例項建立完成後被立即呼叫。在這一步，例項已完成以下的配置：資料觀測 (data observer)，屬性和方法的運算，watch/event 事件回撥。然而，掛載階段還沒開始，$el 屬性目前不可見。

beforeMount：在掛載開始之前被呼叫：相關的 render 函式首次被呼叫。

mounted：el被新建立的vm.$el替換，並掛載到例項上去之後呼叫該鉤子。

beforeUpdate：資料更新時呼叫，發生在虛擬 DOM 打補丁之前。

updated：資料更新時呼叫，發生在虛擬 DOM 打補丁之前。

activated：keep-alive 元件啟用時呼叫。

deactivated：keep-alive 元件停用時呼叫。

beforeDestroy：例項銷燬之前呼叫。在這一步，例項仍然完全可用。

destroyed：Vue例項銷燬後呼叫。呼叫後，Vue例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。

errorCaptured：2.5.0+ 新增，當捕獲一個來自子孫元件的錯誤時被呼叫。此鉤子會收到三個引數：錯誤物件、發生錯誤的元件例項以及一個包含錯誤來源資訊的字串。此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。

- 重點鉤子

created：例項完全建立完畢(屬性與方法都準備就緒)。可以進行資料操作(請求後臺資料，重新渲染最新資料)

mounted：虛擬DOM構建完畢，並完成例項的el掛載。可以重新操作頁面DOM

new Vue({

    el: "#app",

    data: {

        msg: "message"

    },

    beforeCreate () {

        console.log("例項剛剛建立");

        console.log(this.msg);

    },

    created () {

        console.log("例項建立成功, data, methods");

        console.log(this.msg);

    }

    // 拿到需求 => 確定鉤子函式 => 解決需求的邏輯程式碼塊

})