Vue Macros

简体中文

English

简体中文

English

外观

shortBind ​

稳定性: 实验性 ⚠️ 实验性功能，风险自负

绑定相同数据名称的 prop 的语法糖。

:value -> :value="value"

如果你对此功能有任何疑问，欢迎在 RFC 中发表评论。

FeaturesSupported
Vue 3✅
Nuxt 3✅
Vue 2❌
Volar Plugin✅

用法 ​

基本用法 ​

vue
<template>
  <input :msg />
  <!-- => <input :msg="msg" /> -->
  <demo $msg />
  <!-- => <input $msg="msg" /> -->
</template>
<template>
  <input :msg />
  <!-- => <input :msg="msg" /> -->
  <demo $msg />
  <!-- => <input $msg="msg" /> -->
</template>

和 shortVmodel 一起使用 ​

vue
<template>
  <input ::msg />
  <!-- => <input ::msg="msg" /> => <input v-model:msg="msg" /> -->
  <demo $msg />
  <!-- => <input $msg="msg" /> => <input v-model:msg="msg" /> -->
  <demo *msg />
  <!-- => <input *msg="msg" /> => <input v-model:msg="msg" /> -->
</template>
<template>
  <input ::msg />
  <!-- => <input ::msg="msg" /> => <input v-model:msg="msg" /> -->
  <demo $msg />
  <!-- => <input $msg="msg" /> => <input v-model:msg="msg" /> -->
  <demo *msg />
  <!-- => <input *msg="msg" /> => <input v-model:msg="msg" /> -->
</template>

Volar 配置 ​

jsonc
// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/short-bind"
      // ...
    ]
  }
}
// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/short-bind"
      // ...
    ]
  }
}

ESLint 配置 ​

jsonc
// .eslintrc
{
  "rules": {
    "vue/valid-v-bind": "off"
  }
}
// .eslintrc
{
  "rules": {
    "vue/valid-v-bind": "off"
  }
}