原生js如何转成vue项目

想要把一个csshtmljs的网站整合成vue组件，初步了解template里面放html，style里面放css，script里面放js代码，但是由于这是vue文件所以，script应该是需要遵循vue.js语法在，不知道下面这串代码怎么遵循vue语法。
附上相关js代码
js

    const buttons = document.querySelectorAll(".card-buttons button");
        const sections = document.querySelectorAll(".card-section");
        const card = document.querySelector(".card");

        const handleButtonClick = e => {
          const targetSection = e.target.getAttribute("data-section");
          const section = document.querySelector(targetSection);
          targetSection !== "#about" ?
          card.classList.add("is-active") :
          card.classList.remove("is-active");
          card.setAttribute("data-state", targetSection);
          sections.forEach(s => s.classList.remove("is-active"));
          buttons.forEach(b => b.classList.remove("is-active"));
          e.target.classList.add("is-active");
          section.classList.add("is-active");
        };

        buttons.forEach(btn => {
          btn.addEventListener("click", handleButtonClick);
        });
    }
  }

给.card-buttons button 元素绑定@click="handleButtonClick" 类名动态添加可以改成object https://cn.vuejs.org/v2/guide/class-and-style.html
还是建议你多看下Vue文档，熟悉之后就知道怎么改了

用三段式写原生没关系，直接挪就行