[Vue.js] 2. データとイベントのディレクティブ

<script setup lang="ts">
import { ref } from 'vue'

const url = ref('https://vuejs.org/')
</script>

<template>
  <p><a v-bind:href="url" target="_blank">Vue.jsのサイト</a></p>
  <p><a :href="url" target="_blank">Vue.jsのサイト(省略系)</a></p>
  <p><a v-bind:href="url + 'guide/introduction.html'" target="_blank">Vue.jsガイドのページ</a></p>
</template>

v-bind:△△="〇〇"
要素の△△属性の値として、テンプレート変数〇〇の値を設定

:href="url"

v-bind:href="url + 'guide/intoroduction.html'"

<script setup lang="ts">
import { ref } from 'vue'

const isSendButtonDisabled = ref(true)
</script>

<template>
  <p><button type="button" v-bind:disabled="isSendButtonDisabled">送信</button></p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const widthOrHeight = ref('height')
const widthOrHeightValue = ref(100)
</script>

<template>
  <p><img alt="VueLogo" src="./assets/logo.svg" v-bind:[widthOrHeight]="widthOrHeightValue" /></p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const imgAttributes = ref({
  src: '/images/logo.svg',
  alt: 'Vueのロゴ',
  width: 75,
  height: 75,
})
</script>

<template>
  <p><img v-bind:="imgAttributes" /></p>
  <p><img v-bind="imgAttributes" title="ロゴです！" /></p>
  <p><img v-bind="imgAttributes" alt="ロゴです！" /></p>
</template>

style="color: whit; background-color: black;"

<script setup lang="ts">
import { ref, computed } from 'vue'

const msg = ref('こんにちは！世界')
const msgTextRed = ref('red')
const msgTextColor = ref('white')
const msgBgColor = ref('black')

const msgStyles = ref({ color: 'white', backgroundColor: 'black' })
const msgStyles2 = ref({ fontSize: '24pt' })
const msgStyles3 = ref({ color: 'pink', fontSize: '24pt' })

const textSize = computed((): string => {
  const size = Math.round(Math.random() * 25) + 10
  return `${size}pt`
})
</script>

<template>
  <p v-bind:style="{ color: msgTextRed }">1:{{ msg }}</p>
  <p v-bind:style="{ color: 'pink' }">2:{{ msg }}</p>
  <p v-bind:style="{ fontSize: textSize }">3:{{ msg }}</p>
  <p v-bind:style="{ color: msgTextColor, backgroundColor: msgBgColor }">4:{{ msg }}</p>
  <p v-bind:style="{ color: msgTextColor, 'background-color': msgBgColor }">5:{{ msg }}</p>
  <p v-bind:style="msgStyles">6:{{ msg }}</p>
  <p v-bind:style="[msgStyles, msgStyles2]">7:{{ msg }}</p>
  <p v-bind:style="[msgStyles, msgStyles3]">8:{{ msg }}</p>
  <p v-bind:style="[msgStyles3, msgStyles]">9:{{ msg }}</p>
</template>

v-bind:style="{color: msgTextRed}"

v-bind:style="{color: msgTextColor, backgroundColor: msgBgColor}"

v-bind:style="{スタイルプロパティ: 値, ・・・}"

v-bind:style="{cokor: msgTextColor, 'background-color': msgBgColor}"

const msgStyles = ref({ color: 'white', backgroundColor: 'black' })

 v-bind:style="msgStyles"

const msgStyles = ref({ color: 'white', backgroundColor: 'black' })
const msgStyles2 = ref({ fontSize: '24pt' })
const msgStyles3 = ref({ color: 'pink', fontSize: '24pt' })

v-bind:style="[msgStyles, msgStyles2]"
v-bind:style="[msgStyles, msgStyles3]"

<script setup lang="ts">
import { ref, computed } from 'vue'

const msg = ref('こんにちは！世界')
const isTextColorRed = ref(true)
const isBgColorBlue = ref(false)

const styles = ref({ textColorRed: false, bgColorBlue: true })

const computedStyles = computed((): { textColorRed: boolean; bgColorBlue: boolean } => {
  // textColorRed用
  const randText = Math.round(Math.random())
  let textColorFlg = true
  if (randText == 0) {
    textColorFlg = false
  }

  // bgColorBlue用
  const randBg = Math.round(Math.random())
  let bgColorFlg = true
  if (randBg == 0) {
    bgColorFlg = false
  }

  return {
    textColorRed: textColorFlg,
    bgColorBlue: bgColorFlg,
  }
})
</script>

