Vueの勉強を始めていますが用語がちゃんと覚えれていないのと、書いてる最中に迷走し始めるので自分用にまとめました。

About

この記事は公式を参考にVue3の書き方をまとめてます

当方は...

バニラJSもなんちゃって感が半端ないレベル
Vue入門〜初級レベル（あまり仕事で使う機会なかった）

そんな人間が書いているので用語まとめのクセに
意味間違えてる可能性大

vueアプリケーション（アプリ）

今から作ろうとしている動的要素
vueインスタンスを通して展開されていく

Vueインスタンス

app.vue

// 書き方1
const app = Vue.createApp({
    //- ここにoptionsが入る
})

// 書き方2
inport { createApp } from 'vue'

const app = createApp({
    //- ここにoptionsが入る
})

Vue.createAppメソッドの戻り値はVueインスタンス
Vueインスタンスは変数のところに入る
変数名appは何を入れてもOK

app(application)やvm(ViewModel)が一般的によく使われる。

複数アプリをインスタンスする

app.vue

inport { createApp } from 'vue'

const app = createApp({
    //- ここにoptionsが入る
})
app.mount('#app')

const main = createApp({
    //- ここにoptionsが入る
})
main.mount('#app2')

const app2 = createApp({
    //- ここにoptionsが入る
}).mount('#top')

Vueのテンプレートとは（マウント）

htmlベースのtemplate構文を使用した記述
VMCのViewに相当する
一番上のid内がテンプレートとなる（ここがルート）

index.html

<div id="app">
    // このidがテンプレートのルート天辺になる
    // このルート内
</div>

マウントしないとvueが使えないのでapp.vueにmountメソッドを呼び出す必要がある

app.vue

const app = Vue.createApp({
    //- ここにoptionsが入る
})
+ app.mount('#app')

もしくはチェーンにしてつなげる書き方でもOK

app.vue

const app = Vue.createApp({
    //- ここにoptionsが入る
- })
+ }).mount('#app')

データバインディング

vueアプリケーションで表示したい内容を
dataオプションで用意してテンプレート側が受け取り表示させる...
この一連の動作を「データバインディング」という。

データと描画を同期する
データで扱う内容は全てリアクティブデータとして定義する必要がある

リアクティブ（反応的）データ

各要素をつなげて変化させる（動的に自動で更新させるみたいな）

リアクティブデータを使うためにはdata（値を格納する）オブジェクトが必要になる

双方向データバインディング

dataオブジェクトの値：変更
↑↓
テンプレートの値：変更

一方通行の変更ではなく
どちらの変更も柔軟に対応できる動き

vue側からhtmlの値を変更できるだけでなく
html側の値変更をvue側に渡すこともできるということ

dataオプションとオブジェクト

値を格納したのがオブジェクト
配列[]も扱えるのでjsonみたいな雰囲気で使える
複数の動作を扱う場合は「,」カンマで区切る

テキストを配置してみた例

app.vue

const app = Vue.createApp({
+  data: () => ({
+    title: '銀河鉄道の夜'
+   })
}).mount('#app')

index.html

<div id="app">
+  <p>{{ title }}</p>
</div>

このpタグに「銀河鉄道の夜」が表示されます。
テキストであればマスタッシュ構文{{ }}で展開できる。

ここまでの動き

配列なども入れてみた例

See the Pen Vueまとめ by aya (@orange2929) on CodePen.

ディレクティブ（directive）

何らかの動的指示を出す。JSらしいあれ
v-で始まるあれ（属性）

よく使うイベント一覧

v-bind
v-if：if文
v-for：for文
v-show：要素の表示
v-on：クリック回りとかでよく使う
v-model

v-bind

html内の属性値にはそのままマスタッシュ構文が使えないので、v-bindを使ってデータバインディングする必要がある

index.html

<!-- 通常の書き方 -->
<要素 v-bind:属性></要素>
<!-- 省略した書き方 -->
<要素 :属性></要素>

app.vue

const app = Vue.createApp({
   data: () => ({
+    属性: '値'
   }),
}).mount('#app')

v-if

言わずもがなif文まま

on/offの切り替えとかで活躍

index.html

<要素 v-if="オブジェクト"></要素>

app.vue

const app = Vue.createApp({
   data: () => ({
+    オブジェクト: '値'
   }),
}).mount('#app')

v-for

言わずもがなfor文

繰り返しの取得とかで活躍

forはよく使うので、構文をはっきり覚えていないと事故る
vueでややこしくなる事案はここだと思っている

index.html

<!-- 書き方1 -->
<要素 v-for="値 in オブジェクト">
    {{ 表示したい値 }}
</要素>
<!-- 書き方2：より詳しく回したい時 -->
<要素 v-for="(値,キー) in オブジェクト">
    {{ 表示したい値かキー }}
</要素>

値(value)=エイリアス名ともいい換えられる

オブジェクトに入る配列などを複数形に、
値などを単数形で書き分けられることが多い

v-show

v-on

ボタンクリックとかでよく使っているイメージ

index.html

<要素 v-on:イベント名="メソッド名">
    {{ プロパティ名 }}
</要素>

app.vue

const app = Vue.createApp({
   data: () => ({
+    プロパティ名: '初期値'
+   }),
+   methods: {
+    メソッド名: finction(){
+      // ここに実行する動きを追加
+    }
+   }
}).mount('#app')

v-model

双方向データバインディングはこれ

input要素とかでよく使う

index.html

<要素 v-model="オブジェクト名"></要素>

app.vue

const app = Vue.createApp({
   data: () => ({
+    オブジェクト名: '値'
   }),
}).mount('#app')

methodsオプション

Domイベントから呼び出したい記述を書いていく

function(){}を使っていく
methods内のfunctionで使われるthisはdataオプションのオブジェクトを指す

app.vue

const app = Vue.createApp({
   data: () => ({

   }),
+   methods: {
+    メソッド名: function(){
+      // ここに実行するイベントの動き
+    }
+   }
}).mount('#app')

index.html

<要素>{{ メソッド名() }}</要素>

算出プロパティ（computed）

関数で算出したデータを返せる

キャッシュあり

app.vue

const app = Vue.createApp({
   data: () => ({

   }),
+   computed: {
+    プロパティ名: function(){
+      // ここに実行するイベントの動き
+    }
+   }
}).mount('#app')

index.html

<要素>{{ プロパティ名 }}</要素>

データオブジェクトと似たような雰囲気。

コンポーネントの作り方

Vue.component(名前,定義内容)

app.vue

const app = Vue.createApp({
   data: () => ({

   }),
   methods: {
    }
   }
}).mount('#app')

+ app.compornent('コンポーネント名',{
+   template: '表示内容'
+ })

index.html

<コンポーネント名></コンポーネント名>

ルートコンポーネント

単一でコンポーネント管理しているなら
こんな感じでまとめれる

main.js

import { createApp } from 'vue'
+ import App from './App.vue'

+ const app = createApp(App)