Vue中的v-系列（自用-1）

一、v-bind

1. 直接修改数据源

HTML属性绑定v-bind 绑定的是：

1.HTML 元素的标准属性：src, href, alt, width, height 等

<!-- 绑定标准属性 -->
<img :src="imageUrl" :alt="imageDescription">
<a :href="linkUrl" :target="linkTarget">
<input :type="inputType" :placeholder="hintText">
<div :id="containerId" :class="className"></div>

2.布尔属性：disabled, readonly, required 等

<!-- 布尔属性 -->
<button :disabled="isLoading">提交</button>
<input :readonly="isReadOnly">
<details :open="isOpen">
<video :autoplay="shouldAutoplay">

3. 自定义数据属性：data-* 系列

用于存储、循环，一般和对象数组[{},{}]联合使用

<!-- data-* 属性 -->
<div :data-user-id="userId" :data-role="userRole"></div>
<li :data-index="index" :data-category="item.category"></div>

使用思路梳理：

1. v-bind在HTML部分可以绑定的内容：标准 HTML 属性，布尔属性，自定义属性；引号里面填写变量名
2. 对应的到js部分，需要声明这些动态变量，用ref或者reactive
3. 需要一定条件才进行变化，在js中写函数

二、v-model双向数据绑定

1.常用于表单的数据监听同步，绑定input、textarea、select

<template>
  <div class="demo">
    <textarea v-model="article" cols="30" rows="10"></textarea>
    <h2>textarea</h2>
    <h2>article当前的值是：{{ article }}</h2>

    <!-- 选择框 -->
    <select v-model="selected">
      <!-- disabled 属性用于禁用该选项，用户无法选择它；value="" 表示该选项的值为空字符串。
      此选项通常作为提示用户进行选择的默认选项 -->
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <h3>当前选择的值是：{{ selected }}</h3>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 创建响应式变量
const article = ref("a")
const selected = ref("")
</script>

• lazy修饰符，使得不实时同步更新\
• trim修饰符，自动过滤用户输入的守卫空白字符

2.v-model可以用于父子组件之间的双向通信【Vue3.4之前的用法】：

1. 父传子：通过 props 传递数据给子组件
   ① 父组件通过 [v-bind]: 属性绑定的形式，把数据传递给子组件
   ② 子组件中，通过 props 接收父组件传递过来的数据

2. 子传父：通过 emit 事件将数据传回父组件
① 在 v-bind: 指令之前添加 v-model 指令
② 在子组件中声明 emits 自定义事件，格式为 update:xxx
③ 调用 $emit() 触发自定义事件，更新父组件中的数据

vue官方给的例子-父传子：

Vue3.4以后可以使用defineModel 父组件：

<script setup>
import Child from './Child.vue'
import { ref } from 'vue'  
const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <Child v-model="msg" />
</template>

子组件:

<script setup>
const model = defineModel()
</script>
  
<template>
  <span>My input</span> 
  <input v-model="model">
</template>

数据流示意图

父组件 msg ───v-model───→ 子组件 defineModel() ───v-model───→ input 元素
      ↑                                           │
      └─────────── 双向数据绑定 ────────────  ─────┘

最终展示效果

如果是子组件向父组件传递数据的话：

子组件 input 元素 ───v-model───→ defineModel() ───自动更新───→ 父组件 msg
      │                              │
      └────── 用户输入 ───────────────┘