vue3个人心得---（指令初解）属性绑定指令v-bind

属性绑定指令v-bind

一、书写规范

<div v-bind:id="msg"></div>
v-bind指令可以简写，简写时不需指令，直接:帽号前缀带参数，如 :id="msg"。

二、属性与绑定变量的关系

1、html属性原始特性

• 默认值
  有些属性如果没有在标签里赋值，html​会赋与其默认值。例如复选框的value默认值是“on”，checked属性是“false”。
• 出现值
  html的布尔类型属性默认值都为假，只要出现在标签里，属性的值就是真，不论你在标签里给他赋什么值他都是真，不赋值、赋null与undefined值也是真，赋假值也为真，就算赋个狗屎都为真。总之只要出现在标签里它就为真。(要想使属性为假,只能使用在js里，通过getElementById函数获得DOM对象，再对DOM对象的此属性值赋false才行。)

2、属性与绑定值的关系

• 相等关系
  属性值等于绑定值。在大多数情况下，属性值等于绑定的值。

• 不等关系
  在一些特殊性况下，属性值不等于绑定的值。
  非布尔类属性： 非布尔类属性​当他绑定的值为null与undefined时，属性的值不等于null与undefined，而是等于属性默认值（因为在v-bind中，绑定的值为null与undefined时表示从DOM标签中移除此属性，属性被移除html​会赋与其默认值）。
  布尔类属性： 当他绑定的值为""空字符串时属性值不等于绑定值false（在js中0、-0、NaN、""、null、undefined转为布尔值都为false），而是true（因为在v-bind中，空字符串不会移除标签，采用出现值true）。
  如下：普通赋值属性=undefined，v-bind赋值属性=默认值“on”。

  <template>
  <input type="checkbox" :value=undefined id="one">
  <input type="checkbox" :checked="''" id="two">
  <button @click="yy">测试</button>
  </template> 
  <script setup>
  import {ref,nextTick} from 'vue'
  const text=ref([])
  var el
  var ee
  nextTick(() => {el=document.getElementById("one"),ee=document.getElementById("two")})
  function yy(){console.log(el.value,ee.checked)}
  </script>

• 为什么要不等关系
  非布尔类属性： 初始界面DOM通常使用属性的默认值，如果v-bind没有不等关系，在定义绑定的变量时就要给变量赋默认值，效率低下。有不等关系存在，定义变量时就不用赋默认值，只需赋空，属性因不等关系采用默认值，大大提高书写效率。
  布尔类属性： 当要使初始界面DOM为真时，如果v-bind没有不等关系，就要在定义绑定的变量时赋true。有不等关系存在，定义变量时只需赋空字符串，能稍为提高书写效率。
• 不等关系的替代
  非布尔类属性赋值时，如不希望因不等关系使赋值null与undefined变为默认值，可以用空字符串代替。

3、指令值不能为空

除v-on指令外，所有的指令值不能为空。如<button :disabled="">会出错，可以赋空字符串、null与undefined等，不能不赋值。
在Vue 3.4以上的版本中，指令值可以为空，表示值与参数是一样。

4、一次绑定多个属性

多个属性可以合并绑定，以对象参数的形式，属性名与参数一一对应如：

<template>
<button :="{style:count, id:tt}">
5555
</button>
</template>
<script setup>
const count = "color:red;font-size:20px"
const tt = 232
</script>

二、绑定的属性

• 除了可以绑定html体系的标签属性外
• 还可以绑定JS体系中的Element 对象属性，关于Element 对象属性详见Element 对象。
• 还可以绑定自定义属性。

1、class 和 style的增强绑定

html体系的class 和 style 属性比较复杂，v-bind 对此提供了特殊的增强功能。v-bind绑定class 和 style时会做特殊处理（不是把对象拆成指令参数与指令值的配对，而是把对象转换成字符串），如下用字符串模拟对象功能。

<template>
  <button :style="{color:'red','font-size':'20px'}">
  我是第一个
  </button>
  <button :style="'color:red;font-size:20px'">
  我是第二个
  </button>
</template>
<script setup>
</script>

注意：绑定时，字符串与对象两种方式的写法不同
对象的属性值如是字符型要用引号括起
对象里特殊符号的属性名要用引号括起（如'font-size'有-符号，这个属性名用引号括起）。

2、class 与 style的曲别

class属性 与 style属性

• style属性的值是CSS 属性，如style="color:#ff0000"，可以放置多个值，值间用分号隔开。
• class属性的值是class类对象名，如class="a",可以放置多个值，值间用空格隔开。

class绑定 与 style绑定

• style绑定的值是CSS 属性字符串或CSS 属性对象，如：style="'color:#ff0000'"或style="{color:'#ff0000'}"，可以放置多个值，字符串式的值用分号隔开，对象式的值用逗号隔开。
• class绑定的值是class布尔对象，如：class="{a:true}"，可以放置多个值，用逗号隔开。

class绑定--布尔对象转成对象名的方法
在class绑定中使用类要写成布尔对象式，不可以象class属性中那样直接使用类名。
可以通过将类赋给一个变量的方法来间接实现类名方式使用，如下：

<template>
 <h1 :class="text">标题居中</h1>
</template> 
<script setup>
  var text='center'
</script>
<style>
.center{text-align:center;}
</style>

注意类是以字符串形式赋值给变量，记得类名要加引号。

三、在组件上使用

属性透传
父组件没有被声明为 props 或 emits 的所有属性（最常见的例子就是 class、style 和 id）和v-on事件都会传递给子组件。
接收
当子组件有多个顶级标签时，需要选择一个标签来接收传递，否则会报错，采用不带参数的v-bind能接收所有传递过来的属性，如：v-bind="$attrs" 注意要带“$”符号。
选择性接收
可以只接收部分属性，如:id="$attrs.id"；:class="$attrs.class"。
自动接收
当子组件只有一个顶级标签时不必书写接收命令，子会自动接收所有属性。
父子组件的合并与覆盖
父子能合并的属性会合并，不能合并的父会覆盖子。
顶级标签禁用 Attributes 继承
通过inheritAttrs: false可以使顶级标签禁用 Attributes 继承。
如果子组件顶级标签下的子标签要继承，也需要顶级标签禁用 Attributes 继承。如下是顶级标签下的子标签继承。

<template>
<div class="btn-wrapper">
  <button class="btn">click me</button>
</div>
</template> 
<script setup>
defineOptions({
  inheritAttrs: false
})
</script>

useAttrs在JS模块中要使用
在JS模块中要使用透传，需要先用useAttrs()接收。
使用 useAttrs() 接收父组件的透传属性如下：

<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>