SHOW Toro TIME

ゲームや技術的なこと、最近の気になることをどんどん書いていくブログです

トップ > 技術 > 【Vue】Vue.jsのお勉強メモ①

【Vue】Vue.jsのお勉強メモ①

技術 ノウハウ Vue.js

はじめに

どうも、小トロです～

今回は技術的な話題のお勉強メモです

Webアプリケーションの開発をするときによく使われるフレームワーク「Vue.js」を勉強しています(現在進行形)

他にも「Angular」、「React」などがありますが、「Vue.js」は触ったことがなかったので、ちょっと触ってみた時のメモを書いているので、参考程度に見てもらえればと思います

f:id:shotoro:20200329224853p:plain:w600

Vueの準備

Node.jsのインストール

  • npmの利用、サーバサイドの開発を行うために、Node.jsインストールする
  • Node.jsは、サーバーサイドのJavascript実行環境
  • Node.jsの公式サイトよりインストーラをダウンロードする

※Proxy環境設定が必要な場合

  • 以下のコマンドを入力する
# npm config set proxy http://<ユーザ名>:<パスワード>@<プロキシのホスト名>:<ポート番号>
# npm config set https-proxy http://<ユーザ名>:<パスワード>@<プロキシのホスト名>:<ポート番号>

ユーザ認証がない場合は、<ユーザ名>:<パスワード>@を除いて入力してください。

Vue CLIのインストール

  • 以下のコマンドを入力する
# npm install -g @vue/cli

Vueプロジェクトを作成

  • 以下のコマンドを入力する
# vue create <プロジェクト名>

Vueの構造

  • 初期のVueプロジェクトは以下の状態になっている
f:id:shotoro:20200329214857p:plain:w300
  • src
    • /assets

      画面に表示する画像を入れる場所

    • /components

      画面を構築するコンポーネントを置く場所

  • App.vue

    コンポーネントが集まるファイル

  • main.js

    App.vueを呼び出す定義が書かれたファイル

  • .gitignore

    git管理の対象外を指定しているファイル

  • babel.config.js

    babelの設定ファイル

  • package.json

    依存するライブラリ情報を管理する設定ファイル

  • package-lock.json

    package.jsonの変更がない限り使われるライブラリ管理ファイル

  • README.md

    プロジェクトの説明ファイル

Vueの起動

  • Vueは以下のような依存関係で起動する
  • App.vueはmain.jsに依存し、main.jsはindex.htmlに依存している
  • 基本的にはApp.vueに依存する各コンポーネント(例としてHelloWorld.vue)を作成し、画面を構築していく
f:id:shotoro:20200329215458p:plain:w600

画像出典：VueCLIからVue.js入門①【VueCLIで出てくるファイルを概要図で理解】

# cd <Vueプロジェクトパス>
# npm run serve
f:id:shotoro:20200331160451p:plain:w450

.vueファイルの構造

<template>
  <div>
    <p>
      {{msg}}
    </p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: 'Hello World!'
      }
    }
  }
</script>

<style scoped lang="scss">
  div {
    p {
      color: red;
    }
  }
</style>

データバインディング処理

<template>
  <div>
    <p>
      {{msg}}
    </p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: 'Hello World!'
      }
    }
  }
</script>
  • 参考例(テキスト入力)
    • <input type='text' v-model='msg'>を追加
<template>
  <div>
    <p>
      {{msg}}
    </p>
    <input type='text' v-model='msg'>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: 'Hello World!'
      }
    }
  }
</script>

条件処理

  • v-if、v-elseを使うことでデータバインディングされる変数に対する条件処理ができる
<template>
  <div>
    <p v-if='msg.length > 0'>
      {{msg}}
    </p>
    <p v-else>
      no text
    </p>
    <input type='text' v-model='msg'>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: 'Hello World!'
      }
    }
  }
</script>

イベント処理

クリックイベント

  • ボタン等のクリックで発生するイベント処理
  • 書き方は2通りある
    • <button @click='clear()'>clear</button>
    • <button v-on:click'clear()'>clear</button>
  • 対応する処理内容は<script>のmethodsに記載する
<template>
  <div>
    <p v-if='msg.length > 0'>
      {{msg}}
    </p>
    <p v-else>
      no text
    </p>
    <input type='text' v-model='msg'>
    <button @click='clear()'>clear</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: 'Hello World!'
      }
    },
    methods: {
      clear () {
        this.msg = ''
      }
    }
  }
</script>
  • イベント処理は他にも多く存在する

とりあえず、ここまで