Vue Macros

简体中文

English

简体中文

English

外观

页面导航

shortVmodel ​

稳定性： 稳定

v-model 的语法糖。

v-model -> :: / $ / *

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

特性支持
Vue 3✅
Nuxt 3✅
Vue 2❌
Volar Plugin✅

设置 ​

安装 ​

bash
npm i -D @vue-macros/short-vmodel

Vite 集成 ​

ts
// vite.config.ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import { transformShortVmodel } from '@vue-macros/short-vmodel'

export default defineConfig({
  plugins: [
    Vue({
      template: {
        compilerOptions: {
          nodeTransforms: [
            transformShortVmodel({
              prefix: '$',
            }),
          ],
        },
      },
    }),
  ],
})

选项 ​

prefix: '::' | '$' | '*'，默认为 '$'

用法 ​

$ 美元符号 (默认) ​

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

:: 双引号 ​

vue
<template>
  <!-- prettier-ignore -->
  <input ::="msg" />
  <!-- => <input v-model="msg" /> -->
  <demo ::msg="msg" />
  <!-- => <input v-model:msg="msg" /> -->
</template>

* 星号 ​

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

Volar 配置 ​

jsonc
// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/short-vmodel"
      // ...
    ],
    "vueMacros": {
      "shortVmodel": {
        "prefix": "$"
      }
    }
  }
}

已知的问题 ​

  • Prettier 会将 ::= 格式化为 :=，如果 prefix 为 ::，则需要 prettier-ignore