【Vue.js】基礎構文について #Vue.js

7月12日から新規プロジェクトのアサインが決まりましたので、引き続きVue.jsについて勉強を進めていきました。

はじめに

本日は主に学びながら記述したコードを記載していきます。
現状は、HTMLファイルにscriptタグを記述して1ファイルで完結するようにしています。

環境

PCはmac OSを使用
エディターは、VSCode(Visual Studio Code)を利用しています。

事前準備

HTMLファイルを作成する際は、HTMLファイルを作成して、フォーマットを作成してきます。
ファイル作成後、[html:5]と入力すれば、以下のフォーマットを作る事ができるので、フォーマット作成後、微修正をして使います。

sample.html


<!DOCTYPE html>
<!-- デフォルトは"en"になっているので、jaへ変更 -->
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<!-- Vue.jsのガイドから以下のCDNコードを貼り付け -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13"></script> 
<script>
</script>
</body>
</html>

CDNコードを事前に貼り付けておけば、簡単に反映させることができます。
HTML要素はbodyの上部、Vue.jsはscriptタグ内に記述してきます。
それでは、勉強しながら実装したコードをいくつか記載していきます。

mustacheを利用したオーソドックスなテンプレート構文

html

<div id="app">
    {{ message }}
  </div>

vue.js

<script>
  // 名前を表示
  var app = new Vue({
    el: "#app",
    data:{
      message: "Vueを使って文字表示"
    }
  });
</script>

これはmessageの中の文言をhtml内のmessageに描画する事ができる書き方です。

v-onを使った時間表示

時間表示ボタンも作って見ました。
記述は以下です。

html

<!-- v-on 現在時刻の表示 -->
  <div id="app3">
    <p>{{ now }}</p>
    <button v-on:click="time">現在時刻を表示</button>
  </div>
  <br>

vue.js

<script>
  // v-onを利用してjavascriptで現在時刻の表示
    var app3 = new Vue({
      el: "#app3",
      data: {
        now: "00時00分00秒"
      },
      methods: {
        time: function (e){
          var date = new Date();
          this.now = date.getHours() + "時"+
          date.getMinutes() + "分" +
          date.getSeconds() + "秒";
        }
      }
    });
</script>

デフォルトの時間は、00時00分00秒としていますが、ボタンを押したら現時刻が表示されるような作りになっています。

都道府県リストのシャッフル

今度は、v-forを利用して都道府県リストの作成と、lodashを用いてシャッフルする際にアニメーションを付けるといったコードを書きました。

html

  <!-- v-on シャッフルしたら都道府県を並び替える -->
  <div id="app4">
    <button v-on:click="shuffle">シャッフル</button>
    <transition-group name="flip-list" tag="ul">
      <li v-for="pref in prefs" v-bind:key="pref.name"> 
      <!-- v-bindは省略して、[:key]でも良い -->
        {{ pref.name }}
      </li>
    </transition-group>
  </div>

vue.js

<!-- lodashの読み込み用スクリプト -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>
<script>
    // v-forを利用して配列の表示
    var app4 = new Vue({
      el: "#app4",
      data:{
        prefs: [
          { name: '北海道'},
          { name: '青森県'},
          { name: '岩手県'},
          { name: '宮城県'},
          { name: '秋田県'},
          { name: '山形県'}
        ]
      },
      methods: {
        shuffle: function(){
          this.prefs = _.shuffle(this.prefs);
        }
      }
    })
</script>

style.css

  <style>
    .flip-list-move{
      transition: transform .5s;
    }
    .alert {
      background-color: rgb(180, 107, 248);
      padding: 10px;
      border: 1px solid;
      width: 300px;
    }
  </style>

いくつか気にする事があるので、まとめてみます。

cssはhead内に記述
cssアニメーションを利用する時は、transitionグループで設定する必要がある
transitionは、tagにulを指定しないと、div要素になる
transitionグループを使う場合、キーが必要(今回はpref.name)
lodashを読み込むには、
lodashからCDNをコピーしてscriptに埋め込む
lodashを呼び出す場合は、_.shuffleで呼び出す事ができる

html,Vue.js,cssを記述する必要がありますが、少しリッチな感じで動いてる様子が見られます。

さいごに

前回は主にVue.jsのガイドを読むことに注力していましたが、実際にコードを打ってみると、Rubyとは違った見た目上での楽しさを感じる事ができました。

引き続きVue.jsの楽しさ、利便性を理解できるように学んでいこうと思います。