Vue.js

var app = new Vue({
            el: "#app",
            data: {
                message: "Hello World"
            }
        });

el -> HTML要素のID指定 data -> データ(変数)の中身指定

Vueインスタンスの変数へアクセスする際はthis.変数名

接頭詩 v-

v-bind -> HTML要素の属性を動的に設定できる分かりやすい記事

v-on -> イベントリスナーを定義し、メソッドを呼び出すことが出来る

v-if -> 条件分岐の結果で要素の有無を指定できる

v-once -> Vueによるレンダリングを一度のみ実行する

v-for -> 配列制御ができる、利用する際はv-bind:keyの指定が必須

v-model -> 状態管理のような物？入力された情報とデータの双方向バインディングが可能サンプル

算術

computed -> 関数で処理したデータを返却するプロパティ。methodsとの違いは

	methods	computed
キャッシュされる？	されない	される
引数	使える	使えない
処理のタイミング	呼び出し毎	データ変更時

Vue-Cliを用いた開発

src/components以下にコンポーネントファイルの配置
命名はキャメルケース(?)

基本構文

サンプルファイル

<template>
</template>

<script>
</script>

<style>
</style>

propsのプロパティについて

propsには3つのプロパティを指定できる

type -> 型情報
default -> 初期値
required -> データ必須(nullを許容しない)

指定できる型一覧

属性	内容
String	文字列
Number	数値型
Array	配列型
Boolean	真偽値
Object	オブジェクト型
Function	関数
Date	日付
null	全て許容
undefined	全て許容

Nuxt.js

Vue.jsを用いて開発されているフレームワーク SSR/SPA/SSG対応。 serverMiddlewareという機能を用いて簡単にBFFを導入できる (WebAPIとか作れるイメージ)

環境構築

https://nuxtjs.org/docs/get-started/installation

yarn create nuxt-app {アプリ名}

上記を実行した際、数個の質問に解答する必要がある。内容はプロジェクトによって都度変更する(読めば分かる)

ディレクトリ解説

- root
    - .nuxt
        - 吐き出されたファイル。基本気にしなくて良い
    - components
        - ここにコンポーネントファイルを配置します。命名はキャメルケース
    - node_modules
        - モジュールディレクトリ
    - pages
        - ページファイルを配置できる。ルーティングはindex.vueを基準に各フォルダー、ページ名で自動的にルーティングしてくれる
    - static
        - 加工した画像やfavicon、ファイル名をそのまま利用したい場合はこちらに配置する。
    - store
        - https://nuxtjs.org/docs/directory-structure/store/ 公式の解説
        - https://noumenon-th.net/programming/2019/08/24/nuxt-js-store/ 分かりやすい記事
        - 状態管理用のディレクトリ
    - .editorconfig
    - .eslintcache
    - .eslintrc.js
        - eslintの設定ファイル
    - .gitignore
    - .prettierignore
    - .prettierrc
        - prettierの設定ファイル
    - jsconfig.json
        - コンパイルに関しての設定ファイル
    - nuxt.config.js
        - サイト全体の設定ファイル
    - package.json
    - README.md
    - yarn.lock

n4rvs3/Study_Vue.js