vue學(xué)習(xí)筆記（二）

Pines_Cheng 發(fā)布于2019-08-21 17:08 / 1832人閱讀

摘要：供用戶在相應(yīng)的階段對其進(jìn)行操作。我們像下面這樣使用這個指令大多數(shù)情況下，我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。

一、vue生命周期

vue實(shí)例從創(chuàng)建到銷毀的過程，稱為生命周期，共有八個階段。

這八個階段里分別有一個叫做鉤子函數(shù)的實(shí)例選項(xiàng)。供用戶在相應(yīng)的階段對其進(jìn)行操作。

beforeCreate(){  //組件實(shí)例剛剛創(chuàng)建，還未進(jìn)行數(shù)據(jù)觀測和事件配置
                
},
created(){  //實(shí)例已經(jīng)創(chuàng)建完成，并且已經(jīng)進(jìn)行數(shù)據(jù)觀測和事件配置
                
},
beforeMount(){//模板編譯之前，還沒掛載
                
},
mounted(){ //模板編譯之后，已經(jīng)掛載，此時才會渲染頁面，才能看到頁面上數(shù)據(jù)的展示
                    
},
beforeUpdate(){//組件更新之前
                
},
updated(){//組件更新之后
                
},
beforeDestroy(){//組件銷毀之前
                
},
destroyed(){  //組件銷毀之后
                    
}

這幾個鉤子中，最常用的是created()與mounted()。

二、計算屬性

計算屬性也是用來存儲數(shù)據(jù)，但具有以下幾個特點(diǎn)：

數(shù)據(jù)可以進(jìn)行邏輯處理操作

對計算屬性中的數(shù)據(jù)進(jìn)行監(jiān)視

1、基本用法


    {{addZero}}

    
new Vue({
    el: "#app",
    data: {
        num: 8
    },
    computed: {
        //這是計算屬性的get方法，用于取值
        addZero() {
            return this.num > 10 ? this.num : "0" + this.num;
        }
    }
})

這里的addZero和num一樣，都是屬性。不過addZero是依賴于num、進(jìn)行計算后的值。一旦num的值發(fā)生變化，addZero的值也會隨之變化。

 
    {{num}}----{{addZero}}
    

    
 
    
 new Vue({
    el: "#app",
    data: {
        num: 8
    },
    methods: {
        change: () => {
            this.num++;
        }
    },
    computed: {
        addZero:() => {
            return this.num > 10 ? this.num : "0" + this.num;
        }
    }
 })

一旦我們點(diǎn)擊按鈕改變num的值，那么因?yàn)橛嬎銓傩詫?shí)時監(jiān)測依賴項(xiàng)，addZero也會跟著發(fā)生變化。

2、計算屬性 vs 方法

將計算屬性的get函數(shù)定義為一個方法也可以實(shí)現(xiàn)和計算屬性類似的功能。那么二者之間有什么區(qū)別？

區(qū)別一：計算屬性是基于它的依賴進(jìn)行實(shí)時更新的，方法則是調(diào)用才更新

區(qū)別二：計算屬性是有緩存的，只要相關(guān)依賴沒有改變，多次訪問計算屬性得到的值是之前緩存的計算結(jié)果，不會多次執(zhí)行。操作一個沒有依賴項(xiàng)的值也是如此。

官方文檔給出了下面這個例子：

computed: {
  now: function () {
    return Date.now()
  }
}

計算屬性存在緩存，這里的now值不會發(fā)生變化。

3. get和set

計算屬性由兩部分組成：get和set，分別用來獲取計算屬性和設(shè)置計算屬性。默認(rèn)只有g(shù)et，如果需要set，要自己添加。

        
        {{num}}----{{addZero}}
        

        
    
    
   new Vue({
        el: "#app",
        data: {
            num: 8
        },
        methods: {
            change(newNumber) {
                this.addZero = newNumber;
            }
        },
        computed: {
            addZero: {
                get() {
                    return this.num > 10 ? this.num : "0" + this.num;
                },
                set(newNum) {
                    this.num = newNum
                }
            }
        }
    })

我們再change方法中改變addZero屬性的值的時候會自動調(diào)用它的set方法。

三、實(shí)例屬性和方法

vue中給實(shí)例和屬性提供了若干屬性和方法。

1、屬性

獲取屬性的語法：實(shí)例名.屬性名
以下是常用的屬性：

