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

Chapter5 ユーザーの操作をつなぐとき

01 イベントとつなぐ：v-on

イベントとメソッドをつなぐときは、v-on

メソッドの作り方

メソッド（命令文）は、Vue インスタンスに methods オプションを追加して作ります。
methods オプションでは、「どんな命令があるのか」を指定します。

ボタンをクリックしたとき

<div id="app">
  <!-- クリックしたら1増やす -->
  <p>{{ count }}</p>
  <button v-on:click="countUp">1増やす</button>
  <hr />
  <!-- クリックしたら、2回目は押せなくなる -->
  <button value="Like" v-bind:disabled="isLikeClick" v-on:click="oneClick">
    Like
  </button>
</div>

function like() {
  alert("Like button clicked");
}
new Vue({
  el: "#app",
  data: {
    count: 0,
    isLikeClick: false
  },
  methods: {
    countUp: function() {
      this.count++;
    },
    oneClick: function() {
      this.isLikeClick = true;
      like();
    }
  }
});

結果

引数を渡してメソッドを実行する

<div id="app">
  <!-- クリックしたら、値をいろいろ増やす例 -->
  <p>{{ count }}</p>
  <button v-on:click="countUp(1)">1増やす</button>
  <button v-on:click="countUp(10)">10増やす</button>
  <button v-on:click="countUp(100)">100増やす</button>
</div>

new Vue({
  el: "#app",
  data: {
    count: 0
  },
  methods: {
    countUp: function(value) {
      this.count += value;
    }
  }
});

結果

キー入力したとき

これはそこまで頻度なさそうですが

キー修飾子

• .enter
• .tab
• .delete（「Delete」と「Backspace」両方）
• .esc
• .space
• .up
• .down
• .left
• .right
• .48〜.57（「0」〜「9」）
• .65〜.90（「A」〜「Z」）

システム修飾子キー

• .ctrl
• alt
• shift
• meta（Win は「Windows」キー、Mac は「command」キー）

<div id="app">
  <!-- Enterキーを押したらアラートを表示する -->
  <input v-on:keyup.enter="showAlert" v-model="myText" />
  <p>{{ myText }}</p>
</div>

new Vue({
  el: "#app",
  data: {
    myText: "Hello!!!"
  },
  methods: {
    showAlert: function() {
      alert("Enterキーが押されました。");
    }
  }
});

結果