Vue 公式チュートリアル〜入力された値を表示に使う
Vue 公式チュートリアル〜入力された値を表示に使うVue 公式チュートリアルのステップ5では、入力フォームに入力した文字を表示に反映させる方法を学習します。前回までのポイントは?例によって、まずは前回までの復習です。 これまで、Vue の「部品」である、「.vue」ファイルの書き方を学習してきました。 HTML/CSS/Javascript の三つの部分から、Vue の表示の部品である「.vue」は、構成されています。それぞれの、基本の書き方と、ボタンを作成して、ボタンをクリックした場合の処理のやり方を前回までに学習しました。特に前回は、ボタンをクリックしたという「利用者の操作」をイベントとして検出して、それに対応した処理(メソッド/関数)を呼び出す方法を学習しました。これには、Vue 特有の HTML の書き方と、Javascript との連携が必要になります。 こうした書き方には、基本的な決まりがあるので、それを覚えれば Vue の色々な機能を使えるようになります。今回学ぶのは?今回のステップ5で学ぶのは、文字を入力する入力フィールドに入力された文字を、表示に反映させるやり方です。最初に示されているコードは以下の通りです。<script>export default { data() { return { text: "", }; }, methods: { onInput(e) { this.text = e.target.value; }, },};</script><template&
0