Vue学习 - 码农知识堂 - 文章详情页

Vue学习
响应式API

#ref

接收一个内部值，返回一个响应式的，可以更改的 ref 对象，次对象只有一个指向其内部值的属性.value。

ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对.value的操作都将被追踪，并且写操作会触发与之相关的副作用。

如果将一个对象赋值给 ref ，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，他们将被深层的解包。
```
const count = ref(0)
console.log(count.value) // 0
 
count.value++
console.log(count.value) // 1
```
Attribute 绑定

双大括号不能再 HTML attributes 中使用。想要响应式的绑定一个 attribute，应该使用v-bind指令：
```
<div v-bind:id="dynamicId">div>
```
v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

因为 v-bind 非常常用，我们提供了特定的简写语法：
```
<div :id="dynamicId">div>
```
布尔型 Attribute

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。
```
<button :disabled="isButtonDisabled">Buttonbutton>
```
当 isButtonDisabled 为真值或一个空字符串 (即