■

■ - うとうとしながら。

Vue Router

Vue Router Vue Router Vueでは、シングルページアプリケーション (SPA) をつくることができます。 SPAでは、ページは1枚だけです。 しかし、URLをもとに複数の画面を表示したいときもあります。 そんなときに、Vue Router を使ってルーティングを行います。 router.vuejs.org Vue Router は、VueにおけるSPAで、ルーティングを制御するためのプラグインです。 Vue Routerを使うことで、SPAに複数ページを疑似的に実現することができます。 Vue Routerのインストールは、Vue CLI を使って簡単にできます。 一つは、…

■

■ - うとうとしながら。

Vuetifyを使ってみる② コンポーネント（ボタンとカード）

ドキュメントに詳しく書いてある 試してみる ボタン (Button) カード (Card) 前回、Vuetifyをインストールしたので、今回はコンポーネントをいくつか使ってみたいと思います。 utouto97.hatenablog.com ドキュメントに詳しく書いてある Vuetifyには、ボタンやリスト、表（table）など様々なコンポーネントがあります。 これらのコンポーネントの使い方は、ドキュメントに詳しく書かれています。 vuetifyjs.com 試してみる ボタン (Button) まずは、ボタンを試してみます。 シンプルなボタンは以下のように記述します。 <v-btn>シンプルな…

Vuetifyを使ってみる

Vuetifyを使ってみる 環境はVue 2 Vuetifyをインストールして使ってみる Vuetifyを使ってみる 環境はVue 2 今回は、Vuetifyを導入していきます。 VuetifyはVueで使えるマテリアルデザインフレームワーク (UIフレームワーク) です。 github.com 公式のドキュメントも充実していて、導入は簡単に行えます。 vuetifyjs.com VuetifyはVue 3には対応しておらず、Vue 2のみに対応しているようです。 Vuetifyをインストールして使ってみる Vue CLI で Vue 2をインストールし終わった状態から作業を始めることを想定し…

Vueでスタイリング

Vueでスタイルを設定 Vueで使えるUIフレームワーク Vueでスタイルを設定 Vueでスタイルを設定するには、<style></style>を追加してその中に書いていくことができます。 また、テンプレート内のタグにクラスやIDを設定して、クラスやIDに対するスタイリングを<style></style>に書くこともできます。 <template> <div> <h1>Vue あかいろ</h1> </div> </template> <script> export default { name: 'App', } </script> <style> h1 { color: red } </st…

DockerでVue

Dockerとdocker-composeでVueプロジェクトを作成 Dockerfile docker-compose.yml Dockerイメージをビルド Vue CLIを使ってプロジェクト作成 コンテナを起動 Dockerとdocker-composeでVueプロジェクトを作成 Dockerとdocker-composeを使って、Vueプロジェクトを作成してみます。 Vueプロジェクトの作成は、Vue CLI を使うと簡単にできます。 まずは、Dockerfileとdocker-compose.ymlの二つのファイルを準備します。 Dockerfile FROM node:alpine …

v-for 使ってみる

v-forを使ってみる v-forを使ってみる v-forを使って、リストを表示してみます。 まずはリストを準備します。 data() { return { items: [ { id: 1, name: "apple" }, { id: 2, name: "orange" }, { id: 3, name: "peach" }, { id: 4, name: "grape" }, { id: 5, name: "melon" }, ] } } v-forを使って、↑をリスト表示します。 <ul> <li v-for="item in items" :key="item.id"> {{ ite…

tmp

t

v-for

v-for v-forをオブジェクトに使う v-for Vueでは、v-forを使うことで、配列の要素を一つずつ処理することができます。 例えば、v-forを使うことで、配列の要素をリスト表示するための<li>タグを繰り返し生成することができます。 v-forでは、value in list のようにすることで、listの要素を一つずつvalueにバインドして利用できます。 いくつかのプログラミング言語にあるforeachのようなイメージです。 実際には↓のように記述します。 <ul id="example-1"> <li v-for="item in items" :key="item.me…

v-if

v-if v-ifを使ってみる v-if v-ifで条件を指定することで、その条件がTrueの場合のみ、その要素が描画されます。 つまり、v-ifを使うことで、表示する要素を切り替えることができます。 v-ifは、v-elseやv-else-ifと組み合わせて使うことができます。 条件を満たしている場合はA、それ以外の場合はBを表示するといったことが実現できます。 参考 条件付きレンダリング — Vue.js v-ifを使ってみる 前回作ったカウンターに、v-ifで何かを表示してみます。 前回のカウンタは↓ utouto97.hatenablog.com カウンターの値が10以上のとき、「10…

Vue でカウンタをつくる

Vue でカウンタコンポーネントを作る コンポーネントで使うデータを宣言 コンポーネントで使うメソッドを宣言 カウンタ完成 Vue でカウンタコンポーネントを作る カウンタコンポーネントを作成していきます。 ファイルは、src/components/Counter.vueとします。 コンポーネントで使うデータを宣言 Vueのコンポーネント内で使うデータは、export default内で、data()メソッドの返り値とする必要があります。 ここでは、カウンタ用のcountを宣言します。 data() { return { count: 0 }; }, これで、テンプレートの中で、countを利…

Vue を触ってみる

Vue CLI で作ったプロジェクトのファイルを見てみよう カスタマイズしてみる Vue CLI で作ったプロジェクトのファイルを見てみよう まずは、main.jsを見てみましょう。 import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') createApp() は、Vueのインスタンスを作成することで、Vueのアプリケーションが始まります。 App.vueをインポートして、mount()してますので、App.vueを見てみます。 <template> <img alt="…