快速入门Vue3——基础语法

一叶难遮天2025-09-03 22:36

目录

写在前面

一、Vue中应用的基础概念

二、Vue中的生命周期函数

三、Vue中的常用模板语法介绍

四、数据、方法、计算属性、监听器

五、样式绑定

六、条件渲染

七、列表循环渲染

八、事件绑定

九、双向绑定

写在前面

上一篇《快速入门Vue3------语法初识》中我们通过几段代码对Vue的语法有了一个初步的感受，那本篇内容我们就开始来详细的介绍一下Vue的基础语法了，话不多说，开始今天的内容！

一、Vue中应用的基础概念

TypeScript 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue基础语法</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // createApp表示创建一个Vue应用，存储到app变量中
    // 传入的参数表示，这个应用最外层的组件，应该如何展示
    // mvvm设计模式：m->model数据层，v->view视图层，vm->ViewModel视图数据连接层
    const app = Vue.createApp({
      data(){
        return {
          content:'Hello World'
        }
      },
      template:`<div>{{content}}</div>`
    })
    // vm代表的就是Vue应用的根组件
    const vm = app.mount('#root')
    vm.$data.content = '修改数据'
  </script>
</html>

上面的代码结构展示了最基础的Hello World，从这里面我们可以得到以下几个知识点：

  • Vue应用创建：通过Vue.createApp方法创建Vue应用实例，该方法接收的参数决定应用最外层组件的展示形式，即决定根组件的初始配置
  • 挂载机制：调用app.mount('#root')将应用挂载到指定DOM节点，作用域：Vue应用只管理挂载节点(root)及其子节点的DOM内容
  • 根组件获取：mount()方法的返回值即为根组件实例（这里命名为vm），它实现的是MVVM架构中的ViewModel层，自动维护数据与视图的绑定关系
  • MVVM模式：
    • Model层：组件中定义的响应式数据（如data返回的content）
    • View层：组件模板（如包含{{content}}的template）
    • ViewModel层：Vue组件实例自动建立数据与模板的绑定关系
  • 数据操作：通过vm.$data.content可访问或修改根组件数据，数据变更将触发视图自动更新

二、Vue中的生命周期函数

我们可以通过打印日志来观察生命周期的变化：

TypeScript 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue基础语法</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // 生命周期函数：在某一时刻会自动执行的函数
    const app = Vue.createApp({
      data() {
        return {
          content: 'Hello World',
        }
      },
      // 在实例生成之前会自动执行的函数
      beforeCreate() {
        console.log('beforeCreate')
      },
      // 在实例生成之后会自动执行的函数
      created() {
        console.log('created')
      },
      // 在组件内容被渲染到页面之前自动执行的函数
      beforeMount() {
        console.log(document.getElementById('root').innerHTML, 'beforeMount')
      },
      // 在组件内容被渲染到页面之后自动执行的函数
      mounted() {
        console.log(document.getElementById('root').innerHTML, 'mounted')
      },
      // 当数据发生变化时会自动执行的函数
      beforeUpdate() {
        console.log(document.getElementById('root').innerHTML, 'beforeUpdate')
      },
      // 当数据发生变化，页面重新渲染后，会自动执行的函数
      updated() {
        console.log(document.getElementById('root').innerHTML, 'updated')
      },
      // 当Vue应用失效时自动执行的函数
      beforeUnmount() {
        console.log(document.getElementById('root').innerHTML, 'beforeUnmount')
      },
      // 当Vue应用失效时且DOM完全销毁之后自动执行的函数
      unmounted() {
        console.log(document.getElementById('root').innerHTML, 'unmounted')
      },

      template: `<div>{{content}}</div>`,
    })
    const vm = app.mount('#root')
  </script>
</html>

生命周期函数本质：在流程图虚线对应时刻自动执行的函数，其触发与代码运行强关联。通过生命周期流程图可观察Vue实例的完整初始化过程。执行Vue.createApp().mount()后，Vue将按顺序处理以下阶段：

