Vue.js在XHTML文档中的可行性及兼容实现方案探讨

完全可以在XHTML文档中使用Vue.js，而且不需要局限于功能子集，通过简单的语法调整就能实现全功能兼容，实用性很强。以下是具体的解决方法：

方法一：命名空间声明+完整指令语法 #

XHTML要求带冒号的属性必须对应已声明的命名空间，我们可以在根元素添加Vue的命名空间，然后使用完整的指令写法：

<html xmlns:v="http://vuejs.org">
  <body>
    <div id="app">
      <!-- 用v:bind替代:缩写 -->
      <p v:bind:title="message">鼠标悬停看提示</p>
      <!-- 用v:on替代@缩写 -->
      <button v:on:click="showMessage">点击触发</button>
    </div>
  </body>
</html>

这种写法完全符合《Namespaces in XML》规范，所有Vue指令都能正常生效。

方法二：使用data-*属性形式的指令 #

Vue支持将指令转换为data-前缀的格式，这种写法不需要额外声明命名空间，天然符合XHTML规范：

<div id="app">
  <!-- v-bind:title → data-v-bind:title -->
  <p data-v-bind:title="message">鼠标悬停看提示</p>
  <!-- v-on:click → data-v-on:click -->
  <button data-v-on:click="showMessage">点击触发</button>
</div>

所有Vue核心指令、自定义指令都可以用这种方式转换，不会丢失任何功能。

方法三：用Render函数/JSX完全脱离模板 #

如果不想修改模板语法，可以直接通过JavaScript编写Render函数或JSX来构建UI：

const app = Vue.createApp({
  data() {
    return { message: 'Hello Vue!' }
  },
  methods: {
    showMessage() {
      alert(this.message)
    }
  },
  render() {
    return Vue.h('div', [
      Vue.h('p', { title: this.message }, '鼠标悬停看提示'),
      Vue.h('button', { onClick: this.showMessage }, '点击触发')
    ])
  }
})
app.mount('#app')

此时XHTML文档里只需要一个空的挂载容器<div id="app"></div>，所有绑定逻辑都在JS中实现，完全规避了XHTML的属性限制。

实用性说明 #

上述方法都非常简便，不需要对Vue的功能做任何阉割，不管是简单的交互页面还是复杂的单页应用，都能在XHTML环境下正常运行，和在HTML中使用Vue的体验几乎一致。

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