Vue2に関する記事

Vue2

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

Vue2

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

Vue2

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

Vue2

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

Vue2

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

Vue2

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

Vue2

Thumbnail of post image 042
今回はVue.jsの開発のローカルサーバーの変更方法の紹介です。 package.jsonを編集 "scripts": { "dev": "vite", "build": "run-p ty ...

Vue2

Thumbnail of post image 168
今回は@changeについての紹介です。 @changeとは? @changeは、特定のイベントが発生した際に呼び出されるイベントハンドラを指定するためのディレクティブです。Vue.jsではv-onディレクティブを使用してイベントを監視します。 v-onではなくv-modelでも ...

Vue2

Thumbnail of post image 133
今回はバインドとディレクティブの紹介です。 バインディングとは バインディング(Binding)とは、Vueなどのフロントエンドフレームワークやライブラリにおいて、データとUI(ユーザーインターフェース)を異なる要素やデータを結びつけることを指します。Vue.jsにおいては、デー ...

Vue2

Thumbnail of post image 188
今回は-bind v-on v-model v-for v-ifについての紹介です。 v-bindとは v-bind は、Vue.jsにおいてHTML属性に対してデータを動的にバインドするためのディレクティブです。v-bindを使用することで、変数を特定の値やオブジェクトに関連付 ...