Vue.js

Vue CLI 3

■Vue CLI 3のインストール

$ npm install -g @vue/cli

■プロジェクトの作成

$ vue create プロジェクト名

■プロジェクトの実行
カレントディレクトリをプロジェクトディレクトリにしてから、以下のコマンドを実行する。

$ npm run serve

プロジェクトがビルドされ、開発用ウェブサーバーが稼働する。
http://localhost:8080/にアクセスすれば、アプリのウェブページが表示される。

■GUI管理ツールの起動

$ vue ui

デフォルトのWebブラウザが起動し、http://localhost:8000/project/selectにアクセスされる。
(左下の🏠アイコンのクリックで、プロジェクトマネージャとプロジェクトダッシュボードを切り替える)

ディレクティブ

■{{ }}
マスタッシュ構文

■v-once
マスタッシュ構文を一度だけ展開する。

■v-html
タグにHTMLを埋め込む。
(例)

<p v-html="HTMLタグを含む値"></p>

■v-text
マスタッシュ構文の代替記法。
(例)

<p>{{ message }}</p>

 ↓

<p v-text="message"></p>

■v-pre
マスタッシュ構文を展開せずに、そのまま表示する。

<p v-text>{{ message }}</p>

■v-bind:属性値=”値”
HTMLタグの属性値にVueインスタンスのデータをバインドする。