JavaScript勉強会

JavaScriptの学習日記

Vue.jsでイべントとメソッドの利用　【JavaScript フレームワーク入門】

Vue.js 読書メモ

Vue.jsの学習メモ。

今日は「JavaScript フレームワーク入門」の第4章を読んでみます。

 

jsstudy.hatenablog.com

 

 

4-2-5　イべントとメソッドの利用

(p.125)

テキストを入力などする場合、入力が完了したところでボタンなどをクリックし、処理を行うようになっています。

こうした「クリックしたら処理を実行する」という一般的なやり方もVueでは行えます。

これにはクリックのイべント処理の利用の仕方を覚える必要があります。

 

Vue.jsでイベント（ボタンのクリックなど）を扱う方法を見ていきましょう！

 

HTML

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Hello</title>
  <meta charset="UTF-8">
  <script src="vue.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css"></link>
</head>

<body onload="initial();">
  <h1>Vue.js</h1>
  <div id="msg">
    <p>{{ message }}</p>
    <input type="text" v-model="text1">
    <input type="button" v-on:click="doAction" value="click">
  </div>
</body>

</html>

vue.jsは、公式サイトからバージョン2のvue.jsをダウンロードしておく。

 

CSS

style.css

body {
  color: #F99;
  padding: 5px 16px;
  font-size: 14pt;
  line-height: 150%;
}
h1 {
  font-size: 24pt;
}
p {
  font-size: 18pt;
}

 

JavaScript

main.js

function initial() {
  new Vue({
    el: '#msg',
    data: {
      message: 'this is Vue.js sample!',
      text1: ''
    },
    methods: {
      doAction: function () {
        var str = this.text1;
        this.message = 'you typed: ' + str + '.';
      }
    }
  })
}

 

実行結果

上記の「index.html」「style.css」「main.js」「vue.js」を同じフォルダの中に保存して、Chromeでindex.htmlを見てみます。

 

f:id:jsstudy:20170715191448p:plain

 

入力フィールドに「abc」と入力して「click」ボタンをクリックしたら、入力値が表示部分に反映されました。

 

v-on属性

 

HTMLファイルで、「click」ボタンのところに「v-on」というVue.js用の属性（ディレクティブ）を付けてあります。

<input type="button" v-on:click="doAction" value="click">

 

  • 「v-on」という属性は、Vueでイべントを扱うための記号です。
  • 「v-on:click」は、clickイべントをキャッチします。

 

ここでは、clickイベントに対して、「doAction」という名前のメソッドを用意してあります。

 

ボタンをクリックすると「doAction」というメソッドが実行されます。

＝Vueオブジェクトのmethods内にあるdoActionという名前のメソッドが、clickイべントによって呼び出されるようになります。

methods: {
  doAction: function () {
    var str = this.text1; // ※1
    this.message = 'you typed: ' + str + '.'; // ※2
  }
}

 

  1. 入力フィールドの値がtext1にバインドされている。
  2. text1を取り出すことで、入力フィールドの値が得られる。（上記※1の行）
  3. その値を加工し、messageに設定する。（上記※2の行）
  4. messageが{{ message }}に表示される。

 

（参考）

jp.vuejs.org

v-on ディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。

 

第2回 Vue.js基礎文法最速マスター：Vue.js入門 ―最速で作るシンプルなWebアプリケーション｜gihyo.jp … 技術評論社

メソッドとイベントハンドリング

v-onディレクティブを利用することで，DOMイベントをハンドリングして，JavaScriptのコードを実行することができます。

 

まとめ

Vue.jsでイベントを処理する基本的な仕組み

  • 「v-on」でキャッチするイベントを指定する。
  • Vueオブジェクトに「methods」プロパティを用意して、イベント処理の内容を書く。

 

Vueオブジェクトのmethodsプロパティの書き方に慣れる必要がありそうですね？

 

 

JavaScript フレームワーク入門

JavaScript フレームワーク入門