Vue 開發基礎（上）05

阿新 • • 發佈：2021-07-10

Vue 開發基礎（上）

Vue 的生命週期

　　Vue 例項為生命週期提供了回撥函式，用於特定的情況觸發，貫穿整個例項，給使用者在不同階段新增自己的程式碼提供了機會。每一個 Vue 例項在被建立時都需要經過一系列的初始化過程，如初始資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化是更新 DOM 等。

　　鉤子函式

　　　　用於描述 Vue 例項從建立到銷燬的整個生命週期

　　　　例項建立

　　　　　　beforeCreate 以及 Create 鉤子函式的使用

<body>
    <!-- ③ 將例項物件進行頁面掛載 -->
<div id="app 
">{{ msg }}</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '張三'
        },
        // ① 在建立例項時觸發
        beforeCreate() {
            console.log('建立例項之前')
            console.log(this.$data.msg)
        },
        // ② 整個例項建立完後執行
        created() {
            console.log( 
'建立例項之後')
            console.log(this.msg)
        }
    })
</script>

　　　　頁面掛載

　　　　　　例項建立後，如果掛載點 el 存在，就會進行頁面掛載

　　　　　　beforMount 和 mounted 鉤子函式

<body>
<div id="app">{{ msg }}</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg:  
'張三'
        },
        beforeMount() {
            console.log('掛在之前')
            // 通過 this.$el 獲取 el 的 DOM 元素
            console.log(this.$el.innerHTML)
        },
        mounted() {
            console.log('掛在之後')
            console.log(this.$el.innerHTML)
        }
    })
</script>

　　　　資料更新

　　　　　　掛在完成後，更新資料時，會執行 beforUpdate 和 updated 鉤子函式

<body>
<div id="app">
    <!--  定義需要操作的元素，並給元素設定樣式  v-if 對於元素的顯示隱藏
     ref 用於給元素註冊引用資訊-->
    <div v-if="isShow" ref="self">test</div>
    <!-- 按鈕改變 isShow 的值 來實現顯示隱藏 -->
    <button @click="isShow=!isShow">更新</button>
</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // 預設元素隱藏
            isShow: false
        },
        beforeUpdate() {
            console.log('更新之前')
            console.log(this.$refs.self)
        },
        updated() {
            console.log('更新之後')
            console.log(this.$refs.self)
        }
    })
</script>

　　　　例項銷燬

　　　　　　在生命週期的最後階段執行 beforDestroy 和 destroyed 鉤子函式

<body>
<div id="app">
    <div ref="self">{{ msg }}</div>
</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '張三'
        },
        beforeDestroy() {
            console.log('銷燬之前')
            console.log(this.$refs.self)
            console.log(this.msg)
            console.log(vm)
        },
        destroyed() {
            console.log('銷燬之後')
            console.log(this.$refs.self)
            console.log(this.msg)
            console.log(vm)
        }
    })
</script>

Vue 開發基礎（上）05

Vue 開發基礎（上） Vue 的生命週期　　Vue 例項為生命週期提供了回撥函式，用於特定的情況觸發，貫穿整個例項，給使用者在不同階段新增自己的程式碼提供了機會。每一個 Vue 例項在被建立時都需要經過一系列的初始

Web前端開發技術：Vue開發基礎（1）

技術標籤：VUEvue 一、實驗目的：掌握Vue開發環境的搭建、開發和除錯工具的使用以及Vue專案的建立。

Vue 開發基礎（下）01

Vue 開發基礎（下）　　Vue 還有一些豐富功能，例如，通過 API(Application Programming Interface，應用程式程式設計介面) 構建自定義指令、元件、外掛，通過 Vue 屬性完成更強大的功能。

Vue 開發基礎（下）04

Vue 開發基礎（下）元件進階　　元件是對結構的抽象，元件可複用性很強，每個元件都有自己的作用域，區域之間獨立工作互不影響，從而降低了程式碼的耦合度。Vue 還刻有對元件的選項輕鬆完成合並，讓元件的功能變得

go 語言基礎（上）

技術標籤：程式語言本文件為個人部落格文件系統的備份版本、作者：小遊、作者部落格：點選訪問

深入瞭解Vue元件 — Prop（上）

1.Prop 1.1 Prop的大小寫 HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字元解釋為小寫字元。

windows驅動開發基礎（一）使用者層與驅動層通訊------ioctl

技術標籤：windows核心程式碼片段來自wdk7，工程路徑C:\\WinDDK\\7600.16385.1\\src\\general\\ioctl\\wdm，該工程描述了IOCTLs (METHOD_IN_DIRECT, METHOD_OUT_DIRECT, METHOD_NEITHER, and METHOD_BUFFERED)的