コンポーネント ページを構成するUIをコンポーネントで分ける componentは設計図のイメージ。 構成 HTMLベースのテンプレート JavaScriptで書かれたロジック 名称付 ハイフンを一つ以上含むケバブケースを利用する必要あり。それ以外はNG 利用する理由 再利…

フォーム入力バインディング v-modelについてのおさらい 1. データバインディングで、要素のvalue属性を更新する。 2. イベントハンドリングで、受け取った値をデータに代入する 3. 属性は無視される ※1 ※1 v-model利用時はvalue.checked,selectedといった属…

イベントハンドリング v-on new Vue({ el: "#app", data: { counter: 0 }, methods: { clickHnadler: function() { this.counter++ } } }) <div id="app"> <p> {{ counter }} </p> <button v-on:click="clickHnadler"> click </button> </div> クリックするたびにカウントが増える https://jsfiddle.net/hiroki1205/938nqps6/28/ 引…

Vue.jsの条件分岐について if 他に言語のifの書き方とほぼ同じ new Vue({ el: "#app", data: { color: "red" } }) <div id="app"> <p v-if="color === 'red'"> stop </p> <p v-else-if="color === 'yellow'"> Caution </p> <p v-else-if="color === 'blue'"> Go </p> <p v-else> Not anything </p> </div> --> redと表示 v-showとの違い v-showは要素のcssのdis…

クラスとスタイルのバインディング クラスやスタイルをデータバインディングすることで動的な見た目を作ることが出来ます。 クラスデータバインディングのきほん .large { font-size: 30px; } .text-danger { color: red; } new Vue({ el: "#app", data: { i…

監視プロパティ 特定のデータまたは、算出プロパティの状態を監視して、変化があった時に登録した処理を自動的に実行する。 事例）検索フォームの値が変わったタイミングで自動的にajax通信を行って結果を一覧表示 Watchメソッドのサンプル <div id="app"> <p> <input type="text" v-model:value="km">km </p> <p> <input type="text" v-model:value="m">m </p> <p> <input type="text" v-model:value="mm">mm </p> </div> …

算出プロパティ メソッド メソッドなので呼び出しには()がいる 計算結果をキャッシュしないので、一度計算を行った場合も関数を呼び出される度に再計算を行う 使えるのはgetterのみでsetterは使えない computed 算出プロパティ データそのものに何らかの処理…

v-bindの省略記法 <a v-bind:href="url"></a> <a :href="url"></a>

vue.jsの基本(テンプレート構文） vue.jsでは様々なテンプレート制御ディレクティブがあります。 有名どころだと以下 v-once -> 初回だけバインディング v-pre -> 要素と全ての子要素のコンパイルをスキップ v-html -> プレーンなHYMLを挿入 v-cloak -> イン…

vue.jsで超簡易的なtodo作成 <div id="app"> <h2>Todos list</h2> <form v-on:submit.prevent> <input type="text" v-model="newItem"> <button v-on:click="addItem"> ADD </button> <ul> </ul></form></div>

Vue.jsのきほん 基本情報をメモ Vue.jsの読み込み方 1. CDN - Content Delivery Netwotk 2. 直接読み込む - ファイルをダウンロードして配置 3. NPM - パッケージ管理ソフトの利用 vueインスタンスの作成 var app = new Vue ({ }) new Vueと記載することで、…

AWS料金について AWSは従量課金制度で知らぬ間に高額な請求をされる恐れがあるので、注意 料金は主に、起動時間、インスタンスタイプ、台数、ストレージ、データ転送量で決まります。 無料枠を使い倒そう AWSにはアカウント登録してから1年間は無料の枠があ…

コンテナデプロイ(ECS, ECR)のきほん AWSにコンテナデプロイする時のきほんについてメモ ECS 正式名称: EC2 Container Service クラスタ構成※1を作ったり、ロードバランサーとつなげたり、コンテナの生死監視と自動復旧などをやってくれる。 ※1. 複数のコン…

仮想ネットワークサービス Amazon VPC サーバー設置する時にはそのサーバーがネットワークに繋がっている必要があります。 そこで利用するのが、AmazonVPCです。 デフォルトVPCもあるので、気軽に利用できます。 VPCとは AmazonVPCは、AWSアカウント専用の仮…

ストレージサービス Amazon S3 Amazon S3はAWSで提供されているストレージサービスです。（オブジェクトストレージサービス） 画像の保存するときなどに利用するケースが多いです。 S3の特徴 ■ スケーラビリティ 使用場面に応じたストレージクラスが複数用意…

AmazonEC2 AWSの最も有名なサービスAmazonEC2について基礎をまとめます。 EC2とは Amazon Elastic Compute Cloud(Amazon EC2)とは簡単に言えばサーバーに必要なもの一式をクラウドで借りられるサービスです。 EC2は、アンマネージドサービスです。サーバーや…

AWSアカウントについて AWSアカウント周りの基礎知識について rootユーザー 全ての権限を持っておる操作権限を持っているユーザーをルートユーザーと呼びます。 ただ、何でも出来る反面乗っ取りの恐れがあるのでIAMという、サービスを使用するためだけのユー…

Dockerのvolumesについて Dockerのvolumesについての備忘録 そもそもvolumes(ボリューム)とは？ -> ボリュームとは、データを永続化できる場所のこと。 Dockerコンテナを実行中に書き込まれたファイルは、ホスト側にファイル・ディレクトリをマウントしない…

Dockerコンテナのライフサイクル Dockerコンテナは実行中・停止・破棄という3つの状態のいずれかに分類されます。 実行中 docker container runで指定されたDockerイメージをもとにコンテナが作成 DockerfileのCMDやENTRYPOINTで定義されているアプリケーシ…

Dockerのについて docker image lsでイメージ一覧取得した時にと表示されるケースがありますが。 これは一体何なんでしょう？ ~ ❯❯❯ docker image ls [~] REPOSITORY TAG IMAGE ID CREATED SIZE <none> <none> e9712b7a1812 26 hours ago 1.23GB <none> <none> 5579eb4fdc65 26 hours</none></none></none></none>…

クラウドのきほん AWSを知る上でクラウドとオンプレミスの違いを理解することは必須です。 それぞれの基本を備忘録がわりにメモしていきます。 AWSはクラウドコンピューティング AWSはサーバーやネットワークなどのインフラ一式を貸してくれるサービスです。…

AWSの基礎知識 AWSの基礎知識を備忘録がわりにひたすらメモします。 専門家でなくても利用できる 本来ネットワーク構築などは専門のインフラエンジニアが構築することが多かったが、AWSでは専門家でなくても利用できるような工夫が施されている。 支払いは日…

Dockerを利用するメリット メリットってなんだろう？と思ったので調べてみました。 個人的見解がもろに入ってるので、間違いも多いと思います。 メリットその1、不変な実行環境による冪等性の確保 Dockerコンテナを利用することで実行環境を構築することで実…

Dockerコンテナのステータス 普段何気に利用しているDockerのステータスには以下のケースがある。 - created - restarting - running - removing - paused - exited - dead それぞれのステータスは以下のようなイメージ [Docker入門] Dockerコンテナのステー…

Dockerのコンテナ/イメージ確認方法 すぐ忘れるので、確認方法の備忘録を残します。 コンテナの動作確認 ■ 動作しているコンテナのみ表示 docker ps ■ 全てのコンテナ表示 docker ps -a 表示される各項目の意味は以下の通り CONTAINER ID -> コンテナIDの最…