Vue.js勉強記録その7 一度テキストを離れてサンプル作り

Vue.js3超入門

いつも、この書籍で勉強していますが、どうやら次から本格的にプロジェクトなるものを使った勉強が始まるらしいので、一度ここまでの内容を使ってサンプルを作ってみました。

猫のスライドショーです

■サンプル紹介

次へと前へを押すと、画像が切り替わります。画像のプリロード的な処理がわからなかったので、ボタンを押すたびに一瞬ブランクになりますねw

<h1 class="bg-secondary text-white display-4 px-3">Vue3サンプル</h1>
<div id="app" class="container">
   <p class="h1 text-center">{{message}}</p>
   <div class="row">
       <div>
           <neko />
       </div>
   </div>
</div>
<script>
   const appdata = {
       data() {
           return {
               message: '我が家の猫',
           }
       },
       components: {
           neko: {
               data() {
                   return {
                       counter: 1
                   }
               },
               computed: {
                   setImg: (e) => {
                       return `<img class="img-fluid" src="neko${e.counter}.jpg">`
                   }
               },
               methods: {
                   prev() {
                       if (this.counter > 1) {
                           this.counter--
                       }
                   },
                   next() {
                       if (this.counter < 10) {
                           this.counter++
                       }
                   }
               },
               template: `
               <div class="text-center">
               <button v-on:click="this.prev" class="btn btn-info m-3">前へ</button>
               <button v-on:click="this.next" class="btn btn-info m-3">次へ</button>
               </div>
               <p class="col-sm-4 offset-4" v-html="setImg"></p>
               `
           }
       }
   }
   let app = Vue.createApp(appdata);
   app.mount('#app');
</script>

コードはこんな感じです。

処理の流れ的には以下の様な感じ

1.テンプレート内のpタグにv-htmlで、算術プロパティのsetImgを使ってimgタグを書いてます。

2.次へボタンと前へボタンに、各々イベントprevとnextが設定されていて、変数counterに1を足したり引いたりしています。

3.counterが変更されると、setImgが実行されて、imgタグのsrc属性の値を書き換えます。

■出来なかったこと & 反省点

最初は、猫が表示されるpタグと、各ボタンを別々のコンポーネントとして作ろうとしました。

こんな感じです。

components: {
   neko: {
       data() {
           return {
               counter: 1
           }
       }
       略
   },
   btnPrev:{略（前へボタン）},
   btnNext:{略（次へボタン）}
}

作り進めていくと、どうしても出来ないことがありました。

コンポーネントbtnPrevの中のテンプレートで、前へボタンを書いたのだけど、そのボタンを押した時に、コンポーネントnekoのcounterにアクセスして1を引きたかったのだけど、アクセスする方法が解らなかった。。。

とりあえず一旦作り直して、ボタンも猫の画像も全部一つになったコンポーネントにして、作りました。

別のコンポーネントの変数にアクセスするにはどうしたらよいのだろう。。。まぁいずれ解るとして今回はこれでよしw

もう一つの反省点は、やっぱbootstrapが苦手ですねwそっちも慣れていこう。

■まとめ

記念すべきvue.jsで作った、最初の作品（サンプルですがw）が出来ました！これからも、ちょいちょい身につけた知識でサンプルを作ろうと思います！！