Vue簡明介紹配置對象的配置選項

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

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

一、methods

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

我們可以通過實例代碼來更好的理解我們這個實例：

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果價格：<input type="text" v-model.munber="price" @keyup="sum()">元/斤</br>
數(shù)量：<input type="text" v-model="count" @change="sum()">斤</br>
總計：<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>

運行結(jié)果：

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

二、computer計算屬性

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

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

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果價格：<input type="text" v-model.munber="price" @keyup="sum()">元/斤</br>
數(shù)量：<input type="text" v-model="count" @change="sum()">斤</br>
總計：<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>

運行結(jié)果：

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

三、watch

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

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

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果價格：<input type="text" v-model.munber="price" >元/斤</br>
數(shù)量：<input type="number " v-model="count" >斤</br>
總計：<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>

運行結(jié)果：

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

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

四、filter

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

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

代碼實例：

<!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>

運行結(jié)果：