ディレクティブ

*ディレクティブとはhtml属性に記述する特別な処理を行うもの

例

v-bind
v-if
v-show
v-for
v-on
v-model

1.v-bind

前提条件

前提として、htmlの属性には,value={{ }}のようなマスタッシュ構文は使えません

使い方

＊input要素の中に入れる値を入れる
1.v-bind:属性名 = '変数名'

<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>

const app = Vue.createApp({
  data:()=>({
    messeage:"メッセージ呼ばれました",
  })
})
app.mount('#app')

2.v-if

1.真嘘値がTRUEであればその属性が表示される
2.JSの方で真嘘値の中身だけ設定してあげれば、表示、非表示の条件分岐が簡単に行われる

使い方

1.v-bindの時のように。属性を指定してあげる
こんな感じ
<p v-if='変数名'>HELLO</p>
変数:trueまたはfalse

<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
  <p v-if='toggle'>HELLO</p>
</div>

const app = Vue.createApp({
  data:()=>({
    messeage:"メッセージ呼ばれました",
    toggle:true
  })
})
app.mount('#app')

true→表示
false→非表示となる

3.v-for（配列）

目的

配列を順番に表示させたい時

書き方

<p v-for='変数 in 配列'>{{ 変数 }}</p>
＊表示させるのは『変数』であるので{{ }}に入れるのを間違えないようにする

html

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

js

const app = Vue.createApp({
  data:()=>({
    address:["神奈川","川崎","新百合ヶ丘"],
    toggle:true
  })
})
app.mount('#app')

→こんな感じで表示されます。

4.v-for（オブジェクト）

目的

オブジェクトを順番に表示させたい時

書き方

<p v-for='(キー,バリュー in 配列')>{{ キー }}:{{バリュー}}</p>
*属性値の1番目がキー
*属性値の2番目がバリュー
注意！()を忘れない

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

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

→こんな感じで表示されます。

5.v-onを使ってイベントハンドラ

前提条件

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

書き方

v-on:click="関数名"

<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
  <button v-on:click="onClick">ここをクリック</button>
</div>

methodなし

const app = Vue.createApp({
  data:()=>({
    onClick:function(){
        console.log("ああああ")
    }
  })
})
app.mount('#app')

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

})
app.mount('#app')

1.ボタンを押すと、、？

2.表示されました

少し応用する

1.変更前の値を{{ 変数 }}で囲んでおく
2.変更後の値をmethod関数で作成する

<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
  <button v-on:click="onClick">{{ now }}</button>
</div>

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と併用することが多い

<div id="app">
  <input type="text" v-model="message"> 
  <input type="text" v-model="message"> 
  {{ $data }}　
//$dataを使うと、リアルタイムでjsのコードが変更されているのがわかる
</div>

const app = Vue.createApp({
  data: () => ({
    message: 'Hello Vue.js!'
  })
})
app.mount('#app')