Vue.js勉強記録その5 コンポーネントを使おう section3-2 ver2

Vue.js3超入門

こちらの書籍で勉強しています！

今日は、Chapter3 のSection3-2の続きから！！

■v属性を使いこなす

・v-onでイベントをバインドする

今度はイベント。イベントが出てくると、一気にプログラムらしくなって楽しくなってきますね。

今回は、まず最初に出来ないパターンのコードが出てきて、その後に正しい書き方を紹介されています。

まずは、出来ないパターンのコード

<h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
<div id="app" class="container">
   <p>{{message}}</p>
   <hello />
</div>

<script>
   const appdata = {
       data() {
           return {
               message: '※コンポーネントを表示する',
               name: 'no-name'
           }
       }
   }
   let app = Vue.createApp(appdata);

   app.component('hello', {
       data() {
           return {
               counter: 0
           }
       },
       template: '<p onclick="counter++" class="alert alert-info">clicked:{{counter}}</p>'
   });

   app.mount('#app');
</script>

このコードが、なぜ動かないかというと、コンポーネント内のテンプレートの表記にある、onclick="counter++"が間違っているから。

このままブラウザで表示して、pタグをクリックすると、counterが無いというエラーが、コンソールに出る。

コンポーネント内の、dataプロパティ内の変数counterをインクリメントする記述だが、どうやら単純にはdataプロパティ内の変数にアクセス出来ないらしい。

なのでv-on属性を使って、イベントを結びつける必要がある。

先ほどのコードの、

template: '<p onclick="counter++" class="alert alert-info">clicked:{{counter}}</p>'

を、

template: '<p v-on:click="counter++" class="alert alert-info">clicked:{{counter}}</p>'

この様に直すと、動く様になる。

正しく動くコードの全体は以下

<h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
<div id="app" class="container">
   <p>{{message}}</p>
   <hello />
</div>

<script>
   const appdata = {
       data() {
           return {
               message: '※コンポーネントを表示する',
               name: 'no-name'
           }
       }
   }
   let app = Vue.createApp(appdata);

   app.component('hello', {
       data() {
           return {
               counter: 0
           }
       },
       template: '<p v-on:click="counter++" class="alert alert-info">clicked:{{counter}}</p>'
   });

   app.mount('#app');
</script>

処理的には、

1.pタグが表示される。この時、テンプレート内に{{counter}}があるから、数字が（最初は0）が表示される。

2.pタグをクリック。counter++が実行される

3.コンポーネント内の、dataプロパティの変数counterに1足される

4.テンプレート内の{{counter}}の値が変わり、画面に表示される

多分、こんな感じの処理になっていると思われる。

・イベント処理を別途用意する

イベントで行いたい処理が単純なら、v-on:click=""この中に直接書いてもいいけど、処理が長くなると（通常は複数行になると思われる）書くのが大変なので、コンポーネント内に、

method:{
    名前(event){処理},
    名前(event){処理},
    ...
}

こんな感じに関数をまとめられる様になっている。eventは、いわゆるイベントオブジェクトっぽい。

クリックするとクラスを変更する処理

<h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
<div id="app" class="container">
   <p>{{message}}</p>
   <hello />
</div>

<script>
   const appdata = {
       data() {
           return {
               message: '※コンポーネントを表示する',
               name: 'no-name'
           }
       }
   }
   let app = Vue.createApp(appdata);

   app.component('hello', {
       data() {
           return {
               counter: 0,
               isInfo: true,
               isDark: false
           }
       },
       methods: {
           doAction() {
               this.counter++;
               console.log("counter");
               if (this.counter % 2 == 0) {
                   this.isInfo = true;
                   this.isDark = false;
                   console.log("true");
               } else {
                   this.isInfo = false;
                   this.isDark = true;
                   console.log("false");
               }
           }
       },
       template: '<p v-on:click="doAction" v-bind:class="{\'alert-warning\':isInfo,\'alert-dark\':isDark}" class="alert">clicked:{{counter}}</p>'
   });

   app.mount('#app');
</script>

pタグをクリックするとカウントが増えていく。そしてクラスが毎回交互につけ替わり、色が変わる。

pタグをクリックすると、doActionメソッドが実行される。

doAction内で、dataメソッドで設定している、counter、isInfo、isDarkを操作しているが、thisを付けて記述する。

if文を作り、counterの値が偶数か奇数かで、処理を分けている。処理自体は、isInfoとisDarkにtrue/falseを付け替えているだけ。

このisInfoとisDarkの真偽値が変わることで、

template: '<p v-on:click="doAction" v-bind:class="{\'alert-warning\':isInfo,\'alert-dark\':isDark}" class="alert">clicked:{{counter}}</p>'

このテンプレート内の、v-bind:classの値が変わる様になっている。

新グルクォートのエスケープ処理があるから、ちょっとわかりにくいですが、この記述は前に出てきましたね。

v-bind:class{クラス名:変数}

この変数に入る真偽値がtrueならクラスが付加され、falseなら外される。

■まとめ

とりあえず今回はここまで。

たくさんコード書いてきて、少しずつvue.jsに慣れてきたかな？って感じです。

やはりイベントが出てくると、どんどん楽しくなりますね。