<script setup>
// 1. 声明式渲染，对象和变量的声明（reactive()和ref()）
import { ref,reactive,computed, onMounted, watch } from 'vue'
// reactive() 对象声明API，创建对象
const counter = reactive({
count:0
})
console.log(counter.count)
counter.count++
// ref() 变量声明API， 可接受任何类型，会返回一个包裹对象，在.value属性下暴露内部值
const message = ref('hello')
console.log(message.value)
message.value = 'Changed libai sssss'
// 在组件<script setup>块中声明的，可在模板<template>中直接使用
// -------------------------------------------------
// 2. Attribute绑定，attribute绑定一个动态值 使用v-bind:属性="值"，还有一个简写用法，就是将v-bind省略，以:开头
const titleClass = ref('title')
</script>
<template>
<!-- 1. -->
<div id="d-count">
<h2>1. 声明式渲染，对象和变量的声明（reactive()和ref()）</h2>
<button id="btn-count" @click='counter.count++'>{{ counter.count }}</button>
<br>
{{counter.count}}
<p>{{counter.count}}</p>
<!-- 在花括号中的内容可以是js的表达式 -->
<button type="text" id="btn-js">{{message.split(" ").reverse().join("")}}</button>
</div>
<br>
<br>
<br>
<!-- 2. -->
<div id="d-vbind">
<h2>2. Attribute绑定</h2>
<h1 id="h-class" v-bind:class="titleClass">make me green</h1>
<!-- <h1 :class="titleClass">make me green</h1> -->
</div>
<br>
<br>
<br>
</template>
<style scoped>
/* 1. */
#btn-count{
height: 50px;
width: 400px;
text-align: center;
background-color: aqua;
font-size: 30px;
}
#btn-js{
height: 50px;
width: 400px;
text-align: center;
background-color: salmon;
font-size: 30px;
}
/* 2. */
#h-class{
height: 50px;
width: 400px;
text-align: center;
background-color: darkmagenta;
font-size: 25px;
}
</style>