vm.$el: 獲取vue實(shí)例關(guān)聯(lián)的元素DOM，進(jìn)而可以對其進(jìn)行操作

vm.$data: 獲取數(shù)據(jù)對象data

vm.$options：獲取選項(xiàng)，自定義的選項(xiàng)也可以在這里獲取。

vm.$refs：獲取所有添加ref屬性的元素dom對象，進(jìn)而可以對其進(jìn)行操作

2、方法 vm.$mount()

手動掛載vue實(shí)例

var vm=new Vue({
    data:{
        msg:"Hello vue.js"
    }
 }).$mount("#app");

vm.$destroy()

銷毀實(shí)例

vm.$destroy();  //銷毀實(shí)例所占的內(nèi)存空間

vm.$nextTick(callback)

在DOM更新完成后再執(zhí)行回調(diào)函數(shù)，一般在修改數(shù)據(jù)之后使用該方法，以便獲取更新后的DOM

var vm=new Vue({
    data:{
        msg:"Hello vue.js"
    }
 }).$mount("#app");
 
 //修改數(shù)據(jù)
 vm.msg="foo";
 
 console.log(vm.$refs.title.textContent);  //Hello vue.js
 vm.$nextTick(function(){
    console.log(vm.$refs.title.textContent); //foo
 });

DOM還沒更新完，Vue實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生改變之后DOM立即變化，需要按一定的策略進(jìn)行DOM更新，需要時間！使用$nextTick方法等DOM更新完再獲取數(shù)據(jù)。

vm.$set(target,key,value)

通過vue實(shí)例的$set方法為對象添加屬性，可以實(shí)時監(jiān)視。


    {{user.name}}
 {{user.age}}
    

    

    
var vm = new Vue({
    data: {
        msg: "Hello vue.js",
        user: {
            name: "hedawei",
            gender: "man"
        }
    },
    methods: {
        addAge() {
            /* this.user.age = 22; */
            this.$set(this.user, "age", 22);
        }
    }
}).$mount("#app");

方法中使用原始的添加屬性方法的話不會在模板中顯示。使用$set方法會實(shí)時監(jiān)控數(shù)據(jù)，然后添加。

vm.$watch(監(jiān)聽的屬性，callback)

監(jiān)控vue實(shí)例的變化

 vm.$watch("msg", (newValue, oldValue) => {
    console.log("msg被修改啦，原值：" + oldValue + "，新值：" + newValue);
 });

如果需要監(jiān)控深度數(shù)據(jù)變化（例如監(jiān)控一個對象中的某個屬性），則需要在選項(xiàng)中添加{deep:true}

四、自定義指令

自定義指令分為自定義全局指令和自定義局部指令。

1、自定義全局指令

使用全局方法Vue.directive(指令I(lǐng)D,定義對象)。注：使用指令時必須在指名名稱前加前綴v-，即v-指令名稱。

簡單示例：

Vue.directive("hello",{
    bind(){ //常用！！
        alert("指令第一次綁定到元素上時調(diào)用，只調(diào)用一次，可執(zhí)行初始化操作");
    },
    inserted(){
        alert("被綁定元素插入到DOM中時調(diào)用");
    },
    update(){
        alert("被綁定元素所在模板更新時調(diào)用");
    },
    componentUpdated(){
        alert("被綁定元素所在模板完成一次更新周期時調(diào)用");
    },
    unbind(){
        alert("指令與元素解綁時調(diào)用，只調(diào)用一次");
    }
 });

這里定義了一個名為hello的指令，指令定義函數(shù)提供了幾個鉤子函數(shù)，分別在不同的時期生效。我們像下面這樣使用這個指令:

hello vue.js

大多數(shù)情況下，我們只需要使用bind與update鉤子函數(shù)。vue里提供了函數(shù)的簡寫形式：

Vue.directive("hello", function () {
    alert("hello vue.js");
})

鉤子函數(shù)有兩個常用的參數(shù)el和binding。el是綁定的DOM對象，binding是一個對象，包含若干屬性。

拿到DOM對象，我們就可以對DOM進(jìn)行一些操作。

hello vue.js

