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

标签内属性形式

• 在 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 提供的特殊语法