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

Question

<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删除就正常输出了

这是为什么呀

Answer 1

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

都要改用vue对应的方法