如何使用Vue.js逐步增强PHP呈现的表单

Question

我有一组功能齐全的表单，它们用PHP呈现，在服务器端看起来像这样：

<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.js来逐步增强这些表单的方法是什么。例如，拦截表单提交并执行AJAX请求，除了使用Vue的所有其他数据绑定功能外，还使用Vuelidate。

如果我只是将实例直接装载到#app上，那么它会起作用，但如果vue没有加载，我在HTML中编写的任何vue属性最终都会使HTML标记无效。

<div id="app">
<form @submit.prevent="submit" action="https://example.com" method="POST"
//...
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
// If the script never ran then @submit.prevent="submit" would be in the HTML markup.

我的最终目标是让Vue.js使用AJAX提交一个表单，该表单在服务器端使用PHP进行处理，但也可以在Vue没有加载的情况下使用服务器端PHP渲染。

我是否需要使用服务器端渲染，以便服务器可以确定是渲染Vue标记还是常规HTML？对此有没有共同的方法？

Answer 1

web浏览器的一点是，它们往往是向前兼容的。正因为如此，非标准但连贯的HTML属性在实践中往往被忽略。因此，v-model、v-on、v-slot和v-bind应该无处不在。

速记语法(@event、#slot(则不同。这个StackOverflow回答表明SGML在以@、:或#开头的属性名称方面存在问题。HTML版本4是基于SGML的，所以我想那里也会有问题。

不过，HTML5规范似乎要宽松得多。

为了进行渐进增强，我建议使用长格式的v-slot、v-on和v-bind属性。这些应该没问题。

其他可能有用的提示：

• 如果您想逐步增强{{ someVariable }}替换，那么您最好在<span>上使用v-text指令。

• 您可以使用动态组件将普通HTML元素增强为自定义Vue组件。例如

  <input is="AwesomePhoneNumberInput">