ディレクティブ
*ディレクティブとは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>
＊表示させるのは『変数』であるので{{ }}に入れるのを間違えないようにする
<div id="app">
<p v-for='add in address'>{{ add }}</p>
</div>
const app = Vue.createApp({
data:()=>({
address:["神奈川","川崎","新百合ヶ丘"],
toggle:true
})
})
app.mount('#app')
→こんな感じで表示されます。
4.v-for（オブジェクト）
目的
オブジェクトを順番に表示させたい時
書き方
<p v-for='(キー,バリュー in 配列')>{{ キー }}:{{バリュー}}</p>
*属性値の1番目がキー
*属性値の2番目がバリュー
注意！()を忘れない
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
<p v-for='(key,value) in statuses'>{{ key }}：{{ value }}</p>
</div>
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>
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')