vue基础知识

vue基础知识总结

初始vue

下面给出的例子，是我对vue最初始的直观感受

如果使用js来写一个计数器，需要先使用dom来选中html元素，然后添加绑定事件

//html
 <div>
        <button id="sub">-</button>
        <span id="count">0</span>
        <button id="add">+</button>
    </div>
//js
<script>
        var sub = document.querySelector('#sub');
        var add = document.querySelector('#add');
        console.log(count.innerHTML);
        console.log(Number(count.innerHTML));
        
        sub.addEventListener('click',()=>{
   
            console.log('sub run');
            count.innerHTML -= 1;
            if(count.innerHTML < 0){
   
                count.innerHTML = 0;
            }
        })
        add.addEventListener('click',()=>{
   
            console.log('add run');
            count.innerHTML = Number(count.innerHTML) + 1;
        })
    </script>

以上代码是使用js编写的计数器

下面为运用vue编写的计数器

//html
  <div id="app"