【学習メモ】基礎から学ぶ Vue.js その2

• 第 3 章 イベントとフォーム入力の受け取り
• 第 4 章 データの監視と加工

インラインメソッド

<div id="app"><button v-on:click="handleClick">click</button></div>

var app = new Vue({
  el: "#app",
  methods: {
    handleClick: function() {
      alert("clicked");
    }
  }
});

フォーム入力 双方向データバインディング

type="text"

<div id="app">
  <input type="text" v-model="message" />
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js!"
  }
});

<textarea>

<div id="app">
  <textarea v-model="message"></textarea>
  <pre>{{ message }}</pre>
</div>

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js!"
  }
});

type="checkbox"（単一）

<div id="app"><input type="checkbox" v-model="val" /> {{ val }}</div>

var app = new Vue({
  el: "#app",
  data: {
    val: true
  }
});

type="checkbox"（複数）

<div id="app">
  <label><input type="checkbox" v-model="val" value="A" /> A</label>
  <label><input type="checkbox" v-model="val" value="B" /> B</label>
  <label><input type="checkbox" v-model="val" value="C" /> C</label>
  <p>{{ val }}</p>
</div>

var app = new Vue({
  el: "#app",
  data: {
    val: []
  }
});

type="radio"

<div id="app">
  <label><input type="radio" value="a" v-model="val" /> A</label>
  <label><input type="radio" value="b" v-model="val" /> B</label>
  <label><input type="radio" value="c" v-model="val" /> C</label>
  <p>{{ val }}</p>
</div>

var app = new Vue({
  el: "#app",
  data: {
    val: ""
  }
});

<select>

<div id="app">
  <select v-model="val">
    <option disabled="disabled">選択してください</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </select>
  <p>{{ val }}</p>
</div>

var app = new Vue({
  el: "#app",
  data: {
    val: ""
  }
});

算出プロパティ

任意に処理を含めることのできるデータ

<div id="app"><p>{{ width }}の半分は{{ halfWidth }}</p></div>

var app = new Vue({
  el: "#app",
  data: {
    width: 800
  },
  computed: {
    halfWidth: function() {
      return this.width / 2;
    }
  }
});

ウォッチャ

特定のデータまたは算出プロパティの状態の監視、変更があった場合に登録した処理の実行

<div id="app">
  <label><input type="radio" value="a" v-model="val" /> A</label>
  <label><input type="radio" value="b" v-model="val" /> B</label>
  <label><input type="radio" value="c" v-model="val" /> C</label>
</div>

var app = new Vue({
  el: "#app",
  data: {
    val: ""
  },
  watch: {
    val: {
      handler: function(newVal, oldVal) {
        console.log(oldVal);
        console.log(newVal);
      },
      deep: true, // ネストされたオブジェクトも監視する
      immediate: true // 初期読み込み時にも呼び出す
    }
  }
});

フィルタ

テキストベースの変換処理

<div id="app"><p>{{ price | localeNum }}円</p></div>

var app = new Vue({
  el: "#app",
  data: {
    price: 19800
  },
  filters: {
    localeNum: function(val) {
      return val.toLocaleString();
    }
  }
});

カスタムディレクティブ（v-hogehogeの自作、登録）はスキップ