Vue首先解析代码中的事件绑定（如v-on指令）和生命周期函数声明，完成逻辑分析初始化。

  1. beforeCreate生命周期函数
  • beforeCreate为Vue实例创建前的首个生命周期函数
  • 执行时机：完成事件和生命周期函数分析后立即触发
  1. created生命周期函数
  • created函数在实例完成依赖注入和双向绑定分析后触发。
  • 执行顺序：位于beforeCreate之后。核心差异：beforeCreate时实例未完全创建，created时实例已就绪。
  1. beforeMount生命周期函数

|--------------|---------------|--------|
| 阶段 | 触发条件 | 关联操作 |
| beforeCreate | 事件/生命周期分析完成 | 实例未创建 |
| created | 依赖注入/双向绑定分析完成 | 实例创建完毕 |

  • beforeMount在模板编译为render函数后触发，组件内容未挂载到root节点时，获取节点内容为空
  • 简化理解：表示组件内容渲染到页面前的最后一刻，与后续mounted形成明确时序关系。
  1. mounted生命周期函数
  • mounted函数标志组件已渲染至页面，组件渲染完成后可正确打印出"hello world"
  • 核心考点：mounted是组件完成渲染后的唯一生命周期函数，常用于DOM操作初始化。
  1. beforeUpdate生命周期函数

|--------------|---------------|-----------|
| 阶段 | 触发条件 | 输出内容 |
| beforeUpdate | data数据变化时立即执行 | 变化前的DOM内容 |
| updated | 页面重新渲染后执行 | 变化后的DOM内容 |

  1. updated生命周期函数
  • beforeUpdate特性：数据变更瞬间触发，此时页面尚未重新渲染，输出旧数据
  • updated特性：页面完成渲染后触发，输出新数据
  • 核心区别：beforeUpdate反映变更前状态，updated反映变更后状态
  1. beforeUnmount生命周期函数
  • 触发条件：调用app.unmount()方法使Vue应用失效时
  • 执行顺序：beforeUnmount在实例销毁前执行，此时仍可获取原始DOM内容
  1. unmounted生命周期函数

|---------------|--------|----------------|
| 阶段 | DOM状态 | 输出验证方式 |
| beforeUnmount | 保留原有内容 | 可打印完整innerHTML |
| unmounted | 已完全清除 | innerHTML返回空值 |

三、Vue中的常用模板语法介绍

1）插值表达式

插值表达式语法为双大括号包裹变量或JS表达式，例如{{content}}指向data中的content变量。若变量包含HTML标签（如<strong>hello world</strong>），插值表达式会转译标签而非渲染样式。需注意仅支持JS表达式（如a+b或Math.max(1,2)），不支持JS语句（如if(true){console.log(1)}）。

2）v-html

v-html指令用于渲染未转译的HTML内容。例如<div v-html="content"></div>会直接解析content中的<strong>标签为加粗样式。与插值表达式的关键区别在于是否保留原始HTML结构。

3）v-bind

v-bind指令实现属性与数据的动态绑定：

  • 基础用法：<div v-bind:title="content">使title属性值随content变量变化
  • 布尔属性控制：<input v-bind:disabled="isDisabled">根据isDisabled值切换状态
  • 简写形式：:disabled="isDisabled"与v-bind:disabled等效

4）v-once

v-once指令使元素仅渲染初始数据。例如<div v-once>{{content}}</div>首次渲染后不再响应content变量更新。适用于静态内容优化，可减少不必要的DOM更新。

5）v-if

v-if指令通过条件判断控制DOM存在性：

  • true时：渲染对应元素（如<div v-if="show">会显示）
  • false时：完全移除DOM节点（非隐藏）
  • 与v-show区别：v-show通过CSS控制显示/隐藏，DOM始终存在

6）v-on

  • 在模板中可通过v-on指令绑定事件，例如v-on:click="handleClick"。对应方法需定义在methods对象中，否则无法生效。
  • v-on:click可简写为@click，例如@click="handleClick"。

