イイダリョウのブログ。【Vue.js】v-modelデータバインディング事始め(リンダリンダの歌詞を変えてオリジナルラブソングを作る)2019-06-10【Vue.js】v-modelデータバインディング事始め(リンダリンダの歌詞を変えてオリジナルラブソングを作る)JSVue.jsの続きです。前回はv-vindでボタンでリアルタイムにclass名の追加、削除をした。今回はv-modelでリアルタイムに「データバインディング」体験してみる。データバインディングとは何ぞや?フォームに入力した情報をリアルタイムで画面に反映できる。クモのようにコツコツとデータバインディングとはデータをバインドすること。バインドって何?あっちとこっちを紐付ける、関連付ける、割り当てること何かと何かを関連付けるのが「バインド(bind)」です。「AをBにバインドする」と言った場合は「AをBに割り当てるよ」を意図します。(bind)では、データバインディングとは?バインディングには「結合」という意味があり、データ・バインディングとは、MVVMパターンでいうViewとViewModelを結び付けるために提供されている仕組みのことです。データ・バインディングの特徴は、一度だけ値を代入して終わりというわけではなく、値が変化するたびに結び付いている先の値もその都度即座に変化することです。marikoootaの日記ふむふむ。Vue.jsのデータバインディング(v-model)Vue.jsのデータバイディングはv-modelに相当し、主にフォームに入力した内容がリアルタイムに画面に反映されることを指す。ディレクティブを使用することができます。それは、自動的に入力要素のタイプに基づいて要素を更新するための正しい方法を選択します。それに加えて、いくつかのエッジケースに対しては特別な配慮をしてくれます。Vue.js基本形はこんな感じです。id="Onamae"><p>名前を入れてください。}});Vueインスタンス作成#Onamaeに適用Nameに文字列名無しを入れるinputタグに文字を打つとリアルタイムに「こんにちは○○さん!」のところが変わる!のはいいけど、使い道がいまいちわからない。フォームのバリデーションとかの用途かなー?あとは確認画面とか。「リンダリンダ」の歌詞に好きな人の名前を入れる!リアルタイムの反映が一箇所だとありがたみが少ないので、歌詞の中の固有名詞をリアルタイムで全部変えられるようにした。CodePen.コードはこちら。基本的には先ほどのコードをHTML上で増殖している。<p>あなたの愛する人の名前を入れましょう。Oh</p><hr><p>※愛する人にこのラブソングを送りましょう。</p></section>コード上は{{Name}}がうるさいくらい出てくる。ゲシュタルト崩壊気味w(そのおかげで歌詞を一気に変えることができるんですYo!)JSの方は先ほどとあまり変わらない。}});紐づけるID名や文字列が変わったくらい。名前を打ち変えると歌詞がリアルタイムに変わる!長い名前もなんのその!(なお、「京子」「セバスチャン」は架空の名称であり、実在の名称とは関係ありませんw)最後にということで、v-modelによるVue.jsのデータバインディングを初体験した!v-modelは他にも複数行の(textareaタグ)、複数選択のチェックボックス(type=checkbox)、単独選択のラジオボタン(type=radio)など様々なフォーム要素に対応している。面白い用途が思いついたらまた記事にしていきたいと思ふ。22:42Tweet関連記事2019-08-22【Vue.js】コンポーネントにpropsオプションで値を渡すVue.jsシリーズの続きです。前回はコンポーネントにカウンター...2019-07-29【Vue.js】localStorageと連携したTodoリストを読み解く(HTML、CSS編)Vue.jsで単純なものを作るとリロードしたときに初期状態に戻っ...2019-07-09【Vue.js】watch(監視プロパティ)で戦国時代クイズを作ったVue.jsの続きです。前回はcomputed(算出プロパティ)で割り勘...2019-06-22【Vue.js】computed(算出プロパティ)で割り勘アプリを作る(おまけでこち亀アプリも)Vue.jsの続きです。前回はv-modelでリアルタイムにフォームの入...2019-05-29【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)Vue.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。