<!-- HTML标准属性 -->
<div :id="myId">              // DOM id属性
<div :class="myClass">        // class属性
<div :style="myStyle">        // style属性
<img :src="imgUrl">           // src属性
<input :type="inputType">     // type属性
<a :href="link">             // href属性

<template>
  <div>
    <!-- 1. 图片链接 -->
    <img src="/static/logo.png"/>      <!-- 静态图片 -->
    <img :src="userAvatar"/>           <!-- 动态图片 -->

    <!-- 2. class绑定 -->
    <div class="btn">                  <!-- 静态class -->
    <div :class="{ 
      'active': isActive,              <!-- 动态class -->
      'disabled': isDisabled 
    }">

    <!-- 3. style绑定 -->
    <div style="color: red">           <!-- 静态样式 -->
    <div :style="{                     <!-- 动态样式 -->
      color: textColor,
      fontSize: fontSize + 'px'
    }">

    <!-- 4. 表单元素 -->
    <input type="text" value="静态值">  <!-- 静态值 -->
    <input :value="dynamicValue">      <!-- 动态值 -->

    <!-- 5. 禁用状态 -->
    <button disabled>静态禁用</button>   <!-- 静态禁用 -->
    <button :disabled="isDisabled">    <!-- 动态禁用 -->
      提交
    </button>

    <!-- 6. 自定义属性 -->
    <div data-id="1">                  <!-- 静态数据属性 -->
    <div :data-id="userId">           <!-- 动态数据属性 -->

    <!-- 7. href链接 -->
    <a href="/about">关于</a>          <!-- 静态链接 -->
    <a :href="dynamicLink">详情</a>     <!-- 动态链接 -->
  </div>
</template>

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

// 响应式数据
const userAvatar = ref('/images/avatar.jpg')
const isActive = ref(true)
const isDisabled = ref(false)
const textColor = ref('blue')
const fontSize = ref(16)
const dynamicValue = ref('Hello Vue')
const userId = ref(123)
const dynamicLink = ref('/user/profile')

// 计算属性示例
const buttonClass = computed(() => ({
  'btn': true,
  'btn-active': isActive.value,
  'btn-disabled': isDisabled.value
}))
</script>

<template>
  <!-- 属性名本身也可以是动态的 -->
  <div :[dynamicAttrName]="value">
    动态属性名
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicAttrName: 'custom-attr', // 可以动态改变属性名
      value: 'some value'
    }
  }
}
</script>

<template>
  <div>
    <!-- 动态数据属性 -->
    <div :[dataAttribute]="dataValue">
      数据属性展示
    </div>

    <!-- 动态aria属性 -->
    <button :[ariaAttribute]="ariaValue">
      无障碍按钮
    </button>

    <!-- 动态样式属性 -->
    <div :[styleAttribute]="styleValue">
      样式测试
    </div>

    <!-- 控制面板 -->
    <div class="controls">
      <button @click="changeDataAttr">切换数据属性</button>
      <button @click="changeAriaAttr">切换无障碍属性</button>
      <button @click="changeStyleAttr">切换样式属性</button>
    </div>
  </div>
</template>

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

// 数据属性相关
const dataAttribute = ref('data-test')
const dataValue = ref('test-value')

// 无障碍属性相关
const ariaAttribute = ref('aria-label')
const ariaValue = ref('可访问按钮')

// 样式属性相关
const styleAttribute = ref('style')
const styleValue = ref('color: red')

// 切换方法
const changeDataAttr = () => {
  if (dataAttribute.value === 'data-test') {
    dataAttribute.value = 'data-id'
    dataValue.value = 'id-123'
  } else {
    dataAttribute.value = 'data-test'
    dataValue.value = 'test-value'
  }
}

const changeAriaAttr = () => {
  if (ariaAttribute.value === 'aria-label') {
    ariaAttribute.value = 'aria-description'
    ariaValue.value = '这是一个按钮描述'
  } else {
    ariaAttribute.value = 'aria-label'
    ariaValue.value = '可访问按钮'
  }
}

const changeStyleAttr = () => {
  if (styleValue.value.includes('red')) {
    styleValue.value = 'color: blue; font-size: 18px'
  } else {
    styleValue.value = 'color: red; font-size: 16px'
  }
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent
    :user-name="name"
    :age="age"
    :is-admin="isAdmin"
    :config="config"
  />
</template>

<script setup>
import { ref, reactive } from 'vue'

const name = ref('Tom')
const age = ref(25)
const isAdmin = ref(true)
const config = reactive({
  theme: 'dark',
  showHeader: true
})
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2>用户信息</h2>
    <p>姓名: {{ userName }}</p>
    <p>年龄: {{ age }}</p>
    <p>管理员: {{ isAdmin ? '是' : '否' }}</p>
    <p>主题: {{ config.theme }}</p>
    
    <!-- 使用计算属性 -->
    <p>状态: {{ userStatus }}</p>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 声明所需的全部props
const props = defineProps({
  userName: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 0,
    validator: (value) => value >= 0
  },
  isAdmin: {
    type: Boolean,
    default: false
  },
  config: {
    type: Object,
    default: () => ({
      theme: 'light',
      showHeader: false
    })
  }
})

// 基于props的计算属性
const userStatus = computed(() => {
  if (props.isAdmin) return '管理员'
  return props.age > 18 ? '成年用户' : '未成年用户'
})

// 使用解构来简化访问
// 注意：解构会失去响应性
const { userName, age } = props

// 如果需要保持响应性，可以使用toRefs
import { toRefs } from 'vue'
const { userName, age } = toRefs(props)
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component :count="count" />
    <button @click="increment">增加</button>
  </div>
</template>

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

const count = ref(0)
const increment = () => {
  count.value++
}
</script>

<!-- 子组件 -->
<script setup>
import { toRefs } from 'vue'

const props = defineProps({
  count: Number
})

// 1. 直接使用props (✅ 有响应性)
console.log(props.count)  // 会随父组件变化而变化

// 2. 直接解构 (❌ 失去响应性)
const { count: countNormal } = props
console.log(countNormal)  // 只是一个普通数值,不会随父组件变化

// 3. 使用toRefs解构 (✅ 保持响应性)
const { count: countRef } = toRefs(props)
console.log(countRef.value)  // 会随父组件变化而变化
</script>

<template>
  <div>
    <!-- 这三种方式的显示效果: -->
    <p>直接使用props: {{ props.count }}</p>      <!-- 会更新 -->
    <p>直接解构: {{ countNormal }}</p>           <!-- 不会更新,保持初始值 -->
    <p>toRefs解构: {{ countRef }}</p>            <!-- 会更新 -->
  </div>
</template>