如何使用Vue.js渐进式增强PHP渲染的表单，兼容无JS运行场景

结论 #

不需要借助服务端渲染判断输出Vue专属标记还是普通HTML，客户端侧即可实现完全的降级兼容，服务端保持原有PHP渲染表单的逻辑不变即可。

通用实现方案 #

方案1：原始HTML完全无Vue属性，动态注入逻辑 #

原始HTML直接沿用现有PHP渲染的纯原生表单，不加入任何Vue相关的语法标记，所有Vue的事件绑定、数据同步逻辑都在Vue实例挂载完成后通过DOM API动态实现：

<!-- 服务端输出的原始HTML完全不变 -->
<div id="app">
  <form action="https://example.com" method="POST">
    <div class="form-group">
      <input type="text" name="name" value="<?php echo $_SESSION['name']['value'] ?? ''; ?>" />
      <span class="error-message"><?php echo $_SESSION['name']['error'] ?? ''; ?></span>
    </div>
    <button type="submit" name="submit">Submit</button>
  </form>
</div>

Vue逻辑示例：

var app = new Vue({
  el: '#app',
  data() {
    return {
      name: ''
    }
  },
  mounted() {
    const form = this.$el.querySelector('form')
    const nameInput = this.$el.querySelector('input[name="name"]')
    // 初始化数据
    this.name = nameInput.value
    // 同步输入框数据到Vue实例
    nameInput.addEventListener('input', e => {
      this.name = e.target.value
    })
    // 拦截表单提交
    form.addEventListener('submit', e => {
      e.preventDefault()
      this.submitForm()
    })
  },
  methods: {
    async submitForm() {
      // 此处加入Vuelidate校验逻辑，校验失败直接终止
      // 提交逻辑和原生表单保持参数一致，服务端无需额外适配
      const res = await fetch('https://example.com', {
        method: 'POST',
        body: new FormData(this.$el.querySelector('form'))
      })
      // 处理请求返回结果
    }
  }
})

优势：原始HTML完全符合标准，无任何额外属性，降级逻辑100%兼容
劣势：需要手动实现数据绑定和事件监听，开发成本略高

方案2：使用标准data-*前缀的Vue指令，兼容HTML规范 #

HTML本身允许任意data-*开头的自定义属性，浏览器遇到未知属性会直接忽略，不会影响原生表单功能。你可以修改Vue的属性前缀配置，将所有Vue指令的前缀改为data-v-，直接在原始HTML里写符合规范的Vue语法即可：
Vue配置示例：

// Vue 2 配置
Vue.config.attributePrefix = 'data-v-'
// Vue 3 配置
const app = createApp(App)
app.config.compilerOptions.attributePrefix = 'data-v-'

修改后的表单HTML：

<form data-v-on:submit.prevent="submit" action="https://example.com" method="POST">
  <div class="form-group">
    <input data-v-model="name" type="text" name="name" value="<?php echo $_SESSION['name']['value'] ?? ''; ?>" />
    <span class="error-message" data-v-if="nameError"><?php echo $_SESSION['name']['error'] ?? ''; ?></span>
  </div>
  <button type="submit" name="submit">Submit</button>
</form>

如果不需要过严格的HTML语法校验，甚至可以不用修改前缀，直接用@、v-开头的语法即可，浏览器会直接忽略这些未知属性，原生表单的提交功能完全不受影响。
优势：可以直接使用Vue原生模板语法，开发效率高
劣势：原始HTML会存在额外属性（不影响功能，仅可能导致HTML校验提示警告）

注意事项 #

• 所有表单核心属性（action、method、name、输入框value等）必须由服务端渲染输出，不要依赖Vue动态设置，保证降级时功能完整
• AJAX提交的参数格式、请求地址和原生表单保持完全一致，服务端只需根据X-Requested-With请求头判断返回JSON还是页面响应即可，无需额外改造

内容的提问来源于stack exchange，提问作者Timothy Fisher