快捷導(dǎo)航

Vue簡(jiǎn)明介紹配置對(duì)象的配置選項(xiàng)

更新時(shí)間：2022年08月29日 15:36:18 作者：丘比特懲罰陸

我們知道每一個(gè)vue項(xiàng)目應(yīng)用都是通過vue的構(gòu)造函數(shù)進(jìn)行創(chuàng)建一個(gè)新的vue項(xiàng)目的。創(chuàng)建vue實(shí)例的配置對(duì)象，可以包括一下屬性選項(xiàng)，比如：data、methods、watch、template等等，每一個(gè)選項(xiàng)都有不同的功能，大家可以根據(jù)自己的需求選擇不同的配置

一、methods

一般事件調(diào)用的函數(shù)都會(huì)在methods函數(shù)里面屬性進(jìn)行定義，在methods屬性進(jìn)行定義的函數(shù)，我們也可以稱之為方法，一般作為事件的回調(diào)函數(shù)進(jìn)行使用。這個(gè)被調(diào)用幾次就能被執(zhí)行幾次。

我們可以通過實(shí)例代碼來(lái)更好的理解我們這個(gè)實(shí)例：

實(shí)例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果價(jià)格：<input type="text" v-model.munber="price" @keyup="sum()">元/斤</br>
數(shù)量：<input type="text" v-model="count" @change="sum()">斤</br>
總計(jì)：<input type="text" v-model="total" >元</br>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    data:{
     price:0,
     count:1,
     total:0,
    },
    methods:{
sum(){
    this.total = this.price*this.count;
}
    }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

我們可以看到，當(dāng)數(shù)量和價(jià)格改變的時(shí)候，我們就要重新計(jì)算一下總計(jì)的錢，這個(gè)時(shí)候就要對(duì)價(jià)格和數(shù)量的改變進(jìn)行監(jiān)聽，這樣才能計(jì)算出總得價(jià)格；因?yàn)樵趍ethods里面屬性已經(jīng)定義了sum的計(jì)算方法，總和的計(jì)算公式，在change和keyup兩個(gè)事假觸發(fā)被調(diào)用的時(shí)候。數(shù)據(jù)就會(huì)被發(fā)生改變，從而代碼執(zhí)行sum里面的計(jì)算方法。

二、computer計(jì)算屬性

為什么會(huì)有這個(gè)計(jì)算屬性呢？因?yàn)樵趘ue中，為了將邏輯進(jìn)行簡(jiǎn)化，當(dāng)某一個(gè)值過于依賴其他的屬性值的時(shí)候，vue會(huì)提供計(jì)算屬性來(lái)供代碼使用。這個(gè)計(jì)算屬性適用于執(zhí)行復(fù)雜的表達(dá)式，應(yīng)為這些復(fù)雜的表達(dá)式往往很長(zhǎng)且繁瑣的重復(fù)使用。

可以直接寫計(jì)算屬性可以調(diào)用計(jì)算屬性，跟別的屬性的使用方法一樣。

實(shí)例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果價(jià)格：<input type="text" v-model.munber="price" @keyup="sum()">元/斤</br>
數(shù)量：<input type="text" v-model="count" @change="sum()">斤</br>
總計(jì)：<input type="text" v-model="total" >元</br>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var app = new Vue({
    el:'#app',
    data:{
     price:0,
     count:1,
    },
    computed:{
total:function(){
    return this.price*this.count
}
    }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

計(jì)算屬性的函數(shù)的返回結(jié)果可以直接賦給到計(jì)算的屬性名，計(jì)算屬性只有依賴的數(shù)據(jù)發(fā)生變化的時(shí)候才能重新計(jì)算，依賴數(shù)據(jù)不改變的情況下，第一次計(jì)算的結(jié)果會(huì)緩存起來(lái)，下次直接使用。

三、watch

watch可以用來(lái)監(jiān)聽data對(duì)象屬性或計(jì)算屬性里的變化，是用來(lái)偵聽數(shù)據(jù)的變化，當(dāng)數(shù)據(jù)變化的時(shí)候，可以處理一些事務(wù)。

watch的值是一個(gè)對(duì)象，對(duì)象的屬性是要偵聽的屬性，是要需要觀察表達(dá)式，它的值是一個(gè)回調(diào)的值、方法名或者對(duì)象。

實(shí)例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果價(jià)格：<input type="text" v-model.munber="price" >元/斤</br>
數(shù)量：<input type="number " v-model="count" >斤</br>
總計(jì)：<input type="text" v-model="total" >元</br>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var app = new Vue({
    el:'#app',
    data:{
     price:0,
     count:1,
     total:0,
    },
watch:{
    "price":function(newVal,oldVal){
        return this.data=newVal*this.count;
    },
    "count":function(newVal,oldVal){
        return this.total = this.price*newVal;
    }
}
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

這個(gè)偵聽的過程是：當(dāng)調(diào)用watch，里面對(duì)象的每一個(gè)屬性，當(dāng)一個(gè)被偵聽的屬性的值發(fā)生變化的時(shí)候，觸發(fā)這個(gè)屬性的回調(diào)函數(shù)就會(huì)被執(zhí)行。

當(dāng)總計(jì)依賴于價(jià)格和數(shù)量，當(dāng)價(jià)格和數(shù)量發(fā)生變化的時(shí)候，總計(jì)也發(fā)生變化·。偵聽價(jià)格何和數(shù)量，變化就求和。偵聽和計(jì)算屬性的區(qū)別：計(jì)算屬性會(huì)保存結(jié)果，但是偵聽不會(huì)。

四、filter

這個(gè)filter稱為vue里面的過濾器，可以在輸出結(jié)果之前對(duì)數(shù)據(jù)進(jìn)行過濾，可以被用于一些常用的文本格式化。過濾器：一種模板內(nèi)用于數(shù)據(jù)處理的便捷方法，適用于字符串、數(shù)值、數(shù)字等設(shè)置顯示格式。

過濾器語(yǔ)法寫法：vue.filter('過濾器名'，function（參數(shù)）{函數(shù)體})，過濾器只在差值和v-bind表達(dá)式中進(jìn)行調(diào)用，被添加在表達(dá)式的尾部，使用“|”分開。簡(jiǎn)單的通過代碼來(lái)解釋：

代碼實(shí)例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<h1>{{sum|f_int}}</h1>
<h1>{{sum|f_int|f_$('$')}}</h1>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        Vue.filter('f_int',function(msg){
            return Math.round(msg);
        })
        Vue.filter('f_$',function(msg,arg1){
            return arg1+msg;
        })
var app = new Vue({
    el:'#app',
    data:{
sum:86
    },
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：