Vue.js v2の基本操作まとめ

2021年5月6日Vue.js

Vue.jsの基本操作についてまとめました。

Vue.jsの基本操作まとめ

v-on

v-onは@で省略可能です。

See the Pen
v-on:click by Sosak (@Sosak2021)
on CodePen.

v-ifとv-show

v-ifはDOMを完全に削除、v-showはdisplay:noneという違いがあります。
トグルしたい場合、リバースするために!をつけます。

See the Pen
v-ifとv-show by Sosak (@Sosak2021)
on CodePen.

マウスイベント

See the Pen
mouse events by Sosak (@Sosak2021)
on CodePen.

v-forとv-bindとtoggle

v-bindを使うことでクラスの付け外しが簡単にできるようになります。

See the Pen
v-forとtoggle by Sosak (@Sosak2021)
on CodePen.

v-forとcomputedとfilter

isFavがtrueのもののみを表示したいという場合、次のようにcomputedを使うと簡単に操作できます。

See the Pen
v-forとcomputedとfilter by Sosak (@Sosak2021)
on CodePen.

$refsとinputフィールド

  • inputタグの選択方法
  • $refsの使い方
  • clickでクラスを付与する方法
  • clickでfocusする方法

です。

See the Pen
$refsとinputフィールド by Sosak (@Sosak2021)
on CodePen.

Vueのプロジェクトを開始する

Githubに新規リポジトリを追加して新しいプロジェクトを開始します。
やり方は、Githubに新規リポジトリを追加して新しいプロジェクトを開始する手順を参考にしてください。

ターミナルで次のようにして、プロジェクトを作成します。

  1. cd ディレクトリ名

    でルートディレクトリに移動する

  2. 
vue create プロジェクト名

    と入力する

  3. Manually select featuresを選択する
  4. Routerが必要ならspaceで*マークをいれる
  5. Vue.jsのバージョンを選択する
  6. history modeはyes
  7. Babelなどの置場所はIn dedicated config filesを選択する
  8. presetにするか？はno

でプロジェクトを作成します。

ERROR ~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode.

vue create プロジェクト名

と入力して、

ERROR  ~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode.

とエラーがでる場合、

npm install -g @vue/cli

と入力して、再度インストールし直しましょう。

Vue.js

Posted by devsakaso