JZTXT

vue 的标签内属性的各使用形式

发布时间 2023-12-06 14:07:04作者: 朱呀朱~

标签内属性形式

  • 在 Vue 中，v-xx、@xx 和 :xx 是不同的语法形式，具有不同的用途和语义

    1. v-xx 形式：这是用于注册或使用 Vue 提供的内置指令或自定义指令。v- 是 Vue 指令的前缀，后面跟着指令的名称
      • 例如，内置指令：v-if 可以根据条件控制元素的显示和隐藏，v-for 可以用于循环渲染列表，
    2. @xx 形式：这是 Vue 的事件监听器（Event Listener）形式。@ 符号用于监听 DOM 事件，后面跟着事件的名字。这种形式用于绑定事件监听器到元素上，以便在触发特定事件时执行相应的处理函数
      • 例如，@click 可以用于监听元素的点击事件，当点击发生时执行相应的处理函数（@ 是 v-on 的缩写，即 v-on:click 和 @click 是完全等价的，都用于监听元素的点击事件）
      • 还有 @clear、@change、@input 等
      • 或者在子组件：this.$emit('custom-event')，那父组件就要有 @custom-event 监听
    3. :xx 形式：这是 Vue 的数据绑定缩写。: 符号用于绑定表达式或属性到组件的实例数据上。这种形式用于将数据传递给组件，或者将组件的属性绑定到数据上。这种形式还可以用于动态地设置 HTML 属性
      • 数据绑定，例如，:message="message" 可以将组件的 message 属性绑定到数据中的对应属性上，以便在组件内部使用
      • 还有下拉用到的 :key、:label、:value，按钮的 :icon 等
      • 动态地设置 HTML 属性，例如， :class、:style
    4. 啥前缀也没的：普通的属性，如：label、prop 等
      • 这些属性通常是静态的，不涉及动态绑定或事件监听

  • 简单来说，对应着官网提供的 API 属性就是静态的，但也可以加冒号动态化；而事件就是上述的第二种带 @ 的形式

  • 但要注意，v-model 是用于实现双向数据绑定的快捷方式，它在语法上类似于指令，但它不是以 v-、@、: 等前缀形式出现，也不是普通的属性。它是一种专门用于简化双向数据绑定的 Vue.js 提供的特殊语法