从0到1学JS：写个放大镜

每日一kun：喜欢一切可爱的人与事，悦耳的风铃、伸懒腰的猫咪、叽叽喳喳的小鸟、在风里翻飞的书页上的漂亮的文字。喜欢世间万物，但我更喜欢你，因为你是可爱本身

今天用JS写个放大镜，可以放大输入框里面的内容，当输入文字时，或者文本框得到焦点且文本框里面有内容时同步上文本框上面出现一个原本内容的放大镜，当文本框没有内容或文本框失去焦点时时，放大镜隐藏，话不多说，上代码。

JS代码

 var div = document.querySelector(".div02")
        var input = document.querySelector("input")
        input.addEventListener("keyup",function(e){
            if(this.value==''){
                div.style.display="none";
            }else{
                div.innerHTML = this.value
                div.style.display="block"
            }
        })
        input.addEventListener("blur",function(){
            div.style.display="none"
        })
        input.addEventListener("focus",function(){
            if(this.value !=''){
                div.style.display="block"
            }
        })
        
HTML代码
    <div class="div01">
        <div class="div02">123</div>
        <input>
    </div>
CSS代码
    .div01{
        position: relative;
        margin: 100px 100px;
        width: 300px;
        height: 300px;
    }
    .div02{
        font-size: 45px;
        display: none;

    }
    input{
        position: absolute;
    }

结果

有内容或得到焦点时

没有内容

失去焦点

思考：Vue出名的就是数据双向绑定，修改数据时，页面同步渲染，会不会用的就是这种键盘触发事件的原理？