Vue3の基本的な使い方　超入門その２

2023年8月28日 16:09

前回の続き

前回は環境構築が中心でした。
今回は実際にコードの解説を入れていこうと思います。
ポイントのみにしていますので、コード全体は書籍を購入して確認してください。

Vue3の基本的な仕組み

値をリアルタイムにチェックし、状態を保持する

const appdata = {
    data() {
      return {
        message: ''
      }
    },
    created() {
      this.message = 'Hello Vue!',
      this.count = 0
    },
    mounted() {
      timer = setInterval(() => {
        this.count++
        this.message = 'Count: ' + this.count
      }, 1000)
    }
}

定数「appdata」に以下のオブジェクト（メソッド）を代入する。

data関数：
・returnされた値を対象となるタグ内の{{ }}で指定された部分に当てはめる。
mounted関数：
・Vue3オブジェクトがWebページに組み込まれた際に実行される処理。
setInterval関数：（JavaScriptの関数）
・一定時間ごとに処理を実行する。今回は1000ms（ミリ秒）ごと。
created関数：
・アプリケーションオブジェクトが生成された際に実行される処理。

タイマーを停止する

let timer = null

function doAction() {
  clearInterval(timer)
}

doAction関数は、ボタンをクリックすると呼び出すようにしておく。

clearInterval関数：
・setInterval関数で得られたタイマーを停止させる。

現在の日時を表示する

<p>{{ message + " [" + new Date().toLocaleString() + "]" }}</p>

リロードすると、messageの後ろに「現在の日時」が表示される。
setInterval関数で1000msごとに更新されるが、そのつどnew Date() される。
よって、1秒ごとに現在の日時が表示される。
stopボタンを押すと、その時刻で止まる。

ただし、コーディングの考え方としては
「表示はHTMLに、処理はスクリプトに」
が基本のようです。

要素と表示について

HTML要素を出力する

  const list = ['One', 'Two', 'Three']
  const appdata = {
    data() {
      return {
        message: `<ul>
          <li>${list[0]}</li>
          <li>${list[1]}</li>
          <li>${list[2]}</li>
        </ul>`
      }
    }
  }

テンプレートリテラル
・テキストを改行して記述
・「`」バッククォートで挟む
プレースホルダー
・${ 変数名など }
・あらかじめ用意していた変数などをはめこむ

<div v-html="message"></div>

v-htmlでHTMLソースコードを出力することができる。

三項演算子で条件分岐

{{num + 'は、' + (num % 2 == 0 ? '偶数' : '奇数') + 'です。'}}

与えられたnumの値によって、次のいずれかが表示される。
「○○は偶数です。」「○○は奇数です。」

配列をmapメソッドで繰り返し処理

<pre>{{data.map((value,key)=>key + ' :「' + value + '」').join('\n')}}</pre>

preタグ
・Preformatted Text（整形済みテキスト）の略。
・囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示する。
mapメソッド
・配列の各要素ごとに処理を行って、新しい配列を生成する。
・引数の(value,key)には、配列の各要素の値とインデックスが渡される。
・その後、joinメソッドを呼び出して各項目の値を1つのテキストにまとめたものを出力させるとよい。
joinメソッド
・引数のテキスト（例：\n）を挟んで、各要素を1つのテキストにつなげる。

Bootstrapによるスタイル設定

headタグ内に記述する。
「CDNを利用する方法」と「npmでインストールする方法」がある。

class="container"　　// コンテンツの配置を自動調整する
class="text-○○○"　　 // テキストの色
class="bg-○○○"　　　 // 背景色
class="h○○"         // フォントサイズ h1〜h6
class="display-○○"  // ディスプレイフォント（見出し） 1〜4
class="m-○○"        // 余白の調整（マージン）　1〜5
class="p-○○"        // 余白の調整（パディング）　1〜5
class="alert alert-色名"　　// 指定した色を使ったアラート

他にも以下のようなものが簡単に利用できる。

カードの表示
フォームの表示
チェックボックスとラジオボタン

V-属性の活用

属性に値をバインドする

<p v-bind:style="style">・・・</p>

<script>
  const appdata = {
    data() {
      return {
        style:'font-size:32pt; color:red;'
      }
    },
　以下、省略

v-bindを使うことで、style属性にVue3で記述した「style」の値が設定される。
なお、v-bindの記述は省略できる。（例：<p style="style">）

オブジェクト構文

変数の値によってそのクラスが使われるかどうかが決まる。
trueならONになり、falseならOFFになる。
クラスそれぞれを外部からON/OFFすることが可能になる。

<script>
  const appdata = {
    data() {
      return {
        isRed: true,
        isBlue: false
      }
    },
    mounted() {
      setInterval(()=>{
        this.isBlue = !this.isBlue
        this.isRed = !this.isRed
      },1000)
    }
  }

isRedとisBlueの値が、1秒ごとにON（適用）/OFF（不適用）される。
初期値は、isRedがtrue、isBlueがfalse。
!を使うことで、値を反転（true⇔false）して再設定される。

v-bind:classにオブジェクトを設定する

  <p v-bind:class="classes">
  </p>

  <script>
  var classObj = {
      red: true,
      blue: false
  }

  const appdata = {
    data() {
      return {
        classes : classObj
      }
    },
    mounted() {
      setInterval(()=>{
        this.classes.red = !classObj.red
        this.classes.blue = !classObj.blue
      }, 1000)
    }
  }

classesという名前でclassObjが設定されています。

条件付きレンダリング　v-if、v-else

<body>
  <style>
  .ok {
  }
  .ng {
  }
  </style>

  <div id="app" class="container">
    <p v-if="flag" class="ok">
      
    </p>
    <p v-else class="ng">
      
    </p>
  </div>
  
  <script>
  const appdata = {
    data() {
      return {
        flag : true
      }
    },

タグの中にv-if属性を追加し、その値として真偽値として扱える変数を記述する。値がtrueならこのタグは表示され、falseなら表示されない。
v-elseは、v-ifを記述したタグの直後に配置する。直前のv-ifがfalseの場合に、このタグは表示される。

V-forによるリストレンダリング

<tr v-for="(item, id) in items">
  <td>{{id}}</td>
  <td>{{item.name}}</td>
  <td>{{item.mail}}</td>
  <td>{{item.tel}}</td>
</tr>

<script>
const appdata = {
  data() {
    return {
      items:[
        {name:'Taro', mail:'taro@yamada', tel:'999-999'},
        {name:'Hanako', mail:'hanako@flower', tel:'888-888'}
      ]

data変数の中にitemsという配列を用意し、各要素にはname,mail,telというプロパティがある。
v-forではインデックス番号を第２引数として取り出すことができる。

オブジェクトをv-forする場合

<tr v-for="(item, key) in items">
  <td>{{key}}</td>
  <td>{{item.mail}}</td>
  <td>{{item.tel}}</td>
</tr>

<script>
const appdata = {
  data() {
    return {
      items:{
        Taro: {mail:'taro@yamada', tel:'999-999'},
        Hanako: {mail:'hanako@flower', tel:'888-888'}
      }

v-forの引数は、値、キーの順で記述する。
※オブジェクトの基本
キーに重複は許されず、配列と違って並び順は保証されないことに注意！

以上、ここまでがChapter２です。

この記事が気に入ったらサポートをしてみませんか？