Vue.jsの基本 (はじめてのVue.js3入門1-13学習内容)

# 最低限やること
## 1.Vueの読み込み
### Vueを使えるようにするためにする方法4つ
#### 以下4種類
1.CDN webコンテンツを配信するために最適化されたネットワークのこと
2.直接読み込み
3.NPM（パッケージ管理ソフトの利用）
4.VueCLI

今回は以下で
### CDN　webコンテンツを配信するために最適化されたネットワークのこと
```javascript
<script src="https://unpkg.com/vue@3.1.5"></script>
```
1.指定のバージョンに確認する
2.@以下がバージョン名になる。

#### おまけ　バージョンの確認方法
```javascript:jsファイル内
Vue.version
```
## 2.インスタンスの生成

```
const app = Vue.createApp(
{
  //このインスタンスの中に処理を記述していく。
})
```
### 3.　2.のインスタンスを適用していく（マウントする）
```javascript
app.mount('#app')
```
```おまけ　2をくっつけてマウントすることもできる（マウントする）
const app = Vue.createApp(
{
  // options
}).mount('#app')
```
# Vue変数を使って値を表示できるようにする
## フロー
<html側>
1.Vueが適応される範囲をIDでかこむ
2.表示させたい変数を{{ }}で囲む
<Vue側>
1.インスタンスを作成
   *1-1:Vue.createApp({}}
   *1-2:1-1の中にdata:()をアロー関数で囲む
   *1-3:messeage:"表示させたいもの"
2.インスタンスをマウントする
<tips>
1.dataは必ずdataと記述しないとダメ
2.messeageはhtmlの{{ }}内での変数名さえあってれば問題ない
## 例
```html
<div id="app">
  <p>{{ message }}</p>
</div>
{{ message }} <-- id外には書かない >
```
```javascript
const app = Vue.createApp({
  data:()=>({
    message:"helloVuejs"
  })
})
app.mount('#app')
```


###　問題1 VueJsを使ってこんにちはと表示させよう

## オブジェクト/配列/関数の設定方法
### フロー
#### html側
1.Vueが適応される範囲をIDでかこむ
2.表示させたい変数を{{ }}で囲む
//　↑ここまでは同じ
3.アクセス（呼び出す）
☆配列
   *{{ address[番号] }}
☆オブジェクト
   *{{ status.キー名 }}
☆関数
   *func　関数自体が表示される
   *func()　関数が実行され、return値となる
#### Vue側 
1.インスタンスを作成
   *1-1:Vue.createApp({}}
   *1-2:1-1の中にdata:()をアロー関数で囲む
//　↑ここまでは同じ
☆配列
   *address:["神奈川","川崎","新百合ヶ丘"],
☆オブジェクト
   *status:{height:164,weight:85}
☆関数
   *func:function(){ //関数}
2.インスタンスをマウントする

```html
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
  <p>{{ messge }}</p>
  
  <p>{{ status.height }}</p>
  <p>{{ status.weight }}</p>
  
  <p>{{ address[0] }}</p>
  <p>{{ address[1] }}</p>
  <p>{{ address[2] }}</p>
  
  <p>{{ func }}</p>
  <p>{{ func() }}</p>
</div>


```
```javascript
const app = Vue.createApp({
  data:()=>({
    messge:"helloVuejs",
    address:["神奈川","川崎","新百合ヶ丘"],
    status:{height:164,weight:85},
    func:function(){ return 100}
  })
})
app.mount('#app')

```
###　問題2 関数,メッセージ、住所を表示させましょう

# よくあるエラー集
#### 1.ID違い
```html:IDをわざと間違える
<div id="ap">
  <p>{{ messge }}</p>
</div>
```
```js
const app = Vue.createApp({
  data:()=>({
    messge:"helloVuejs",
  })
})
app.mount('#app')

```
#### 1.ID違い
```html:IDをわざと間違える
<div id="ap">
  <p>{{ messge }}</p>
</div>
```
```js
const app = Vue.createApp({
  data:()=>({
    messge:"helloVuejs",
  })
})
app.mount('#app')

```
*mountの引数がnullで返されます
![スクリーンショット 2022-09-14 11.43.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/587ad9e7-0c42-e33f-8249-75753b994257.png)

#### 2.ID外に{{ }}を記述する
```html:{{}}
<div id="ap">
  
</div>
<p>{{ messge }}</p>
```
```js
const app = Vue.createApp({
  data:()=>({
    messge:"helloVuejs",
  })
})
app.mount('#app')

```
![スクリーンショット 2022-09-14 11.47.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/d3eb169c-aae5-3e0b-0c50-3274091890dc.png)
{{}}が画面にそのまま表示される
#### 3.マウント忘れ
```html:{{}}
<div id="ap">
  <p>{{ message }}</p>
</div>
```
```js
const app = Vue.createApp({
  data:()=>({
   message:"helloVuejs",
  })
})

```
→なにも起きません
# 単語
1.リアクティブ　値を変更したら式の答えも勝手に変わってくれる
2.ディレクティブ
html属性に記述する特別な処理を行うもの
例
v-bind
v-if
v-show
v-for
v-on
v-model