7）动态属性

  • 动态属性名可通过中括号语法实现，例如:[name]="content"，其中name为变量，决定绑定的属性名（如title或title1）。
  • 事件名也可动态绑定，例如@[event]="handleClick"，event变量值为click或mouseover等。

8）表单模板

  • 表单提交默认会跳转至action指定地址，例如<form action="https://www.baidu.com">。
  • 需通过<button type="submit">触发提交，否则可能因标签错误导致功能异常。

9）默认行为

  • 阻止默认行为可通过e.preventDefault()实现，例如在handleClick方法中调用。
  • 修饰符.prevent可简化代码，例如@click.prevent="handleClick"，无需在方法内显式调用preventDefault。
  • 修饰符用于封装常见逻辑，如阻止默认行为、事件冒泡等

四、数据、方法、计算属性、监听器

1）数据

  • data函数：定义数据需在创建vue应用时声明，并通过return返回对象
  • 模板数据绑定：return对象中的content数据可在模板中直接调用
  • 数据修改：通过vm.data.content修改第一层数据，简化语法：根数据可直接通过vm.message修改，效果等同于vm.data.content

2）方法

  • 方法定义：定义handleClick方法并通过v-on:click或@click绑定事件
  • 方法调用场景：插值表达式中调用（如format(message)）或者在事件绑定时触发
  • this指向：
    • 默认绑定：methods内函数this指向vue实例
    • 箭头函数限制：禁止使用箭头函数定义方法，因其this指向外层作用域（如window）
  • 函数定义规范：需采用functionName() {}形式确保this正确绑定

3）计算属性

定义方式：在Vue组件中通过computed选项定义，包含一个返回计算结果的函数

示例代码：

TypeScript 复制代码 
data() {
    return {
        count: 2,
        price: 5,
    }
},
computed: {
  total() {
    return this.count * this.price
  }
}
  • 使用方式：在模板中直接使用计算属性名（不加括号），如{{total}}
  • 响应式特性：当依赖的this.count或this.price变化时，会自动重新计算

计算属性和方法的区别：

|------|---------------|--------------|
| 对比维度 | 计算属性 | 方法 |
| 触发条件 | 依赖数据变更时重新计算 | 页面渲染时必然执行 |
| 缓存机制 | 结果缓存（依赖未变则复用） | 无缓存，每次调用重新计算 |
| 性能建议 | 优先使用 | 需动态计算时使用 |

4）监听器

监听器（watcher）可以通过定义watch对象实现，用于监听数据变化并执行相应操作。

监听器的作用在于监听特定数据变化并执行异步操作。计算属性无法处理异步操作，此时应使用watch实现。

举个例子：定义price函数监听数据变化，通过setTimeout延迟3秒执行console.log。当price值从5变为6时，延迟后成功打印"press changed"，证明watch可监听变量变化并执行异步操作。

TypeScript 复制代码 
watch: {
    price(current,prev) {
        setTimeout(() => {
            console.log('price changed')
        }, 3000)
    },
}

watch可获取变化前后的值：第一个参数为新值，第二个参数为旧值。

简单总结：

  • 计算属性：依赖数据变化时重新计算，具有缓存机制，适合同步操作
  • 监听器：监听数据变化执行异步操作，代码相对冗余
  • 开发建议：优先使用计算属性，无法满足需求时考虑侦听器或方法。

五、样式绑定

1）定义样式

在script标签内定义style，创建red和green两个样式类，分别设置color属性为red和green。通过class="red"为标签添加样式。如果需要通过数据控制样式，可在data中定义classString变量并绑定v-bind:class。

2）字符串绑定样式

通过vm.$data.classString="green"修改数据可实现样式切换

3）对象绑定样式

定义classObject数据项，通过{red:true, green:true}格式控制样式展示。true表示需要展示对应类名，false则不展示。修改对象属性值可动态切换样式。

4）数组绑定样式

通过数组形式绑定样式，如['red','green']。数组内可嵌套对象语法，例如['red',{brown:true}]。数组元素顺序决定样式优先级。

5）行内样式

