我如何将 vanilla Js 代码转换为 vue js 代码

Posted 2023-02-22

【中文标题】我如何将 vanilla Js 代码转换为 vue js 代码

【英文标题】：How do i convert vanilla Js code into vue js code

【发布时间】：2020-07-12 09:10:36

【问题描述】：

//Logged out Events
document.getElementById("login-help").addEventListener("click", function()
    document.querySelector(".forgotten").style.display = "flex";
    document.querySelector(".login").style.display = "none";
    document.querySelector(".signup").style.display = "none";
)

document.getElementById("forgotten-back").addEventListener("click", function()
    document.querySelector(".forgotten").style.display = "none";
    document.querySelector(".login").style.display = "flex";
    document.querySelector(".signup").style.display = "none";
)

document.getElementById("signup-btn").addEventListener("click", function()
    document.querySelector(".forgotten").style.display = "none";
    document.querySelector(".login").style.display = "none";
    document.querySelector(".signup").style.display = "flex";
)

document.getElementById("signup-back").addEventListener("click", function()
    document.querySelector(".forgotten").style.display = "none";
    document.querySelector(".login").style.display = "flex";
    document.querySelector(".signup").style.display = "none";
)

这是我的 vanilla Js 代码，我正在尝试将其转换为 vue js 代码，但是当我输入此代码时出现错误。如何将我的 vanilla js 代码转换为 vue js？

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default 
  name: "Home",
  methods: 
    //Logged out Events
document.getElementById("login-help").addEventListener("click", function()
    document.querySelector(".forgotten").style.display = "flex";
    document.querySelector(".login").style.display = "none";
    document.querySelector(".signup").style.display = "none";
)

document.getElementById("forgotten-back").addEventListener("click", function()
    document.querySelector(".forgotten").style.display = "none";
    document.querySelector(".login").style.display = "flex";
    document.querySelector(".signup").style.display = "none";
)

document.getElementById("signup-btn").addEventListener("click", function()
    document.querySelector(".forgotten").style.display = "none";
    document.querySelector(".login").style.display = "none";
    document.querySelector(".signup").style.display = "flex";
)

document.getElementById("signup-back").addEventListener("click", function()
    document.querySelector(".forgotten").style.display = "none";
    document.querySelector(".login").style.display = "flex";
    document.querySelector(".signup").style.display = "none";
)
  ,
  components: 
    HelloWorld
  
;
</script>

【问题讨论】：

无法“自动”将 Vanilla JS 转换为 Vue。这需要重写您当前的应用程序。请阅读 Vue 的工作原理。

【参考方案1】：

您在 vue 文件的模板部分添加点击事件，而不是在脚本（js）部分。它通常看起来像这样：

 <button @click="yourFunction">Click me</button>

然后在你的方法中你有：

 methods: 
   yourFunction() 
     this.addClass = true;
   ,
   

添加样式的方法有很多种，其中一种就是绑定类：

 <button :class="'hidden': addClass"  

你在数据中有一些布尔变量：

  data() 
    return 
     addClass: false,
    ;
    

您可以在官方文档中阅读更多内容：https://vuejs.org/v2/guide/events.html 和 https://vuejs.org/v2/guide/class-and-style.html

【参考方案2】：

您需要根据要发生的操作绑定类： Vue binding classes and styles 您绑定的类需要由 data() 定义，然后将 add events 定义为 html 元素以切换这些类或以任何方式操作