【Vue.js】動作するコードで学ぶ！データバインディング・computed/watch・ライフサイクル

<script setup>
import { ref } from 'vue';

const text = ref('マスタッシュ');
const placeholderText = ref('プレースホルダー属性');
const selectOptions = ref({
'my-color': false,
'my-bold': false,
'my-bgcolor': false
});
const attrs = ref({
type: 'text',
value: '一括バインド',
readonly: true,
});
</script>

<template>
<div class="container">
  <h2>データバインディング</h2>
  <p>単なるテキスト表示：{{ text }}</p>
  <p>属性バインディング：
    <input type="text" :placeholder="placeholderText" />
  </p>
  <p>class属性バインディング：
    <span :class="selectOptions">適用するclassをキー、適用有無を示すbooleanを値とするオブジェクトをバインドします</span>
  </p>
  
  <template v-for="(val, key) in selectOptions" :key="key">
    <label>
      <input type="checkbox" v-model="selectOptions[key]" />
      {{ key }} : {{ val }}
    </label>
  </template>
  <br/>
  
  <div style="display: flex;">双方向バインディング：
    <input type="text" v-model="text" placeholder="入力してください" />
    <button @click="text=''">クリア</button>
  </div>
  <p>複数属性一括バインディング：
    <input v-bind="attrs" />
  </p>
</div>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}
input[type="text"] {
  width: 220px;
}
.my-color {
  color: #42b883;
}
.my-bold {
  font-weight: bold;
}
.my-bgcolor {
  background-color: #fff3bf;
}
</style>

<script setup>
import { ref, computed, watch } from 'vue';

const price = ref(3000);
const quantity = ref(1);
const message = ref(null);

// 商品小計
const subtotal = computed(() => price.value * quantity.value);
// 送料 (10,000円以上で無料、未満は500円)
const shippingFee = computed(() => subtotal.value >= 10000 ? 0 : 500);
// 総合計
const totalPrice = computed(() => subtotal.value + shippingFee.value);

// 送料の変化を監視して通知メッセージを設定
watch(shippingFee, (newFee, oldFee) => {
if (newFee === 0 && oldFee > 0) {
  message.value = '🎉 10,000円以上のお買い上げで送料無料になりました！';
} else if (newFee > 0 && oldFee === 0) {
  message.value = null;
}
})
</script>

<template>
<div class="container">
  <h2>算出プロパティ (computed) と 監視プロパティ (watch)</h2>

  <div class="form-group">
    <label>単価: <input type="number" v-model.number="price" step="500" /></label>
    <label>数量: <input type="number" v-model.number="quantity" min="1" /></label>
  </div>

  <!-- 監視プロパティによって設定される通知メッセージ -->
  <p v-if="message" class="toast">{{ message }}</p>

  <div class="result-box">
    <p>商品小計: {{ subtotal.toLocaleString() }} 円</p>
    <p>送料: {{ shippingFee }} 円</p>
    <hr />
    <p><strong>お支払い合計: {{ totalPrice.toLocaleString() }} 円</strong></p>
  </div>
</div>
</template>

<style scoped>
.container { display: flex; flex-direction: column; gap: 12px; }
.form-group { display: flex; gap: 12px; }
.toast { background: #e6f7ff; border: 1px solid #91d5ff; color: #0050b3; padding: 8px 12px; border-radius: 4px; margin: 0; }
.result-box { background: #f8f9fa; padding: 12px; border-radius: 6px; }
</style>

<script setup>
import { ref } from 'vue';
import LifecycleChild from './LifecycleChild.vue';

const showChild = ref(true);
const useKeepAlive = ref(true);
const logs = ref([]);

// 子からの emit を受けて親のログ配列に追加する関数
const handleLog = (message) => {
const time = new Date().toLocaleTimeString();
logs.value.unshift('[' + time + '] ' + message);
};

// ログ消去
const clearLogs = () => {
logs.value = [];
};
</script>

<template>
<div class="container">
  <h2>ライフサイクルフック</h2>

  <div class="controls">
    <label>
      <input type="checkbox" v-model="useKeepAlive" :disabled="showChild" />
      KeepAlive を有効にする (破棄せずキャッシュ)
    </label>
    <br />
    <button @click="showChild = !showChild">
      {{ showChild ? '表示をオフにする' : '表示をオンにする' }}
    </button>
  </div>

  <!-- KeepAlive 有効時 -->
  <KeepAlive v-if="useKeepAlive">
    <LifecycleChild v-if="showChild" @log="handleLog" />
  </KeepAlive>

  <!-- KeepAlive 無効時 -->
  <LifecycleChild v-else-if="showChild" @log="handleLog" />

  <div class="log-box">
    <div class="log-header">
      <strong>ライフサイクルイベントログ</strong>
      <button @click="clearLogs">ログクリア</button>
    </div>
    <ul>
      <li v-for="(log, i) in logs" :key="i">{{ log }}</li>
    </ul>
  </div>

</div>
</template>

<style scoped>
.container { display: flex; flex-direction: column; gap: 12px; }
.controls { background: #eee; padding: 10px; border-radius: 4px; }
button { margin-top: 8px; padding: 6px 12px; cursor: pointer; }

.log-box {
background: #1e1e1e;
color: #42b883;
padding: 12px;
border-radius: 6px;
font-family: monospace;
}
.log-header {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
border-bottom: 1px solid #444;
padding-bottom: 6px;
margin-bottom: 6px;
}
.log-box ul {
margin: 0;
padding-left: 20px;
max-height: 180px;
overflow-y: auto;
}
</style>