cidermitainaスマートフォン用の表示で見るcidermitainaフロントエンドエンジニアをやっています。頑張るから読んでほしい。2018-03-12はじめてのVue.jsプログラミング化粧品案件で診断コンテンツを作るっていうお仕事がありました。スタイルとカラー選択で診断結果が変わるというコンテンツなのですが、選んだスタイルによって選べるカラーの種類が変わるという診断コンテンツです。いつもはjQueryで書いていたのですが、Vue.jsで書いてみようかなと思い(データの更新の簡素化、記述量を減らしたい)、診断コンテンツ作成前にVue.jsについて簡単にまとめて見ました。※実装した診断コンテンツの仕組みは今度書くつもりです。Vue.jsとは?MVVMの代表。画面表示とデータ管理するモデルの間をつなぎ、スムーズにデータの更新を行う機能を提供。双方向データバインディングを行う(双方向に接続し、どちらかが更新されるとリアルタイムにもう一方も更新される)MVVM「model」「view」「viewmodel」の略。クラスのバインドって?っていうところを今回はまとめています。※環境設定などは省略してます。Vueオブジェクトまずは文字を表示させてみます。VueオブジェクトとはVue.jsに用意されているViewModelオブジェクト。Vueオブジェクトを作成し、データと画面表示を関連づけ、処理していく。});el:値を表示する対象のタグ(Element)を指定。タグのID情報を用意。data:渡す値を用意。この値はオブジェクトとして用意し、その中に値をまとめておく。world!という文字が表示される。</div></body>v-modelv-modelはインスタンス上のデータの名前を渡すことで、データと入力フォームの結びつけをすることができます。v-model="message"はVueのdata内にあるmessageという項目と同期されるようになる。methodsWebページ側に割り当てて使われるメソッドをまとめたもの。イベントなどを使ってWebページのタグに割り当てるメソッドは、ここに。this.txt1は、Vueオブジェクト内に用意されているtxt1の値を示す。data内の値はこのようにthisを使って参照できる。入力フィールドの値がtxt1にバインドtxt1を取り出すことで、入力フィールドの値が得られる。その値を加工、messeageに設定messageに表示される。クラスのバインドv-bind:class="{クラス名:プロパティ}"プロパティは、真偽値を扱う。値がtrueならクラスがon、偽ならfalse。color:red;}公式ガイドを参考に初歩的なところをまとめています。jp.vuejs.org今度は実践っていうことで作った診断コンテンツの仕組み部分を忘れないようにまとめようかなあ、と思っています。JSで画像遅延してみました。書こう、書こうと思って2018年になってしまいました。(1)はてなブログをはじめよう!cidermitainaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。