コース: Vue.js 入門

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

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

更新を遅らせてまとめて処理する

更新を遅らせてまとめて処理する

コース: Vue.js 入門

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

更新を遅らせてまとめて処理する

“

このレッスンでは、関数の呼び出しを ライブラリの Lodash の debounce というメソッドで 遅らせて処理したいと思います。 今、開いている html ドキュメントなのですが Markdown の editor と いうことになっています。 ページには要素が２つありまして、 テキストエリアと div です。 まず、テキストエリアの方なのですが v-bind で value に対して つまり、入力されるテキストに対して input という変数と バインドされています。 ですから、この #（ハッシュ）hello という文字がテキストエリアに 初期値として入るわけです。 さらに、v-on で input という イベントに対して update のメソッドが 設定されています。 この input というのは、 入力を編集する度に発生するイベントで 編集をすると、このメソッドが呼びだされて このメソッドは何をやっているかというと イベントオブジェクトから ターゲットを取り出します。 どこでイベントが起こったか、 テキストエリアです。 その value つまり、 入力されたテキストを取り出して input の変数の値を上書きします。 それから確認用に console.log が 入っていて、 同じく、入力されているテキスト 編集されているテキストを 表示するようになっています。 一方で、div 要素の方は v-html ということで html コードに対して、 compiledMarkdown という算出プロパティが バインドされています。 この関数なのですが、 やはり input という値を取り出して、 marked というのは 同じく名前 marked という ライブラリのメソッドなのですが Markdown されたテキストを html コードに変換すると という機能を持っています。 そのメソッドで、この input に 入っている変数、テキストです #（ハッシュ）hello というのは、 h1 を意味するのですが hello という文字を h1 に変換して、 そして div 要素に表示する ということになっています。 現在の動きを確認してみましょう。 ［ファイル］から ［リアルタイムプレビュー］です。 console.log が入っていますので、…

目次