提问人：ByteEater 提问时间：11/27/2022 更新时间：6/25/2023 访问量：197
Vue.js 与 XHTML 的用法
Usage of Vue.js with XHTML
问：
在使用 Vue.js 的页面中，通常有一些属性的名称以冒号作为其第一个字符或中间的某个位置（例如，在 或 之后）。那些以冒号开头的命名空间在 XML 中不是每个命名空间的命名空间格式正确的，对于那些在冒号之前有一些前缀的人，这些前缀需要用语法声明。甚至有可能以 开头属性名称，即使是普通的 XML 也已经禁止了。v-bindv-onxmlns:prefix@
因此，在 XHTML 文档中使用 Vue.js 是否有可能，那么，实用性如何？可以只使用其功能的子集吗？或者是否存在针对上述问题的简单解决方法，以直接且可互操作的方式启用 Vue.js 的所有功能？
答：
1赞
trysetyoutomo
6/24/2023
#1
我最近遇到了一个问题，我必须将 Vue.js 和 XHTML 结合起来。我通常每天在我的项目中使用 Vue.js 和 html，但突然我发现自己处于需要将其与 XHTML 集成的情况。
其中一个示例问题是
<input id="test" name="test" v-on:click="test()" />
XHTML 会将此代码检测为错误v-on:click="test()"
我的解决方案是在XHTML完成渲染后通过JS本机添加该属性
XHTML的
<input id="test" name="test" />
JavaScript的
document.getElementById("test").setAttribute('v-on:click', 'test()');
setTimeout(function(){
// execute Vue process
},100);
基本上，流程是最初遵循有效的 HTML，然后在呈现 HTML 后对其进行调整
以下是完整的代码片段代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<h1 id="welcome" >Click me!!</h1>
</div>
<script>
document.getElementById("welcome").setAttribute("v-on:click","test()");
setTimeout(function(){
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
methods:{
test:function(){
alert('test!');
}
},
mounted() {
console.log('Component mounted');
}
});
},100)
</script>
</body>
</html>上一个：我需要构建html css键值对
下一个：提交时值不会更改
评论
@并且是 V-Bind 和 V-ON 的简写。它们是语法糖，被编译成符合 html 规范的 html。: