vue（4）—— vue的過濾器，監聽屬性，生命週期函數，獲取DOM元素

時間 2019-12-10

標籤 vue 過濾器監聽屬性生命周期函數獲取 dom 元素欄目 HTML 简体版

原文原文鏈接

過濾器

vue容許自定義過濾器，我我的認爲，過濾器有兩種，一種是對數據的清洗過濾，一種是對數據切換的動畫過濾javascript

數據切換的動畫過濾

這裏仍是利用前面的動態組件的例子：css

這裏因爲沒辦法展現動畫效果，代碼以下，本身體會吧：html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

    <style>
        .v-enter, .v-leave-to{
            transform: translateX(10px);
            opacity: 0;
        }
        .v-enter-active,.v-leave-active {
            transition: all .5s ease;
        }        
    </style>
</head>
<body>
    <div id="app">
        <a href='' @click.prevent='Name="Vheader"'>頭部</a>
        <a href='' @click.prevent='Name="Vfooter"'>底部</a>
        <transition mode='out-in'>
            <component :is="Name"></component>
        </transition>
    </div>
    <!--你的vue模塊路徑-->
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        Vue.component('Vheader', {
            template: '<div>頭部內容</div>'
        })
        Vue.component('Vfooter', {
            template: '<div>底部內容</div>'
        })
        let app = new Vue({
            el: '#app',
            data: {  Name: ''},
        })
    </script>
</body>

</html>

動畫過濾

其中transition是vue自帶的動畫組件，相關參數及說明：vue

而且會自帶有這些css參數：java

更詳細的說明參見：官方文檔node

對數據的清洗過濾

什麼意思呢？若是你沒看明白，來，直接看個例子，相信你就能看懂了react

這個過濾器，若是你是用過Python的django框架的朋友，應該很熟悉，django裏面模板文件裏也有個這種過濾器django

全局過濾器

固然也有全局的過濾器，這個就跟前面的組件很像了後端

監聽屬性

監聽屬性一共有兩種，都是做爲監聽數據的api

計算屬性

模板內的表達式很是便利，可是設計它們的初衷是用於簡單運算的。由於在模板中放入太多的邏輯會讓模板太重且難以維護

計算屬性默認是get，即獲取值，固然也能夠修改值，先看看get類型的：

最開始msg是test，而後computed屬性內的就是計算屬性，此時的是changestr，將值渲染到p標籤上，當點擊button元素原始的監聽事件點擊修改了msg的值後，計算屬性changstr獲取到新的值，立馬作出反應，而後從新渲染到p標籤上

set方式：

這裏可能不太好理解

步驟：

1.默認渲染出msg爲test的

2.計算屬性changestr觸發get方法

3.渲染到p標籤

4.click點擊

5.綁定方法修改msg的值

6.計算屬性changestr觸發set方法，修改值

7.計算屬性實時監聽發現msg值修改，從新get值

8.渲染到p標籤

若是須要設置值的話，就須要如上分開寫計算屬性，是否是感受有點像在寫後端的api接口啊，哈哈

偵聽器

雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的偵聽器。這就是爲何 Vue 經過 watch 選項提供了一個更通用的方法，來響應數據的變化。當須要在數據變化時執行異步或開銷較大的操做時，這個方式是最有用的

好比這裏，模擬一個網頁搜索輸入框，當我輸入vue時，自動補齊數據爲 vue 官網

注意：使用偵聽器時，屬性直接時那個待渲染的字符串msg

生命週期函數

又叫鉤子函數，在組件的建立到銷燬的每一個時段都有一個hook函數，即鉤子，這個就是生命週期函數

全部的生命週期鉤子自動綁定 this 上下文到實例中，所以你能夠訪問數據，對屬性和方法進行運算。這意味着你不能使用箭頭函數來定義一個生命週期方法 (例如 created: () => this.fetchTodos())。這是由於箭頭函數綁定了父上下文，所以 this 與你期待的 Vue 實例不一樣，this.fetchTodos 的行爲未定義

每一個 Vue 實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作生命週期鉤子的函數，這給了用戶在不一樣階段添加本身的代碼的機會

生命週期函數一共有以下：

beforeCreate ：建立以前

created：建立以後哦

beforeMount：掛載以前

mounted：掛載以後

beforeUpdate：更新以前

updated：更新以後

activated：激活以前

deactivated：激活以後

beforeDestroy：銷燬以前

destroyed：銷燬以後

errorCaptured：錯誤調用，這個能夠忽略，基本不怎麼用

那麼這裏呢就來一個大綜合的例子：

<keep-alive></keep-alive>

可是，在不少時候，其實咱們並不想刪除，只是想隱藏就好了，好比以前直接一個css樣式dispaly:none就好了，vue裏其實也有這種相似的組件——keep-alive:

當點擊銷燬已經不會走beforeDestory和destoryed周期函數，這個組件暫且這樣，之後還會用到的，詳細的就看官方文檔吧

以上生命週期函數代碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

    <style>

    </style>
</head>

<body>
    <div id="app">
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        var Vcommon = {
            template: `<div>{{msg}}<button  @click="changeHander">修改</button></div>`,
            data() {
                return {
                    msg: 'test',
                }
            },
            methods: {
                changeHander() {
                    this.msg = 'vue的聲明周期函數測試'
                }
            },
            beforeCreate() {
                console.log('建立以前')
            },
            created() {
                console.log('建立以後')
            },
            beforeMount() {
                console.log('掛載以前')
            },
            mounted() {
                console.log('掛載以後')
            },
            beforeUpdate() {
                console.log('更新以前')
            },
            updated() {
                console.log('更新以後')
            },
            beforeDestroy() {
                console.log('銷燬以前')
            },
            destroyed() {
                console.log('銷燬以後')
            },
        }
        let app = new Vue({
            el: '#app',
            data: {
                isShow: true
            },
            components: {
                Vcommon
            },
            methods: {
                change() {
                    this.isShow = !this.isShow
                }
            },
            template: `<div>
                <keep-alive>
                    <Vcommon v-if = 'isShow'/>
                </keep-alive>
                <button @click="change">銷燬</button>
            </div>`

        })
    </script>
</body>

</html>

生命週期函數

如下爲官方文檔的聲明周期函數的先後邏輯

根據我的經驗，用的比較多的周期函數仍是mouted

獲取DOM元素

根據官方文檔的解釋，貌似是不太贊同獲取DOM元素進行操做，不過仍是給了一個能夠直接獲取DOM的元素的屬性 ref 和$refs

但願獲取的DOM給一個ref屬性，值爲自定義，經過mouted周期函數才能拿到數據，利用Vue實例中的$refs.(自定義的值)便可拿到：爲何是$refs這個能夠本身去看官網

拿到以後就能夠對其進行DOM操做了，若是但願獲取組件對象，同樣的操做便可

$nextTick延時

以下，咱們但願對input標籤用focus聚焦，打開自動去到輸入框的效果：

可是你發現，明明能夠拿到DOM元素，可是操做不了，這就是vue的虛擬DOM的效果了，虛擬DOM是react提出來的，而後三大框架如今都有了虛擬DOM的概念，由於加載速度比較快，性能較好

那麼此時怎麼辦呢，利用$nextTick作延時就行：

打開頁面input框自動聚焦已自動聚焦

代碼

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

    <style>

    </style>
</head>

<body>
    <div id="app">
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {

            },
            mounted() {
                // console.log(this.$refs.input)
                // console.log(this.$refs.input.focus())
                this.$nextTick(function () {
                    // 獲取更新以後的DOM
                    this.$refs.input.focus()
                })
            },
            template: `<div>
                <input type="text" ref="input">
                </div>`


        })
    </script>
</body>

</html>