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. 啥前缀也没的:普通的属性,如:labelprop
      • 这些属性通常是静态的,不涉及动态绑定或事件监听
  • 简单来说,对应着官网提供的 API 属性就是静态的,但也可以加冒号动态化;而事件就是上述的第二种带 @ 的形式

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