行内样式可直接书写style="color:yellow"。也可通过styleString:'color:yellow' :style="styleString"数据绑定实现。基础字符串写法适用于简单场景。

6）对象形式样式处理

推荐使用styleObject形式定义行内样式，如{color:'orange', background:'yellow'}。对象语法比字符串拼接更易维护，支持多属性同时定义。

7）创建小组件

通过app.component创建名为demo的子组件。父组件调用子组件时，若子组件最外层为单标签，可通过父组件直接添加class。若子组件最外层为多标签，需使用$attrs.class语法或直接在子组件内部定义样式。

六、条件渲染

1) v-if指令

定义布尔型数据项show（默认值为true），通过v-if指令绑定show变量控制div标签显示逻辑。当show值为true时显示"hello world"，false时元素消失。

v-if通过DOM增删实现元素显隐控制：

  • show为true时，div标签存在于DOM树
  • show为false时，div标签从DOM中完全移除

2) v-show指令

采用v-show指令绑定相同show变量，初始状态true时同时显示v-if和v-show控制的div标签。

v-show控制元素原理：

|--------|-----------------|-----------|
| 指令 | 实现机制 | 性能建议 |
| v-if | 直接操作DOM增删 | 非频繁切换场景适用 |
| v-show | 切换CSS的display属性 | 频繁切换时性能更优 |

3）v-else用法

v-if配套语法：

  • 定义conditionOne变量控制条件分支
  • v-else指令必须紧接v-if元素后使用
  • 当conditionOne为false时自动显示v-else关联元素

注意事项：v-if与v-else元素需保持连续相邻的DOM结构。

4）v-else-if用法

多条件分支实现：

  • 定义conditionTwo补充条件变量
  • v-else-if指令构成条件链：
    • 优先判断conditionOne
    • 次优判断conditionTwo
    • 最终执行v-else
  • 元素需保持严格相邻的DOM结构

典型应用场景：需要实现多重条件判断的界面元素控制。

七、列表循环渲染

TypeScript 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue基础语法</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          listArray: ['I', 'love', 'China'],
        }
      },
      template: `
        <div>
            <div v-for="(item,index) in listArray">
                {{item}}---{{index}}
            </div>
        </div>
    `,
    })
    app.mount('#root')
  </script>
</html>

定义数组list，将数组内容循环展示。

1）、v-for指令实现数组循环渲染

  • 基础语法：v-for="item in listArray"，通过插值表达式{{item}}展示当前项
  • 执行逻辑：依次将数组元素I、love、China赋值给item并渲染
  • 下标获取：可通过v-for="(item, index) in listArray"获取元素索引，注意索引从0开始

2）、v-for指令实现对象循环渲染

TypeScript 复制代码 
listObject:{
  "first name": "I",
  "last name": "love",
  "job": "China"
}

v-for="(value,key,index) in listObject"

  • 第一个参数value对应对象属性值，建议命名采用value而非item
  • 第二个参数key获取属性名，比如：first name
  • 第三个参数index表示循环索引

3）、改变数组列表数据

数组更新方法：

  • push方法：末尾添加元素（如新增hello）
  • 必须添加key：v-for="(item,index) in list":key="index"，建议使用唯一标识而非index

增加key值

  • key的作用：DOM复用机制：通过唯一key值识别可复用节点
  • 性能优化：减少不必要的DOM操作

①、使用数组的变更函数

push函数

  • push：向数组末尾添加元素

shift函数

  • shift：删除数组首元素（与pop方向相反）

unshift函数

  • unshift：向数组头部添加元素

splice函数

  • splice：按索引修改数组（参数与原生JS一致）

sort和reverse函数

  • reverse：反转数组顺序
  • sort：按规则排序数组

②、直接替换数组

  • 直接替换数组：将原数组赋值为新数组，例如listArray = ["newArray"]
  • 使用返回新数组的方法：通过concat()或filter()等方法生成新数组后赋值，例如listArray = ["word"].concat("newWord")

