vue.js入門3

はじめに

vue.js入門の続きです。 前回まではvueの環境準備がほとんどだったので今回は実装をメインで 書いていきます。

実装

まずは実装してみて、その内容をチェックしていきます。

実装

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>Vue.js</h1>
  <div id="app">
    {{ message }}
  </div>
  <script>
  new Vue({
    el: '#app',
    data: { message: 'Hello Vue!'}
  })
  </script>
</body>
</html>

表示される画面

普通のHelloページです。 f:id:set21set21:20210810192802p:plain

実装内容チェック

まずはscriptの中身をチェックします。

new Vue

この部分はVueのオブジェクトを作成してます。 でその中身が以下です。

    el: '#app',
    data: { message: 'Hello Vue!'}

elとdataというものを指定しています。

elについて

elは最低限必要となるプロパティになるようです。 指定するのはVueオブジェクトの対応となるものです。

appと指定しているので、これがid="app"と紐づく感じになります。

dataについて

dataの値に用意されたものを指定されたところ({{}}のところ)に設定するというイメージです。 ここでは{{message}}にHello Vue!という文字を設定するということになります。

messageの動きの確認

{{}}に設定された値はリアルタイムにチェックされ、常に状態が保持されるようです。 試してみます。

実装

試すために以下のように実装します。

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>Vue.js</h1>
  <div id="app">
    {{ message }}
  </div>
  <hr>
  <button onclick="doAction();">
    click
  </button>
  <script>
  var data = {message: 'Hello Vue!'}
  new Vue({
    el: '#app',
    data: data
  })
  function doAction() {
      data.message = "You Clicked";
  }
  </script>
</body>
</html>

表示される画面

以下のように表示されます。 f:id:set21set21:20210810205613p:plain

ここで、クリックボタンを押すと、以下の表示に変化します。 f:id:set21set21:20210810205728p:plain

実装内容チェック

JavaScriptの実装でVueオブジェクトに設定しているdataを 最初に初期化して、そのdata変数を設定するようにしています。

そして、doActionメソッドを追加して、そこでdata.messageにYou Clickedというように メッセージを設定するようにしています。

この実装では{{message}}に設定した値が動的に切り替わることが確認できました。

さらに値を更新してみる

値が更新されるのをさらに確認してみます。

実装

テキストフィールドを表示して、そこに入力した内容をmessageにリアルタイムで出力するという内容です。

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>Vue.js</h1>
  <div id="app">
    {{ message }}
  </div>
  <hr>
  <input type="text" onInput="doAction(event);">
  <script>
  var data = {message: 'please type'}
  new Vue({
    el: '#app',
    data: data
  })
  function doAction(event) {
      console.log(event)
      data.message = event.target.value;
  }
  </script>
</body>
</html>

画面表示

初期表示は以下のようになります。 f:id:set21set21:20210810210647p:plain

テキストフィールドに入力するとリアルタイムで表示されます。 （以下testを入力した後の画面です） f:id:set21set21:20210810210738p:plain

値以外を設定する

{{}}には今まで「値」を設定してきましたが、値以外もJavaScriptの「式」を記述することもできます。

実装

先程の入力した値を表示する実装のmessage部分を以下のように修正します。

{{ message.toUpperCase() }}

全部だと以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>Vue.js</h1>
  <div id="app">
    {{ message.toUpperCase() }}
  </div>
  <hr>
  <input type="text" onInput="doAction(event);">
  <script>
  var data = {message: 'please type'}
  new Vue({
    el: '#app',
    data: data
  })
  function doAction(event) {
      data.message = event.target.value;
  }
  </script>
</body>
</html>

画面表示

以下のように表示されます。 (この時点でplease typeが大文字に) f:id:set21set21:20210810211330p:plain

入力すると以下のように大文字に変換されて出力されます。 (ここではtestと英語、小文字で入力) f:id:set21set21:20210810211455p:plain

まとめ

{{}}の用法

{{}}に式を書くことを確認しました。 制約としては、何行にも渡るものは設定できないようです。

また保守のことを考えると複雑な実装を埋め込んでしまうとメンテナンスが難しいということにもなりそうなので 式を書きすぎるようなことは気をつけないといけないですね。

vue.js入門2

はじめに

前回に続きvue.jsの入門を続けてみます。

参考文献

積読していた以下を使って進めます。 Vue.js&Nuxt.js超入門 | 掌田津耶乃 | 工学 | Kindleストア | Amazon

設定

書籍の記載によるとVue CLIを利用する際にVue cli-service-globalというものも必要なようなのでこれを インストールします。

https://www.npmjs.com/package/@vue/cli-service-global

Vue cli-service-globalのインストール

インストール方法は以下コマンドを実行します。

npm install -g @vue/cli-service-global

Hello APPを作る

ようやくフロントエンドを作成していきます。

vueファイルを用意

任意のディレクトリでapp.vueというファイルを作成します。 ファイルは以下のようにしました。

<template>
  <div id="app">
    <h1>Hello!</h1>
    <p>This is message...</p>
  </div>
</template>

※通常のHTMLとは異なる、