HTML中的Vue代码未生效问题

最新推荐文章于 2024-08-06 11:33:37 发布

戴头巾的靓仔

最新推荐文章于 2024-08-06 11:33:37 发布

阅读量1.4k

点赞数

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/weixin_43535453/article/details/129670782

版权

文章讨论了在Vue应用中，应当将newVue实例化代码放置在HTMLbody底部，以确保el绑定的元素已经加载，防止数据无法正常显示和事件处理失效的问题。当newVue的脚本在目标元素之前加载时，会导致Vue无法找到对应的DOM节点进行绑定。

摘要由CSDN通过智能技术生成

展示不出vue数据的建议把new Vue的js代码放到body的最底，
防止el绑定的值未加载。
例如：

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <meta charset="UTF-8">
    <title>Title</title>


<div id="app">
    <span v-cloak v-bind:title="message">111111</span>
    <button v-on:click="sayHi">sayHi</button>
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:"hello,world"
            },
            methods:{
                sayHi:function (event) {
                    alert("hello");
                }
            }
        })
    </script>
</body>
</html>