Vue.directive("hello", function (el,binding) {
    el.style.color = "red";
    
    //屬性name是指令的名字（不帶v-）
    console.log(binding.name);     //hello
    //屬性value是傳遞給指令的值
    console.log(binding.value);   //alice
    //屬性expression是指令值的字符串形式（個人感覺就是類似變量名）
    console.log(binding.expression);  //msg
    //屬性arg是傳遞給指令的參數(shù)(和傳值寫在一起容易令初學(xué)者困惑，下面分開寫  
    //合在一起寫的寫法是hello vue.js)
    //hello vue.js
    console.log(binding.arg);       //123
    //屬性modifiers是一個包含修飾符的對象。
    //與傳參傳值合在一起的寫法是 hedawei
    //hello vue.js
    console.log(binding.modifiers);    //{bar:true}
})  

 var vm = new Vue({
    el: "#app",
    data: {
        msg: "alice"
    }
 })

2、局部自定義指令

局部自定義指令寫在實(shí)例的directives選項(xiàng)中。

  var vm = new Vue({
    el: "#app",
    data: {
        msg: "alice"
    },
    methods: {
    },
    directives: {
        word: function(el, binding) {
            console.log(binding.name);
        }
    }
 })

其他用法與全局自定義指令一致。

五、過度（動畫）

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應(yīng)用過渡效果。本質(zhì)上還是使用CSS3動畫：transition、animation屬性。

1、基本用法

使用transition組件，將要執(zhí)行動畫的元素包含在該組件內(nèi)：

    
        運(yùn)動的元素

我們需要為其定義一個name屬性，以便后面為其添加css樣式。

動畫有6個CSS類名，下面結(jié)合例子說明：

2、鉤子函數(shù)

vue中給過渡的不同時期提供了不同的鉤子函數(shù)。


        
        

        
 new Vue({
        ...
    methods: {
        beforeEnter(el) {
            alert("動畫進(jìn)入之前");
        },
        enter(el) {
            alert("動畫進(jìn)入");
        },
        afterEnter(el) {
            alert("動畫進(jìn)入之后");
        },
        beforeLeave(el) {
            alert("動畫離開之前");
        },
        leave(el) {
            alert("動畫離開");
        },
        afterLeave(el) {
            alert("動畫離開之后");
        }
    }
 });

在這不同的時期，我們可以取到過渡元素的DOM對象，從而對其進(jìn)行操作。

3、多元素過渡

上面的標(biāo)簽只適用于單元素過渡。若要對多元素進(jìn)行過渡，則需要使用標(biāo)簽，并且綁定key屬性，設(shè)置不同的值。

4、結(jié)合第三方庫一起使用（animate.css）

我們可以使用vue的自定義過渡類名結(jié)合第三方動畫庫實(shí)現(xiàn)自定義動畫效果。這六個自定義類名和vue內(nèi)置的類名類似:

enter-class

enter-active-class

enter-to-class

leave-class

leave-active-class

leave-to-class
示例：

 p {
    width: 300px;
    height: 300px;
    background-color: red;
    margin: 0 auto;
 }

未完待續(xù)。。。

GPU云服務(wù)器云服務(wù)器 vue3 學(xué)習(xí)筆記 (五)——vue3 學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89169.html

發(fā)表評論

登陸后可評論

0條評論

Pines_Cheng

男|高級講師

我要關(guān)注我要私信

TA的文章

C語言循環(huán)結(jié)構(gòu)

閱讀 3717·2021-10-11 10:59
css選擇器 last-child & last-of-type

閱讀 1300·2019-08-30 15:44
前端每日實(shí)戰(zhàn)：127# 視頻演示如何用純 CSS 創(chuàng)作一個圓環(huán)旋轉(zhuǎn)錯覺動畫

閱讀 3478·2019-08-29 16:39
Hello Vue: Vue快速入門教程

閱讀 2887·2019-08-29 16:29
webpack4 css打包壓縮問題

閱讀 1800·2019-08-29 15:24
[新手坑] 01.Vue模板內(nèi)引入的組件樣式覆蓋失效

閱讀 807·2019-08-29 15:05
flex布局

閱讀 1264·2019-08-29 12:34
SVG蒙版(mask)的基礎(chǔ)使用教程

閱讀 2302·2019-08-29 12:19

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vue學(xué)習(xí)筆記（二）

相關(guān)文章

Vue.js學(xué)習(xí)系列二 —— vuex學(xué)習(xí)實(shí)踐筆記（附DEMO）

vue.js學(xué)習(xí)筆記 - 組件（二）