<template>
  <p v-bind:class="{ textColorRed: true, bgColorBlue: true }">{{ msg }}</p>
  <p v-bind:class="{ textColorRed: isTextColorRed, bgColorBlue: isBgColorBlue }">{{ msg }}</p>
  <p v-bind:class="{ textColorPink: true }">{{ msg }}</p>
  <p v-bind:class="{ 'text-color-pink': true }">{{ msg }}</p>
  <p class="textSize24" v-bind:class="{ textColorRed: isTextColorRed, bgColorBlue: isBgColorBlue }">
    {{ msg }}
  </p>
  <p class="textSize24" v-bind:class="styles">{{ msg }}</p>
  <p v-bind:class="computedStyles">{{ msg }}</p>
</template>

<style>
.textColorRed {
  color: red;
}
.text-color-pink {
  color: pink;
}
.bgColorBlue {
  background-color: blue;
}
.textSize24 {
  font-size: 24px;
}
</style>

v-bind:class="{ textColorRed: true, bgColorBlue: true }"

v-bind:class="{スタイルクラス名: true/false, ・・・}"

v-bind:class="{ textColorRed: isTextColorRed, bgColorBlue: isBgColorBlue }"

v-bind:class="{ 'text-color-pink': true }"

.text-color-pink {
  color: pink;
}

class="textSize24" v-bind:class="{ textColorRed: isTextColorRed, bgColorBlue: isBgColorBlue }"

const styles = ref({ textColorRed: false, bgColorBlue: true })

v-bind:class="styles"

const computedStyles = computed((): { textColorRed: boolean; bgColorBlue: boolean } => {
  // textColorRed用
  const randText = Math.round(Math.random())
  let textColorFlg = true
  if (randText == 0) {
    textColorFlg = false
  }

  // bgColorBlue用
  const randBg = Math.round(Math.random())
  let bgColorFlg = true
  if (randBg == 0) {
    bgColorFlg = false
  }

  return {
    textColorRed: textColorFlg,
    bgColorBlue: bgColorFlg,
  }
})

v-bind:class="computedStyles"

(): { textColorRed: boolean; bgColorBlue: boolean }

{ プロパティ名: データ型; ・・・}

<script setup lang="ts">
import { ref } from 'vue'

const randValue = ref('まだです')

const onButtonClick = (): void => {
  const rand = Math.round(Math.random() * 10)
  randValue.value = String(rand)
}
</script>

<template>
  <section>
    <button v-on:click="onButtonClick">クリック！</button>
    <p>クリックの結果: {{ randValue }}</p>
  </section>
</template>

v-on:イベント名="イベント発生時に実行するメソッド名"

const メソッド名 = (): void => {
  処理内容
}

<button @click="onButtonClick">クリック!</button>

<script setup lang="ts">
import { ref } from 'vue'

const mousePointerX = ref(0)
const mousePointerY = ref(0)

const onImgMousemove = (event: MouseEvent): void => {
  mousePointerX.value = event.offsetX
  mousePointerY.value = event.offsetY
}
</script>

<template>
  <section>
    <img src="./assets/logo.svg" alt="Vueのロゴ" width="200" v-on:mousemove="onImgMousemove" />
    <p>ポインタの位置: x={{ mousePointerX }}; y={{ mousePointerY }}</p>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const pBgColor = ref('white')

const onPClick = (bgColor: string): void => {
  pBgColor.value = bgColor
}
</script>

<template>
  <p v-on:click="onPClick('red')" v-bind:style="{ backgroundColor: pBgColor }">
    ここをクリックすると背景色が変わります。
  </p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const pMsg = ref('イベント前(ここをクリック！)')
const pBgColorEvent = ref('white')

const onPClickWithEvent = (bgColor: string, event: MouseEvent): void => {
  pBgColorEvent.value = bgColor
  pMsg.value = event.timeStamp.toString()
}
</script>

<template>
  <p
    v-on:click="onPClickWithEvent('green', $event)"
    v-bind:style="{ backgroundColor: pBgColorEvent }"
  >
    {{ pMsg }}
  </p>
</template>

v-on:click="onPClickWithEvent('green', $event)"

<script setup lang="ts">
import { ref } from 'vue'

const msg = ref('未送信')

const onFormSubmit = (): void => {
  msg.value = '送信されました。'
}
</script>

<template>
  <form action="#" v-on:submit.prevent="onFormSubmit">
    <input type="text" required />
    <button type="submit">送信</button>
  </form>
  <p>{{ msg }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const msg = ref('まだです！')

const onEnterKey = (): void => {
  msg.value = 'エンターキーが押下されました。'
}

const OnRightButtonClick = (): void => {
  msg.value = 'ボタンが右クリックされました。'
}

const onShiftclick = (): void => {
  msg.value = 'シフトを押しながらクリックされました。'
}
</script>

<template>
  <p>{{ msg }}</p>
  <input type="text" v-on:keydown.enter="onEnterKey" /><br />
  <button v-on:click.right="OnRightButtonClick">右クリック</button><br />
  <button v-on:click.shift="onShiftclick">シフトを押しながらクリック</button><br />
</template>

v-on:keydown.q="・・・"

v-on:keydown.enter.exact="onEnterKey"