Vue的核心是MVVM,也就是数据能够影响界面，界面也能影响数据，什么意思呢？比如有个输入框，它绑定的变量name,如果你改变了name的值，输入框显示的值就会变化，如果用户在输入框里面输东西,name对应的值也会变化

1.响应式基础

vue3推荐使用组合式API，组合式 API 常见问答 | Vue.js

在script上加setup表示里面的变量和方法可以暴露给模板使用

ref方法可以让值变成响应式对象，一般用来包裹基本数据类型，要取值的话要加个value来取值,reactive用来包裹对象类型让该对象变成响应式

{{}}是插值表达式，可以在html中渲染数据,在这里面可以不用写value因为会自动去调用模板语法 | Vue.js

<template><div>{{count}}</div><button @click="clickMe">点击我</button>
</template><script setup>
import { ref } from 'vue'
let count = ref(0);function clickMe() {count.value++
}
</script>

2.属性的绑定

插值表达式{{}}是在html中显示绑定的值，要想在标签中绑定属性需要使用指令v-bind:属性名,缩写就是:属性名,如果绑定的值是布尔值，则根据该值来确定是否显示该属性

<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>

绑定多个值,如下所示，渲染的效果就是<div id="container" class="wrapper"></div>

const objectOfAttrs = {id: 'container',class: 'wrapper'
}

<div v-bind="objectOfAttrs"></div>

属性值的覆盖,后面的属性会覆盖前面的,比如下面最终的id是app

<div v-bind="objectOfAttrs" id="app"></div>

 3.属性绑定案例--变色的背景

写vue项目的原则，先写静态页面，我们这个静态页面比较简单，就一个div，然后写好css container,然后写动态的内容，这个案例动态的是背景色，所以用:style表示绑定style属性，由于style需要根据数据变更，所以他绑定的数据myStyle需要是响应式的，用reactive包裹,最后处理事件，监听click事件去改变background-color这个值就行了

<template><div :style="myStyle" @click="changeColor" class="container"></div>
</template><script setup>
import { reactive } from 'vue'
const bg = ['red', 'blue', 'pink']
let count = 0;
const myStyle = reactive({'background-color': bg[0]
})function changeColor() {myStyle['background-color'] = bg[++count % bg.length]
}
</script><style scoped>
.container {width: 100%;height: 100%;position: absolute;
}
</style>