Vueの用語と書き方まとめ【入門レベル】

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

### About
この記事は[公式](https://ja.vuejs.org/)を参考にVue3の書き方をまとめてます


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

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


## vueアプリケーション（アプリ）
今から作ろうとしている動的要素
vueインスタンスを通して展開されていく

## Vueインスタンス
~~~js:app.vue
// 書き方1
const app = Vue.createApp({
    //- ここにoptionsが入る
})

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

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

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

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

## 複数アプリをインスタンスする
~~~js: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内がテンプレートとなる（ここがルート）


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

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

~~~diff_vue:app.vue
const app = Vue.createApp({
    //- ここにoptionsが入る
})
+ app.mount('#app')
~~~
もしくはチェーンにしてつなげる書き方でもOK
~~~diff_vue:app.vue
const app = Vue.createApp({
    //- ここにoptionsが入る
- })
+ }).mount('#app')
~~~

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

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

### リアクティブ（反応的）データ
各要素をつなげて変化させる（動的に自動で更新させるみたいな）

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

### 双方向データバインディング
```
dataオブジェクトの値：変更
↑↓
テンプレートの値：変更
```
一方通行の変更ではなく
どちらの変更も柔軟に対応できる動き

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


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

### テキストを配置してみた例
~~~diff_vue:app.vue
const app = Vue.createApp({
+  data: () => ({
+    title: '銀河鉄道の夜'
+   })
}).mount('#app')
~~~


~~~diff_html:index.html
<div id="app">
+  <p>{{ title }}</p>
</div>
~~~

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

### ここまでの動き
配列なども入れてみた例
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="gOjvoyy" data-user="orange2929" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/orange2929/pen/gOjvoyy">
  Vueまとめ</a> by aya (<a href="https://codepen.io/orange2929">@orange2929</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## ディレクティブ（directive）
何らかの動的指示を出す。JSらしいあれ
`v-`で始まるあれ（属性）

### よく使うイベント一覧
- v-bind
- v-if：if文
- v-for：for文
- v-show：要素の表示
- v-on：クリック回りとかでよく使う
- v-model

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

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

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


## v-if
言わずもがなif文まま
- on/offの切り替えとかで活躍


```html:index.html
<要素 v-if="オブジェクト"></要素>
```

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


## v-for
言わずもがなfor文
- 繰り返しの取得とかで活躍

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


```html:index.html
<!-- 書き方1 -->
<要素 v-for="値 in オブジェクト">
    {{ 表示したい値 }}
</要素>
<!-- 書き方2：より詳しく回したい時 -->
<要素 v-for="(値,キー) in オブジェクト">
    {{ 表示したい値かキー }}
</要素>
```
値(value)=エイリアス名ともいい換えられる

:::note 
オブジェクトに入る配列などを**複数形**に、
値などを**単数形**で書き分けられることが多い
:::
 
## v-show
## v-on
ボタンクリックとかでよく使っているイメージ

```html:index.html
<要素 v-on:イベント名="メソッド名">
    {{ プロパティ名 }}
</要素>
```
~~~diff_vue:app.vue
const app = Vue.createApp({
   data: () => ({
+    プロパティ名: '初期値'
+   }),
+   methods: {
+    メソッド名: finction(){
+      // ここに実行する動きを追加
+    }
+   }
}).mount('#app')
~~~


## v-model
双方向データバインディングはこれ

- input要素とかでよく使う

```html:index.html
<要素 v-model="オブジェクト名"></要素>
```

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



## methodsオプション

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

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

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

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

## 算出プロパティ（computed）
関数で算出したデータを返せる

:::note warn
キャッシュあり
:::

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

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

```html:index.html
<要素>{{ プロパティ名 }}</要素>
```

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


## コンポーネントの作り方

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

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

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

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

```html:index.html
<コンポーネント名></コンポーネント名>
```


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

~~~diff_vue:main.js
import { createApp } from 'vue'
+ import App from './App.vue'

+ const app = createApp(App)
~~~