コース: Vue.js 入門

今すぐコースを受講しましょう

今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。

inputイベントの発生の仕方

inputイベントの発生の仕方

コース: Vue.js 入門

1ヶ月の無料トライアルを開始 法人向けサービス

inputイベントの発生の仕方

“

このレッスンでは、テキスト入力のイベントが どのように起こるのか ということについて説明します。 今、開いている html ドキュメント なのですが これは Vue で Markdown Editor を作ったものですが、 入力した Markdown のテキストを 正しくフォーマットして、 もう１つ別の領域に表示します。 実際に動きを見てみましょう。 ［ファイル］から ［リアルタイムプレビュー］です。 左が入力の領域です。 初期値として #（ハッシュ） ワンスペース、hello と書いてあります。 そうすると、これ Markdown としては #（ハッシュ）は h1 という意味になりますので 見出しです、ですから hello という文字が 大きく表示されています。 さらに、入力をすると 例えば、#（ハッシュ）３つですと h3 になるのですが world! という風にすると、 小さめの見出しで world! と出てきました。 それから、-（ダッシュ）で item 1 と -（ダッシュ）は今度 リストになるのです。 同じく、-（ダッシュ）で item 2 リスト表示されています。 それから、*（アスタリスク）２つで 囲んであげると 太字になります、strong です。 それから、１つで挟むと 今度は斜体になるわけです。 これは、input のイベントを捉えて それに応じて Markdown を解析して、表示する という処理が行なわれていますが その input のイベントが どう起こっているのかということを 確認してみたいと思います。 コードでは、このテキストエリアです。 この要素に対して、v-on で イベントを定めています。 :（コロン）input これが入力時に生じるイベントです。 その時に update という メソッドを実行する、 リスナーとして定めています。 そうすると、 methods にある update これが input イベントの度に、 呼び出されるのですが この function は、 eventObject を受け取って そのターゲットで、 どこでイベントが起こったか テキストエリアです。 これを捉えて、その value プロパティで 入力したテキストを取り出しています。 そして、それをこのデータに設定した input に改めて、…

目次