[Vue インスタンスオブジェクト] オブジェクトの構成オプションを構成する方法を学ぶ 5 分

序文

すべての Vue プロジェクトアプリケーションは、Vue コンストラクターを介して新しい Vue プロジェクトを作成することがわかっています。vue インスタンスを作成するための構成オブジェクトには、データ、メソッド、ウォッチ、テンプレートなどの属性オプションを含めることができます。各オプションにはさまざまな機能があり、必要に応じてさまざまな構成を選択できます。

1.方法

一般的なイベントによって呼び出される関数は、メソッド関数の属性で定義されます. メソッド属性で定義された関数は、メソッドと呼ばれることもあり、一般的にイベントのコールバック関数として使用されます. これは複数回呼び出され、複数回実行できます。

サンプルコードを使用すると、この例をよりよく理解できます。

コード例:

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

操作結果:

数量と価格が変更された場合、合計金額を再計算する必要があることがわかります. この時点で、合計価格を計算できるように、価格と数量の変更を監視する必要があります. 属性は既に定義されているためです.メソッド sum の計算メソッドと sum の計算式は、change と keyup の 2 つのリーブトリガーが呼び出されたときに呼び出されます。コードが合計で計算メソッドを実行するように、データが変更されます。

2. コンピュータ計算プロパティ

この計算されたプロパティがあるのはなぜですか? vue では、ロジックを単純化するために、値が他の属性値に大きく依存している場合、vue はコードで使用する計算されたプロパティを提供します。この計算されたプロパティは、多くの場合長くて再利用が面倒な複雑な式の実行に適しています。

計算されたプロパティを直接記述し、他のプロパティと同じ方法で計算されたプロパティを呼び出すことができます。

コード例:

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

操作結果:

計算されたプロパティの関数の戻り結果は、計算されたプロパティ名に直接割り当てることができます.計算されたプロパティは、依存データが変更された場合にのみ再計算できます.依存データが変更されない場合、最初の計算の結果がキャッシュされます. . 直接使用されます。

三、見守る

Watch は、データオブジェクトのプロパティまたは計算されたプロパティの変更を監視するために使用できます。データの変更をリッスンするために使用されます。データが変更されると、いくつかのトランザクションを処理できます。

watch の値はオブジェクトであり、オブジェクトのプロパティは監視されるプロパティであり、観察される式であり、その値はコールバック、メソッド名、またはオブジェクトの値です。

コード例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果价格：<input type="text" v-model.munber="price" >元/斤</br>
数量：<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>

操作結果:

リスニングプロセスは次のとおりです。ウォッチが呼び出されると、内部のオブジェクトの各プロパティ、監視対象のプロパティの値が変更されると、このプロパティをトリガーするコールバック関数が実行されます。

合計が価格と数量に依存する場合、価格と数量が変化すると合計も変化します。価格と数量を聞いて、変更を合計します。リスニングプロパティと計算プロパティの違い: 計算プロパティは結果を保存しますが、リスニングは保存しません。

四、フィルター

このフィルターは、vue ではフィルターと呼ばれ、結果を出力する前にデータをフィルター処理でき、一般的なテキストの書式設定に使用できます。フィルター: テンプレート内のデータ処理に便利な方法で、文字列、数値、数値などの表示形式を設定するのに適しています。

フィルター構文: vue.filter('filter name', function (parameter) {function body})、フィルターは difference および v-bind 式でのみ呼び出され、「|」を使用して式の最後に追加されます分離するために。説明する簡単なコード:

コード例:

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

操作結果: