Vueに関する記事

Nuxt,TypeScript

Thumbnail of post image 125
今回は入門者必見のnuxt.config.tsの説明の紹介です。 nuxt.config.tsとは? nuxt.config.tsは、Nuxt.jsプロジェクト全体の設定を記述するためのファイルです。このファイルでは、アプリケーションの動作に関わる重要な設定(モジュール、環境変数 ...

Nuxt

Thumbnail of post image 101
Nuxt.js(ナクスト)は、Vue.js をベースにしたフレームワークで、サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)を簡単に実装できる強力なツールです。Nuxt.js は、Vue.js のアプリケーション開発を効率化し、SEO に優れたウェブサイトやアプリケ ...

Vue2

Thumbnail of post image 101
今回はvue.jsでclickイベントで発火のさせ方についてです。vueでは「@click」と「v-on:click」の二つがクリックイベントがあります。どちらの構文も同じ動作を持つため、使用するのは好みの問題です。通常、@click の方が短くて直感的であり、一般的によく使用さ ...

Vue2

Thumbnail of post image 024
今回はVueの@submitの紹介です。 @submitとは? @submitは、formがsubmitされたときに呼び出されるカスタムイベントハンドラーです。 @submitを使ったPOSTの例 submitの例では、ボタンを押下時にinputの値をバリデーションチェックを行い ...

Vue2

Thumbnail of post image 053
今回はVueのファイル構造の紹介です。 ファイル構造 vue-project/ ├── public/ │ ├── index.html │ └── favicon.ico ├── src/ │ ├── assets/ │ │ └── logo.png │ ├── compone ...

Nuxt

Thumbnail of post image 152
今回はnuxtのプロジェクト作成の紹介です。「npx nuxi@latest init」を使ってのプロジェクトを作成していきます。 Nuxt.jsとは? Nuxt.jsは、Vue.jsフレームワークをベースにしたJavaScriptのフレームワークです。Nuxt.jsはVue.j ...

Nuxt

Thumbnail of post image 082
今回はnuxt.jsのプロジェクト作成の紹介です。npx create-nuxt-appコマンドを使ってプロジェクトの作成を行なっていきます。 Nuxt.jsとは? Nuxt.jsは、Vue.jsフレームワークをベースにしたJavaScriptのフレームワークです。Nuxt.js ...

Vue2

Thumbnail of post image 076
今回はradioについての紹介です。 type="radio"とは? type="radio"は、HTMLのinput要素の属性の一つで、その入力フィールドがラジオボタンであることを指定します。ラジオボタンは、複数の選択肢からユーザーが1つだけ選択できるような UI コンポーネン ...

Vue2

Thumbnail of post image 096
今回はvueのselectの実装の紹介です。 selectの例文 selectを変更するとvalueとindexが表示される例文です。 <template> <div> <label for="fruitSelect">お気 ...

Vue2

Thumbnail of post image 180
今回は最初に呼ばれるapp.vueファイルを編集の紹介です。 最初に呼ばれるmain.jsファイル(main.ts) main.ts import './assets/main.css' import { createApp } from 'vue ...