模板语法
1. disabled指令，可以用于禁用按钮
<button :disabled="isButtonDisabled">Button</button>
//:disabled是一个指令，用于根据isButtonDisabled的值来动态控制按钮的禁用状态。
使用场景：
1.防止用户重复点击按钮
2.表单验证未通过时，不能点击提交按钮
3.正在进行异步操作时，不能点击
4.操作权限控制
5.数据加载中
凡是，想禁用按钮时，就可以使用disabled指令2. 动态绑定多个值,可以用于动态修改样式
<div v-bind="objectOfAttrs"></div>
const objectOfAttrs = {
id: 'container',
class: 'wrapper',
style: 'background-color:green'
}
// 直接修改objectOfAttrs对象中的style属性值
this.objectOfAttrs.style = 'background-color:blue';
//此时修改objectOfAttrs里style的值，就可以直接使背景从绿色修改为蓝色
使用场景：
1.根据不同条件切换样式
2.响应式布局适配
3.组件复用与定制3. 动态参数
//在指令参数上
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>
//动态的事件名称上
<a v-on:[eventName]="doSomething"> ... </a>
<!-- 简写 -->
<a @[eventName]="doSomething"> ... </a>响应式基础
1. ref支持任何类型的值，reactive只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)
2. DOM更新不是同步的，vue会在“next tick”更新周期中缓冲所有状态的修改，以确保不管进行多少次修改，都只会被更新一次
3. 如果ref值的类型是复杂类型，在更新里面的值时，如果只更新里面的某一个值时，是不会触发更新的，需要让整个值更新才会触发更新。
const shallowArray = shallowRef([
/* 巨大的列表，里面包含深层的对象 */
])
// 这不会触发更新...
shallowArray.value.push(newObject)
// 这才会触发更新
shallowArray.value = [...shallowArray.value, newObject]
// 这不会触发更新...
shallowArray.value[0].foo = 1
// 这才会触发更新
shallowArray.value = [
{
...shallowArray.value[0],
foo: 1
},
...shallowArray.value.slice(1)
]但是如果是reactive就可以直接更新。
<button @click="state.count++">
{{ state.count }}
</button>
import { reactive } from 'vue'
const state = reactive({ count: 0 })
