前文学习过， Attribute 绑定，也就是 html 的属性绑定的语法是：
// 完整语法
v-bind:xxx="yyy"
// 简写语法
:xxx="yyy"
// 同名简写
// :xxx 表示 :xxx="xxx"
// :xxx 与 v-bind:xxx 相同
:xxx
绑定 HTML class
绑定对象
这里要注意，class 的绑定对象与其它属性不同。
HTML属性，像 id, title 这些我们常用的，绑定的值要求是一个字符串或者布尔值。
class 绑定时，除了支持字符串、布尔值外，还支持对象。对与我们自定义的属性不同。如下代码：
<script>
export default {
data() {
return {
x: {active: true}
}
}
}
</script>
<template>
<!-- 将生成 <div class="active">a</div> -->
<div :class="x">a</div>
<!-- 将生成 <div user="[object Object]">a</div> -->
<!-- 这样 user 属性就就丢失值了。 -->
<div :user="x">b</div>
</template>
绑定数组
省略
在组件上使用
我们知道，Vue2要求单根组件，而 Vue3 无此要求。
<!-- Vue2 语法，只有一个根元素 div，其它元素 h1, h2都在此 div 内。 -->
<template>
<div>
<h1>Hello World</h1>
<h2>Hello Vue</h2>
</div>
</template>
<!-- Vue3 语法，可以有多个根。在这里 h1, h2都是根元素。 -->
<template>
<h1>Hello World</h1>
<h2>Hello Vue</h2>
</template>
如果我们的组件是单根组件，外部传递的 class 属性会追加到根组件上。
如果我们的组件是多根组件呢？外部传递的 class 是追加到每个根组件上去？这可能与我的实际需求不符。
这时候就要使用 $attrs。那一个根组件属性需要外部传递的 class，就在那个根组件上写:class="$attrs.class"。
还有一个要注意的是组件样式的隔离。
如果我们在样式中定义了范围，比如 " <style scoped>"，表明这些样式只对本组件生效。如果想让它使用的子组件也生效，就要使用组件样式穿透功能。
<style scoped>
:deep(.blue){
color: blue
}
</style>
请注意，使用deep样式节点必须要有一个父节点
绑定内联样式
略
