国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue.js之生命周期

HitenDev / 3674人閱讀

摘要：生命周期在實例初始化之后，數據觀測和事件配置之前被調用。點擊修改數據在中使用組件與在中使用組件是一樣的效果在實例創建完成后被立即調用。

有時候，我們需要在實例創建過程中進行一些初始化的工作，以幫助我們完成項目中更復雜更豐富的需求開發，針對這樣的需求，Vue提供給我們一系列的鉤子函數。

vue生命周期

beforeCreate

在實例初始化之后，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../statics/vue.js">script>
head>
<body>

    <div id="app">
        {{ name }}
        <button @click="myClick">點擊修改數據button>
    div>

    <script>

        new Vue({
            el: "#app",
            // 在template中使用組件與在body中使用組件是一樣的
            // template: ``,
            data: {
                name: "Alex"
            },
            methods: {
                init: function () {
                    console.log(this.name);
                },
                myClick: function () {
                    this.name = "Pizza";
                }
            },
            beforeCreate() {
                console.group("beforeCreate");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            });
    script>

body>
html>

效果:

created

在實例創建完成后被立即調用。在這一步，實例已完成以下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el?屬性目前不可見。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="static/vue.min.js">script>
head>
<body>

    <div id="app">
        {{ name }}
        <button @click="myClick">點擊修改數據button>
    div>

    <script>

        new Vue({
            el: "#app",
            // 在template中使用組件與在body中使用組件是一樣的
            // template: ``,
            data: {
                name: "Alex"
            },
            methods: {
                init: function () {
                    console.log(this.name);
                },
                myClick: function () {
                    this.name = "Pizza";
                }
            },
            beforeCreate() {
                console.group("beforeCreate");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            created() {
                console.group("Created");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            }
        })
    script>

body>
html>

beforeMount

在掛載開始之前被調用：相關的?render?函數首次被調用。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../statics/vue.js">script>
head>
<body>

    <div id="app">
        {{ name }}
        <button @click="myClick">點擊修改數據button>
    div>

    <script>

        new Vue({
            el: "#app",
            // 在template中使用組件與在body中使用組件是一樣的
            // template: ``,
            data: {
                name: "Alex"
            },
            methods: {
                init: function () {
                    console.log(this.name);
                },
                myClick: function () {
                    this.name = "Pizza";
                }
            },
            beforeCreate() {
                console.group("beforeCreate");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            created() {
                console.group("Created");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            beforeMount() {
                console.group("beforeMount");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            }
        })
    script>

body>
html>

mounted

el?被新創建的?vm.$el?替換，并掛載到實例上去之后調用該鉤子。如果 root 實例掛載了一個文檔內元素，當?mounted?被調用時?vm.$el?也在文檔內。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../statics/vue.js">script>
head>
<body>

    <div id="app">
        {{ name }}
        <button @click="myClick">點擊修改數據button>
    div>

    <script>

        new Vue({
            el: "#app",
            // 在template中使用組件與在body中使用組件是一樣的
            // template: ``,
            data: {
                name: "Alex"
            },
            methods: {
                init: function () {
                    console.log(this.name);
                },
                myClick: function () {
                    this.name = "Pizza";
                }
            },
            beforeCreate() {
                console.group("beforeCreate");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            created() {
                console.group("Created");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            beforeMount() {
                console.group("beforeMount");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            mounted() {
                console.group("mounted");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
        })
    script>

body>
html>

beforeUpdate

數據更新時調用，發生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現有的 DOM，比如手動移除已添加的事件監聽器。

該鉤子在服務器端渲染期間不被調用，因為只有初次渲染會在服務端進行.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../statics/vue.js">script>
head>
<body>

    <div id="app">
        {{ name }}
        <button @click="myClick">點擊修改數據button>
    div>

    <script>

        new Vue({
            el: "#app",
            // 在template中使用組件與在body中使用組件是一樣的
            // template: ``,
            data: {
                name: "Alex"
            },
            methods: {
                init: function () {
                    console.log(this.name);
                },
                myClick: function () {
                    this.name = "Pizza";
                }
            },
            beforeCreate() {
                console.group("beforeCreate");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            created() {
                console.group("Created");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            beforeMount() {
                console.group("beforeMount");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            mounted() {
                console.group("mounted");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            beforeUpdate() {
                console.group("beforeUpdate");
                console.log("el: ", this.$el);
                console.log("data: ",

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1537.html

相關文章

  • # vue.js 之 對vue.js基礎理解

    摘要：之對基礎理解構造器是一個構造函數，編程中稱之為構造器每一個都是一個構造函數的實例，這個過程叫做實例化構造函數需要將其實例化后才會啟用構造器要求實例化時需要傳入一個選項對象組件其實都是被擴展的實例。 vue.js 之 對vue.js基礎理解 Vue構造器 1 . Vue.js是一個構造函數，編程中稱之為構造器 2 . 每一個new Vue() 都是一個Vue構造函數的實例，這個過程叫...

    Rainie 評論0 收藏0

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

  • Vue 實例中的生命周期鉤子詳解

    摘要：實例在文檔中經常會使用這個變量名表示實例，在實例化時，需要傳入一個選項對象，它可以包含數據模板掛載元素方法生命周期鉤子等選項。通俗說就是實例從創建到銷毀的過程，就是生命周期。 Vue 實例中的生命周期鉤子 Vue 框架的入口就是 Vue 實例，其實就是框架中的 view model ，它包含頁面中的業務處理邏輯、數據模型等，它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程...

    gityuan 評論0 收藏0

發表評論

0條評論

HitenDev

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<