ajax为什么不能在vue元素中使用

<div id="app">

    <input type="button" value="Get Server Time" id="btn">

</div>

<div id="showtime" class="displaybox"></div>
 
<script>
(function(){
 
    var btn = document.getElementById("btn");
    btn.addEventListener('click', getServerTime);
    var xhr = new XMLHttpRequest();
 
    function getServerTime() {
        var myurl = 'data.php';
        myRand = parseInt(Math.random() * 99999999);
        // 构造随机数，防止缓存问题
 
        var modurl = myurl + "?rand=" + myRand;
        xhr.open("GET", myurl);
        xhr.onreadystatechange = xhrResponse;
        xhr.send();
    }
 
    function xhrResponse() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var timeValue = xhr.responseText;
            
            document.getElementById('showtime').innerHTML = timeValue;;
        }
    }
    
<script>
    new Vue({
        el:"#app"
    })
</script>
})()
</script>

这是部分代码，我为input绑定了ajax函数，实现实时输出数据。

但是当div绑定了vue，就是添加了id="app"，就导致绑定的ajax函数失效，id删除就正常输出了

这是为什么呀

div绑定了vue，div的代码就变成vue的模板，不能再用  btn.addEventListener('click', getServerTime); 绑定事件
也不要 document.getElementById('showtime').innerHTML = timeValue 这样修改元素属性

都要改用vue对应的方法
 

你可以用axios jq不推荐在vue里用 jquery还是能用的 你没配好

vue会渲染id为app的div，所以你的ajax失效了

<div id="app">
 
    <input type="button" value="Get Server Time" id="btn">
 
</div>
 
<div id="showtime" class="displaybox"></div>
 
<script>
(function(){
 
    var btn = document.getElementById("btn");
    btn.addEventListener('click', getServerTime);
    var xhr = new XMLHttpRequest();
 
    function getServerTime() {
        var myurl = 'data.php';
        myRand = parseInt(Math.random() * 99999999);
        // 构造随机数，防止缓存问题
 
        var modurl = myurl + "?rand=" + myRand;
        xhr.open("GET", myurl);
        xhr.onreadystatechange = xhrResponse;
        xhr.send();
    }
 
    function xhrResponse() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var timeValue = xhr.responseText;
            
            document.getElementById('showtime').innerHTML = timeValue;;
        }
    }
})()
</script>
<script>
    new Vue({
        el:"#app"
    })
</script>

addEventListener事件得在vue的mounted生命周期中添加

你这35行39行的script删了试试，这么看难道不报错吗？

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y