テンプレートのバインド式は非常に便利ですが、実際には単純な操作にのみ使用されます。テンプレートは、ビューの構造を記述することです。テンプレートに多すぎるロジックを入れると、テンプレートを重くして維持するのが難しくなります。これが、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をもっとサポートすることを願っています。