テンプレートのバインド式は非常に便利ですが、実際には単純な操作にのみ使用されます。テンプレートは、ビューの構造を記述することです。テンプレートに多すぎるロジックを入れると、テンプレートを重くして維持するのが難しくなります。これが、vue.jsが結合式を1つの式に制限する理由です。複数の式が必要な場合は、**計算属性を使用する必要があります。
基本的な例
<div id = "example"> a = {{a}}、b = {{b}} </div> var vm = new vue({el: '#example'、data:{a:1}、computed:{//計算属性b:function(){// `this`を指しますvmインスタンスを指します。ここでは、計算されたプロパティを宣言しますb。私たちが提供する機能は、プロパティVM.Bのゲッターとして使用されます。
console.log(vm.b)//-> 2vm.a = 2console.log(vm.b)//-> 3
ブラウザコンソールを開き、VMを変更できます。 VM.Bの値は、常にVM.Aの値に依存します。
通常のプロパティにバインドするように、計算されたプロパティをテンプレートにバインドできます。 V.BはVM.Aに依存していることを知っているため、VM.Aが変更すると、VM.Bに依存するバインディングも更新されます。そして、最良のことは、この依存関係を宣言的に作成することです。計算されたプロパティのゲッターはきれいで、副作用がないため、テストして理解しやすいことです。
プロパティと$監視の計算
vue.jsは、Vueインスタンスでデータの変更を観察するために使用されるメソッド$ watchを提供します。特にAngularJSから来ている場合、他のデータに基づいて一部のデータを変更する必要がある場合、$ WATHは魅力的です。ただし、通常、命令的な$ watchコールバックの代わりに、計算されたプロパティを使用する方が良いです。次の例を考えてみましょう。
<div id = "demo"> {{fullname}} </div> var vm = new vue({el: '#demo'、data:{firstName: 'foo'、lastName: 'bar'、fullname: 'foo bar'}}) this.lastname})vm。$ watch( 'lastname'、function(val){this.fullname = this.firstname + '' + val})上記のコードは、命令の繰り返しです。計算プロパティとの比較:
var vm = new vue({data:{firstName: 'foo'、lastName: 'bar'}、culted:{fullname:function(){return this.firstname + '' + this.lastname}}})これは良いですね。
セッターを計算します
計算された属性はデフォルトで単なるゲッターですが、必要に応じてセッターを提供することもできます。
// ... compute:{fullname:{// getter get:function(){return this.firstname + '' + this.lastname}、// setter set:function(newvalue){var names = newValue.split( '')this.firstname = names [0] this = name name name names whent -length -1 // ...vm.fullname = 'john doe'を呼び出すと、セッターが呼び出され、vm.firstnameとvm.lastnameもそれに応じて更新されます。
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
Vue.jsコンポーネントのチュートリアルについては、特別なトピックVue.jsコンポーネント学習チュートリアルをクリックして学習してください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。