③、直接更新数组的内容

  • 修改数组元素：直接更新数组指定索引的值，例如listArray[1] = "hello"

|------|-------|----------------|--------|
| 更新方式 | 引用变化 | 典型方法 | 适用场景 |
| 变更函数 | 不改变引用 | push/pop/shift | 增删数组元素 |
| 替换数组 | 改变引用 | 直接赋值新数组 | 完全更新数据 |
| 修改元素 | 不改变引用 | 索引赋值 | 局部数据更新 |

4）、改变对象列表数据

对象更新方法：

比如：this.listObject.age = 30

this.listObject.sex = 'male'

  • 直接添加属性：通过this.listObject.newKey = value动态添加属性
  • 多属性更新：可连续添加多个属性，比如同时设置age和sex属性

5）、v-for循环数字

数字循环特性：

  • 语法格式：item in 10会生成1-10的序列
  • 渲染规则：从1开始到指定数字结束，逐项渲染

6）、指令优先级

  • 冲突现象：v-for优先级高于v-if，导致同层级条件判断失效
  • 解决方案：
    • 嵌套写法：在内层元素添加v-if判断
    • 使用template：通过<template>标签避免额外DOM节点生成
TypeScript 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue基础语法</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          listObject: {
            first: 'I',
            second: 'love',
            third: 'China',
          },
        }
      },
      template: `
        <div>
            <template v-for="(value,key,index) in listObject":key="index">
                <div v-if="key !== 'second'">
                    {{value}}---{{key}}
                </div>
            </template>
        </div>
    `,
    })
    app.mount('#root')
  </script>
</html>

八、事件绑定

TypeScript 复制代码 
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          counter: 0,
        }
      },
      methods: {
        handleBtnClick(num, event) {
          console.log(event)
          this.counter += num
        },
      },
      template: `
        <div>
            {{counter}}
            <button @click="handleBtnClick(2,$event)">Button</button>
        </div>
    `,
    })
    app.mount('#root')
  </script>
</html>

1）、事件对象

  • 在模板中定义一个button按钮，并绑定方法handleButtonClick。
  • 在data中定义属性count，初始值为0，并在页面展示该值。
  • 通过方法实现计数功能：在handleButtonClick中执行count += 1，点击按钮后数值递增。
  • 直接绑定表达式：可在事件绑定中直接编写count += 1，但推荐使用方法调用以保证代码可维护性。
  • 获取原生事件对象：方法中第一个参数event即为原生事件对象，可通过event.target获取触发事件的DOM元素。
  • 传递自定义参数并保留事件对象：使用event传递原生事件，例如handleButtonClick(2, event)，方法中可同时接收数值参数和事件对象。

2）、事件执行多个函数

  • 多函数绑定语法：通过逗号分隔多个方法调用，例如@click="handleButtonClick(), handleButtonClick1()"，需显式添加括号以触发执行。
  • 注意事项：直接引用函数名（如@click="handleButtonClick, handleButtonClick1"）无效，必须通过括号调用。

3）、事件修饰符

①、stop

  • 作用：阻止事件冒泡。
  • 示例：在子元素事件中添加.stop修饰符（如@click.stop），可避免父元素触发同类事件。
  • 对比原生实现：等效于event.stopPropagation()。

②、self

  • 作用：仅当事件由当前元素自身触发时执行回调。
  • 示例：父元素添加.self修饰符（如@click.self），子元素触发事件时父元素不会响应。
  • 应用场景：避免子元素事件冒泡导致父元素误触发。

③、prevent、capture、once、passive

|---------|---------------|------------------------|
| 修饰符 | 功能 | 等效原生方法 |
| prevent | 阻止默认行为 | event.preventDefault() |
| capture | 启用事件捕获模式 | 无直接等效，需手动设置 |
| once | 事件仅触发一次 | 需手动移除事件监听 |
| passive | 优化滚动性能，避免警告日志 | 无直接等效 |

常用事件修饰符总结：

  • .stop：阻止冒泡
  • .prevent：阻止默认行为
  • .capture：启用捕获模式
  • .self：仅自身触发有效
  • .once：单次执行
  • .passive：提升滚动性能

4）、按键修饰符

Vue中的按键修饰符用于处理键盘事件。通过@keydown等指令可绑定键盘事件，常见修饰符包括enter、tab、delete等，用于限定特定按键触发事件。

①、@keydown修饰符

通过@keydown绑定键盘事件时，默认所有按键均会触发回调函数。若需限定特定按键触发，需通过原生事件判断keyCode，例如回车键对应keyCode为13。

②、@keydown.enter修饰符

使用@keydown.enter修饰符可限定仅回车键触发事件。输入其他内容时无响应，按下回车键时才会执行绑定的回调函数。

③、常见按键修饰符

  • tab：仅Tab键触发
  • delete：仅删除键触发
  • esc：仅Esc键触发
  • 方向键（up/down/left/right）：仅对应方向键触发

5）、鼠标修饰符

鼠标修饰符用于限定特定鼠标按键触发事件：

  • left：仅左键点击触发
  • right：仅右键点击触发
  • middle：仅滚轮点击触发

6）、精确修饰符

exact修饰符用于精确匹配组合键。例如@click.ctrl.exact表示必须单独按住Ctrl键点击时才触发事件，若同时按住其他键则无效。

九、双向绑定

双向绑定通常与表单元素如text、checkbox、radio、select等相关联。

1、input双向绑定

TypeScript 复制代码 
<script>
    const app = Vue.createApp({
      data() {
        return {
          message: 'hello',
        }
      },
      template: `
        <div>
            {{message}}
            <input v-model="message"/>
        </div>`,
    })
    app.mount('#root')
  </script>
  • 定义input框并通过v-model指令实现双向绑定
  • 数据与input框值同步更新：当数据变化时input框内容随之变化，反之亦然
  • 单向绑定与双向绑定的区别：数据变化影响视图为单向，视图变化影响数据则为双向
  • v-model替代value属性：使用v-model后无需额外编写value属性

2、textarea双向绑定

代码同上： <textarea v-model="message"/>

  • 传统HTML中textarea需编写闭合标签
  • Vue中简化写法：通过单标签+v-model指令实现双向绑定
  • 底层自动处理绑定关系：开发者仅需关注语法结构
  • 数据与文本域内容实时同步：修改任一方均会触发另一方更新

3、checkbox双向绑定

TypeScript 复制代码 
const app = Vue.createApp({
      data() {
        return {
          message: [],
        }
      },
      template: `
        <div>
          {{ message }}
          Jack <input type="checkbox" v-model="message" value="jack" />
          Bob <input type="checkbox" v-model="message" value="dell" />
          John <input type="checkbox" v-model="message" value="lee" />
        </div>
      `
    })
  • 单个checkbox绑定逻辑：v-model对应布尔值（true/false）控制选中状态
  • 多个checkbox绑定逻辑：
    • 数组存储选中项：需为每个input设置value属性标识选项内容
    • 动态更新机制：勾选时value值加入数组，取消勾选时从数组移除
  • value属性的必要性：明确选项标识以确保数据准确存储

另外：checkbox可以通过true-value和false-value属性替换默认布尔值，例如true-value="hello"表示选中时同步值为hello，false-value="word"表示未选中时同步值为word。

4、radio双向绑定

TypeScript 复制代码 
const app = Vue.createApp({
      data() {
        return {
          message: '',
        }
      },
      template: `
        <div>
          {{ message }}
          Jack <input type="radio" v-model="message" value="jack" />
          Bob <input type="radio" v-model="message" value="dell" />
          John <input type="radio" v-model="message" value="lee" />
        </div>
      `
})

|--------|-------------|-------------|
| 对比维度 | checkbox | radio |
| 数据存储类型 | 数组（允许多选） | 字符串（仅单选） |
| 初始值设定 | 空数组/布尔值 | 空字符串 |
| 选中逻辑 | 多选项独立存储 | 互斥仅存当前选中项 |
| 典型应用 | 多选场景（如兴趣选择） | 单选场景（如性别选择） |

