【学習メモ】動かして学ぶ！Vue.js 開発入門 その2

Chapter3 属性の指定をするとき

01 要素の属性をデータで指定する：v-bind

用意したデータで HTML の属性を指定したいときは、v-bindを使います。

<div id="app">
  <!-- `src` -->
  <figure><img src="face1.png" /></figure>
  <figure><img v-bind:src="fileName" /></figure>
  <!-- `href` -->
  <p><a href="https://yuheijotaki.com">リンクを直接指定</a></p>
  <p><a v-bind:href="myURL">リンクを `v-bind` で指定</a></p>
  <!-- `style` -->
  <p style="color:#f00;background-color:#ff0">文字色を直接指定</p>
  <p v-bind:style="{color: myColor01,backgroundColor: myColor02}">
    文字色を `v-bind` で指定
  </p>
  <!-- `class` -->
  <p class="myClass">直接クラスを指定</p>
  <p v-bind:class="myClass01">`v-bind` でクラスを1つ指定</p>
  <p v-bind:class="[myClass01,myClass02]">`v-bind` でクラスを複数指定</p>
  <p v-bind:class="{'myClass01': isClassActive}">データでクラスをON/OFF</p>
</div>

new Vue({
  el: "#app",
  data: {
    fileName: "face1.png",
    myURL: "https://yuheijotaki.com",
    myColor01: "#f00",
    myColor02: "#ff0",
    myClass01: "my-class-01",
    myClass02: "my-class-02",
    isClassActive: true
  }
});

結果

Chapter4 ユーザーの入力をつなぐとき

01 入力フォームとデータをつなぐ：v-model

フォーム入力とデータをつなげるときは、v-model v-model ディレクティブは、input要素、select要素、textarea要素などに使います。

<div id="app">
  <!-- text -->
  <input type="text" v-model="myName" placeholder="お名前" />
  <p>私は、{{ myName }}です。</p>
  <hr />
  <!-- textarea -->
  <textarea v-model="myText"></textarea>
  <p>文章は、「{{ myText }}」</p>
  <p>文字数は、{{ myText.length }}文字です。</p>
  <hr />
  <!-- checkbox（単数） -->
  <label><input type="checkbox" v-model="myCheck"/></label>
  <p>チェックボックスは、{{ myCheck }}</p>
  <hr />
  <!-- checkbox（複数） -->
  <label><input type="checkbox" value="Taro" v-model="myChecks" />Taro</label>
  <label
    ><input type="checkbox" value="Hanako" v-model="myChecks" />Hanako</label
  >
  <label
    ><input type="checkbox" value="Ichiro" v-model="myChecks" />Ichiro</label
  >
  <p>選択したのは、{{ myChecks }}</p>
  <hr />
  <!-- button -->
  <label><input type="checkbox" v-model="myAgree" />同意します。</label>
  <p>
    <button v-bind:disabled="myAgree==false">送信</button> もしくは
    <button v-bind:disabled="!myAgree">送信</button>
  </p>
  <hr />
  <!-- radio -->
  <label><input type="radio" value="Taro" v-model="myPicked" />Taro</label>
  <label><input type="radio" value="Hanako" v-model="myPicked" />Hanako</label>
  <label><input type="radio" value="Ichiro" v-model="myPicked" />Ichiro</label>
  <p>選択したのは、{{ myPicked }}</p>
  <hr />
  <!-- radio で画像切り替え -->
  <label><input type="radio" value="face1.png" v-model="myFace" />face1</label>
  <label><input type="radio" value="face2.png" v-model="myFace" />face2</label>
  <p>選択したのは、{{ myFace }}</p>
  <img v-bind:src="myFace" />
  <hr />
  <!-- select（単一） -->
  <select v-model="myColor">
    <option value="" disabled>色を選択してください</option>
    <option>red</option>
    <option>blue</option>
    <option>green</option>
    <option>yellow</option>
    <option>aqua</option>
  </select>
  <p v-bind:style="{color:myColor}">選んだのは、{{ myColor }}です</p>
  <hr />
  <!-- select（複数） -->
  <select v-model="myColorMultiple" multiple>
    <option>red</option>
    <option>blue</option>
    <option>green</option>
    <option>yellow</option>
    <option>aqua</option>
  </select>
  <p>選んだのは、{{ myColorMultiple }}です</p>
  <hr />
  <!-- 修飾子 `.lazy` -->
  <input type="text" v-model.lazy="myTextLazy" />
  <p>入力後に表示「{{ myTextLazy }}」</p>
  <hr />
  <!-- 修飾子 `.number` -->
  <input type="number" v-model.number="myNumber" />
  <p>100を足して表示「{{ 100 + myNumber }}」</p>
  <hr />
  <!-- 修飾子 `.trim` -->
  <input type="text" v-model.trim="myTextTrim" />
  <p>前後の空白を削除「{{ myTextTrim }}」</p>
</div>

new Vue({
  el: "#app",
  data: {
    myName: "",
    myText: "",
    myCheck: false,
    myChecks: [],
    myAgree: false,
    myPicked: "Taro",
    myFace: "face1.png",
    myColor: "",
    myColorMultiple: [],
    myTextLazy: "",
    myNumber: 0,
    myTextTrim: ""
  }
});

結果

修飾子便利そうですね。だんだん理解できるようになってきました。