はじめてのVue.js - cidermitaina

化粧品案件で診断コンテンツを作るっていうお仕事がありました。スタイルとカラー選択で診断結果が変わるというコンテンツなのですが、選んだスタイルによって選べるカラーの種類が変わるという診断コンテンツです。

いつもはjQueryで書いていたのですが、Vue.jsで書いてみようかなと思い（データの更新の簡素化、記述量を減らしたい）、診断コンテンツ作成前にVue.jsについて簡単にまとめて見ました。

※実装した診断コンテンツの仕組みは今度書くつもりです。。。

1. Vue.jsとは？

MVVMの代表。画面表示とデータ管理するモデルの間をつなぎ、スムーズにデータの更新を行う機能を提供。双方向データバインディングを行う（双方向に接続し、どちらかが更新されるとリアルタイムにもう一方も更新される）

MVVM

「model」「view」「viewmodel」の略。「model」（データの管理、ビジネスロジック）「view」（ユーザーインターフェース）「viewmodel」（ModelからViewへ出力データを渡す、ViewからModelへ入力データを渡す）

2. Vue.jsを使ってみる

はじめてのVue.jsということで

・どうやって文字を表示させるの？
・どうやってdataを変更させるの？
・どうやってイベント処理を書くの？
・クラスのバインドって？

っていうところを今回はまとめています。

※環境設定などは省略してます。。。

1. Vueオブジェクト

まずは文字を表示させてみます。

VueオブジェクトとはVue.jsに用意されているViewModelオブジェクト。 Vueオブジェクトを作成し、データと画面表示を関連づけ、処理していく。

var 変数 = new Vue({　オプション情報　});

el：値を表示する対象のタグ（Element）を指定。タグのID情報を用意。 data：渡す値を用意。この値はオブジェクトとして用意し、その中に値をまとめておく。

これでHello world！という文字が表示される。

【html】
<p id="msg">
    {{ message }}
</P>

【js】
var initial = new Vue({
    el: '#msg',
    data: {
      message: 'Hello world！'
    }
});

2. HTML側からVueに値を設定する

HTML側から入力した値をVueオブジェクト側に渡すには？

【html】
<body>
  <div id="msg">
    <p>
      {{message}}
    </p>
    <input type="text" v-model="message">
  </div>
</body>

v-model

v-modelはインスタンス上のデータの名前を渡すことで、データと入力フォームの結びつけをすることができます。

v-model="message"はVueのdata内にあるmessageという項目と同期されるようになる。

3. イベントとメソッドの利用

イベント処理の方法

【html】
<body>
  <div id="msg">
    <p>
      {{message}}
    </p>
    <input type="text" v-model="txt１">
    <input type="button" v-on:click="doaction" value="click">
  </div>
</body>

【js】
var initial = new Vue({
    el: '#msg',
    data: {
      message: 'Hello world！',
      txt1: ''
    },
    methods: {
      doaction: function(){
        var str = this.txt１;
        this.message ='you typed: ' + str + '.';
      } 
    }
});

4. methods

Webページ側に割り当てて使われるメソッドをまとめたもの。イベントなどを使ってWebページのタグに割り当てるメソッドは、ここに。

this.txt1は、Vueオブジェクト内に用意されているtxt1の値を示す。data内の値はこのようにthisを使って参照できる。

入力フィールドの値がtxt1にバインド
txt1を取り出すことで、入力フィールドの値が得られる。
その値を加工、messeageに設定
messageに表示される。

5. クラスのバインド

v-bind:class="{クラス名：プロパティ}"

プロパティは、真偽値を扱う。値がtrueならクラスがon、偽ならfalse。

【html】
<button class="btn" :class="{active: isActive}" v-on:click="isActive=!isActive">button</button>

【css】
.active{
  color:red;
}

公式ガイドを参考に初歩的なところをまとめています。

jp.vuejs.org

今度は実践っていうことで作った診断コンテンツの仕組み部分を忘れないようにまとめようかなあ、と思っています。