5、select双向绑定

TypeScript 复制代码 
<script>
    const app = Vue.createApp({
      data() {
        return {
          message: '',
        }
      },
      template: `
        <div>
            {{message}}
            <select v-model="message">
                <option disabled value="">请选择内容</option>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
            </select>
        </div>`,
    })
    app.mount('#root')
  </script>
  • select标签通过v-model实现双向绑定，需定义字符串类型数据（如message）存储选中值
  • option需显式声明value属性（如value="a"），未声明时默认以文本内容作为value值
  • 双向绑定验证：
    • 修改vm.$data.message值可同步更新select选中状态
    • 选中option时数据自动更新为对应value值

6、select多选双向绑定

TypeScript 复制代码 
<script>
    const app = Vue.createApp({
      data() {
        return {
          message: [],
          options: [
            {
              text: 'A',
              value: { value: 'A' },
            },
            {
              text: 'B',
              value: { value: 'B' },
            },
            {
              text: 'C',
              value: { value: 'C' },
            },
          ],
        }
      },
      template: `
        <div>
            {{message}}
            <select v-model="message" multiple>
                <option v-for="item in options" :value="item.value">{{item.text}}</option>
            </select>
         </div>`,
    })
    app.mount('#root')
  </script>
  • multiple属性实现多选功能，绑定数据需初始化为空数组
  • 动态渲染优化：
    • 通过v-for循环options数组生成option（含text/value属性）
    • value支持对象类型存储，实际保存值为item.value而非显示文本
  • 数据存储机制：
    • 多选时自动以数组形式存储所有选中项的value值
    • 当value为对象时，直接保存完整对象结构

7、表单双向绑定指令修饰符

v-model指令支持修饰符，用于优化表单控件的数据同步行为，包括lazy、number和trim三种类型。

①、lazy修饰符

  • 作用：将实时数据同步改为失焦触发，即仅在输入框失去焦点时更新绑定数据。
  • 应用场景：减少频繁数据同步带来的性能开销，适用于内容需确认后再提交的场景。

②、number修饰符

  • 功能：自动将输入内容转为数值类型，避免type="number"的输入框仍返回字符串的问题。

③、trim修饰符

  • 功能：自动去除输入内容首尾空格，中间空格保留。
  • 验证方式：通过控制台检查DOM内容可确认空格是否被过滤。

OK，今天的内容就到这里吧，下期再会啦！

相关推荐
wow_DG5 小时前
【Vue2 ✨】Vue2 入门之旅（九）：Vue Router 入门
前端·javascript·vue.js
zkkkkkkkkkkkkk6 小时前
vue组件中实现鼠标右键弹出自定义菜单栏
javascript·vue.js·vue
Tanjc5187 小时前
uniapp H5预览图片组件
前端·vue.js·uni-app
珍宝商店9 小时前
Vue.js 中深度选择器的区别与应用指南
前端·javascript·vue.js
货拉拉技术9 小时前
微前端中的错误堆栈问题探究
前端·javascript·vue.js
陶甜也10 小时前
无需服务器，免费、快捷的一键部署前端 vue React代码--PinMe
服务器·前端·vue.js
一 乐10 小时前
在线宠物用品|基于vue的在线宠物用品交易网站(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·|在线宠物用品交易网站
给力学长11 小时前
洗衣店小程序的设计与实现
java·数据库·vue.js·小程序·node.js
gnip11 小时前
深度封装tree公共组件
前端·javascript·vue.js
热门推荐
01UV安装并设置国内源02奈飞工厂官网，国内Netflix影视在线看|中文网页电脑版入口03Xget：下一代开源资源获取加速引擎，让你的文件下载、储存库克隆和镜像拉取快如闪电04不再让Windows更新！&Edge游戏助手卸载及关闭自动更新05KGG转MP3工具|非KGM文件|解密音频06Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code07Linux下V2Ray安装配置指南08jdk21下载、安装（Windows、Linux、macOS）09A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程10【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）