使用Vue.js和XHTML

xn1cxnb4 于 2023-06-30 发布在 Vue.js

关注(0)|答案(1)|浏览(148)

在使用Vue.js的页面中，通常会有一些属性的名称以冒号作为第一个字符或中间的某个字符（例如：在v-bind或v-on之后）。那些以冒号开头的字符串不是Namespaces in XML定义的命名空间格式，并且对于那些在冒号之前有一些前缀的字符串，需要使用xmlns:prefix语法声明这些前缀。甚至有可能以@作为属性名的开头，这甚至是普通XML都禁止的。
因此，在XHTML文档中使用Vue.js是否可行？可以只使用其功能的一个子集吗？或者是否存在简单的解决方法来解决上述问题，以一种直接和可互操作的方式实现Vue.js的所有功能？

vue.js

来源：https://stackoverflow.com/questions/74587490/usage-of-vue-js-with-xhtml

1条答案

按热度按时间

bq3bfh9z1#

我最近遇到了一个问题，我不得不将Vue.js和XHTML结合起来。我通常在我的项目中每天使用Vue.js和html，但突然我发现自己需要将其与XHTML集成。
样本问题之一是

<input id="test" name="test" v-on:click="test()" />

XHTML会将此代码v-on:click="test()"检测为错误
我的解决方案是在XHTML完成渲染后通过JSnative添加该属性

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/vue@2.6.14/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>

赞(0）回复(0）举报 2023-06-30

我来回答

使用Vue.js和XHTML

1条答案

相关问题

热门标签

最新问答