計算プロパティとリスナーの詳細

<div id="例">
  {{ message.split('').reverse().join('') }}
</div>

<div id="例">
  <p>元のメッセージ: "{{ message }}"</p>
  <p>計算された逆メッセージ: "{{reversedMessage }}"</p>
</div>
var vm = 新しい Vue({
  el: '#例',
  データ： {
    メッセージ: 'こんにちは'
  },
  計算: {
    // 計算プロパティゲッター
    逆メッセージ: 関数 () {
      // `this` は vm インスタンスを参照します。 return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'さようなら'
console.log(vm.reversedMessage) // => 'eybdooG'

<p>反転されたメッセージ: "{{reversedMessage() }}"</p>
// コンポーネントメソッド内: {
  逆メッセージ: 関数 () {
    this.message.split('').reverse().join('') を返します
  }
}

計算: {
  今: 関数() {
    Date.now() を返す
  }
}

<div id="demo">{{ fullName }}</div>
var vm = 新しい Vue({
  el: '#demo',
  データ： {
    ファーストネーム: 'Foo',
    姓: 'バー',
    フルネーム: 'Foo Bar'
  },
  時計：
    firstName: 関数 (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: 関数 (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

var vm = 新しい Vue({
  el: '#demo',
  データ： {
    ファーストネーム: 'Foo',
    姓: 'バー'
  },
  計算: {
    フルネーム: 関数 () {
      this.firstName + ' ' + this.lastName を返します
    }
  }
})

// ...
計算: {
  フルネーム：
    // ゲッター
    取得: 関数 () {
      this.firstName + ' ' + this.lastName を返します
    },
    // セッター
    設定: 関数 (newValue) {
      var names = newValue.split(' ')
      this.firstName = 名前[0]
      this.lastName = 名前[名前.長さ - 1]
    }
  }
}
// ...

<div id="watch-example">
  <p>
    はい/いいえで答えられる質問をします:
    <input v-model="質問">
  </p>
  <p>{{ 答え }}</p>
</div>
<!-- AJAX ライブラリと一般的なツールのエコシステムはすでに非常に充実しているため、Vue コアコードは繰り返されません -->
<!-- これらの機能は、簡素化するために提供されています。これにより、より使い慣れたツールを自由に選択できるようになります。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<スクリプト>
var watchExampleVM = 新しいVue({
  el: '#watch-example',
  データ： {
    質問： ''、
    答え: 「質問されるまでは答えることができません!」
  },
  時計：
    // `question` が変更された場合、この関数が実行されます question: function (newQuestion, oldQuestion) {
      this.answer = '入力が終わるのを待っています...'
      this.debouncedGetAnswer()
    }
  },
  作成: 関数 () {
    // `_.debounce` は、Lodash 経由の操作頻度を制限する関数です。
    // この例では、yesno.wtf/api へのアクセス頻度を制限します。// ユーザーが入力を完了するまで AJAX リクエストは行われません。 `_.debounce` 関数（およびその類似関数 `_.throttle`）の詳細については、
    // 詳細は以下を参照してください: https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  メソッド: {
    答えを得る: 関数() {
      if (this.question.indexOf('?') === -1) {
        this.answer = '質問には通常疑問符が含まれます。 ;-)'
        戻る
      }
      this.answer = '考え中...'
      var vm = これ
      axios.get('https://yesno.wtf/api')
        .then(関数 (応答) {
          vm.answer = _.capitalize(レスポンスデータ.answer)
        })
        .catch(関数 (エラー) {
          vm.answer = 'エラー! API にアクセスできませんでした。' + error
        })
    }
  }
})
</スクリプト>