Vue.jsの ディレクティブについて(はじめてのVue.js3入門13-29学習内容)

# ディレクティブ
*ディレクティブとはhtml属性に記述する特別な処理を行うもの
### 例
v-bind
v-if
v-show
v-for
v-on
v-model

## 1.v-bind 
### 前提条件
前提として、htmlの属性には,value={{ }}のようなマスタッシュ構文は使えません
### 使い方
＊input要素の中に入れる値を入れる
1.v-bind:属性名 = '変数名'
```html
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
 // ダメ   
  <input type="text" value = {{ messeage }} >
 // OK
　<input type="text" v-bind:value = 'messeage' >
</div>
```
```js
const app = Vue.createApp({
  data:()=>({
    messeage:"メッセージ呼ばれました",
  })
})
app.mount('#app')
```
![スクリーンショット 2022-09-14 12.37.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/4c2e1747-eb10-bffc-b82a-465659f0a389.png)

## 2.v-if
1.真嘘値がTRUEであればその属性が表示される
2.JSの方で真嘘値の中身だけ設定してあげれば、表示、非表示の条件分岐が簡単に行われる
### 使い方
1.v-bindの時のように。属性を指定してあげる
こんな感じ
```<p v-if='変数名'>HELLO</p>```
```変数:trueまたはfalse```

```html
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
  <p v-if='toggle'>HELLO</p>
</div>
```
```js
const app = Vue.createApp({
  data:()=>({
    messeage:"メッセージ呼ばれました",
    toggle:true
  })
})
app.mount('#app')
```
true→表示
false→非表示となる

## 3.v-for（配列）
### 目的
配列を順番に表示させたい時
### 書き方
`<p v-for='変数 in 配列'>{{ 変数 }}</p>`
＊表示させるのは『変数』であるので{{ }}に入れるのを間違えないようにする

```js:html
<div id="app">
  <p v-for='add in address'>{{ add }}</p>
</div>
```

```js:js
const app = Vue.createApp({
  data:()=>({
    address:["神奈川","川崎","新百合ヶ丘"],
    toggle:true
  })
})
app.mount('#app')
```
![スクリーンショット 2022-09-14 14.25.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/79288d07-25a3-0abb-9b60-2df6df397c96.png)
→こんな感じで表示されます。

## 4.v-for（オブジェクト）
### 目的
オブジェクトを順番に表示させたい時
### 書き方
`<p v-for='(キー,バリュー in 配列')>{{ キー }}:{{バリュー}}</p>`
*属性値の1番目がキー
*属性値の2番目がバリュー
注意！()を忘れない
```js:html
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
  <p v-for='(key,value) in statuses'>{{ key }}：{{ value }}</p>
</div>
```

```js:js
const app = Vue.createApp({
  data:()=>({
    statuses:{height:165,weight:85},
    toggle:true
  })
})
app.mount('#app')

```
![スクリーンショット 2022-09-14 14.25.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/79288d07-25a3-0abb-9b60-2df6df397c96.png)
→こんな感じで表示されます。

## 5.v-onを使ってイベントハンドラ
### 前提条件
今までは、コードを記述した時点で、値が変更したり関数が実行されていた
今度は、使う人が何かをしたらイベントが実行される。それをイベントハンドラという。
例
1.ボタンをクリックする
2.一定のところまでドラックする
3.ホバーする
などなど、、

### 書き方
`v-on:click="関数名"`
```html
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
  <button v-on:click="onClick">ここをクリック</button>
</div>
```
```js:methodなし
const app = Vue.createApp({
  data:()=>({
    onClick:function(){
        console.log("ああああ")
    }
  })
})
app.mount('#app')
```

``` js
const app = Vue.createApp({
  data:()=>({
    }),
    methods:{
      onClick:function(){
        console.log("表示されました")
      }
    }

})
app.mount('#app')
```

1.ボタンを押すと、、？
![スクリーンショット 2022-09-14 15.19.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/1d56a646-51e5-69a6-39fe-e558ed59133e.png)
2.表示されました
![スクリーンショット 2022-09-14 15.20.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/3e7b23f7-f490-9d0c-b647-362a3671a72a.png)
### 少し応用する
1.変更前の値を{{ 変数 }}で囲んでおく
2.変更後の値をmethod関数で作成する
```html
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
  <button v-on:click="onClick">{{ now }}</button>
</div>
```
```js
const app = Vue.createApp({
  data:()=>({
    now:"ここをクリック"
    }),
    methods:{
      onClick:function(){
        // thisはオブジェクトを指している
        this.now = "表示されました"
      }
    }
})
app.mount('#app')
```

## 6.v-model 双方向データバインディング
### 前提条件
ここでいう双方向とは？
1.htmlファイル
2.jsファイル
この両方向のことをいいます。
今までは
jsファイルの変数を変更→html上の値が変更されていましたが
html上の値→jsファイルの変数を変更
→この動きを同時に行うことができる
ちなみにJSだけでもできるとのことですが、めちゃくちゃめんどくさそうです
https://tagsqa.com/detail/73370
### 書き方
1.v-model="変数"
2.以下のようにinputと併用することが多い
<input type="text" v-model="message"> 
```html
<div id="app">
  <input type="text" v-model="message"> 
  <input type="text" v-model="message"> 
  {{ $data }}　
//$dataを使うと、リアルタイムでjsのコードが変更されているのがわかる
</div>
```
```js
const app = Vue.createApp({
  data: () => ({
    message: 'Hello Vue.js!'
  })
})
app.mount('#app')
```