【Vue JS】Vue JS2 ボタン操作を試してみましょう！【誰でもすぐにできる】

こんにちは、フリーランスエンジニアのエリーヴァです。
今回はVue.jsを使った「ボタン操作」について、解説していきます。

ぜひ、初心者の方など、簡単に誰でもできますので試してみてください。

Vue.jsでボタン操作をしてみる

VueJS反転
「MESSAGE REVERSE」をボタンクリックをしたら、画像のように反転する処理をVue.jsで記述してみましょう。
まずはJSFiddleにアクセスして、Vue.jsの準備をしましょう！

HTMLをコーディングする

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="apps">
  <p>{{message}}</p>
  <button v-on:click="reverseMessage">メッセージ反転</button>
</div>

まず始めにHTMLにてイベント発火用のボタンを作ります。
発火とは「javascriptを実行させる」という意味です。

「apps」というVueインスタンスにクリック時の操作を定義していくので、必ず「apps」の中に{{message}}とボタンを用意しましょう。
前回のおさらいですが、VueJSにて文字や数値をHTMLにて表示させるためには{{}}二重中括弧で変数名を囲います。

VueJSにて文字や数値をHTMLにて表示させるためには{{}}二重中括弧で変数名を囲う

v-onとは？

v-onとはVueJSが用意している特別な属性です。
VueJSではv-on意外にもv-onceやv-textなど色々あります。（今回はv-onだけ）

そして:(コロン)の後ろにDOMイベントを記載します。
DOMイベントとは、ブラウザが用意しているイベントです。具体例としてはメッセージアラートです。

今回は v-on:click=”reverseMessage” としているため、ボタンをクリックしたらVueインスタンスのreverseMessageメソッドを実行します。
つまり、v-onディレクティブを使うことで、DOMイベントの購読、イベント発火時のJavaScriptの実行が可能となるのです。

Vue.jsをコーディングする

new Vue({
  el: '#apps',
  data: {
  	message: 'MESSAGE REVERSE', 
  },
  methods: {
  	reverseMessage : function(){
     	this.message = 
      	this.message.split('').reverse().join('');     
    },
  }
})

Vueインスタンスは色々なものを定義することができます。
このメッセージ反転ボタンをクリックした際に、「reverseMessage」を実行します。

reverseMessageは’MESSAGE REVERSE’を反転させたいので、その処理を記述していきます。
messageの中身は’MESSAGE REVERSE’が入っているので、並び替えて再代入します。

今回は、並び替えですので以下のように考えます。