Javascript VueJS何时使用id和类

关于Vue如何工作，我还有一个问题，如果这是一个愚蠢的问题，请原谅。我从VanillaJS开始，元素通常被声明为

<div id="testId" class="testClass">This is some test element</div>

但是，在跳转到VueJS之后，我可以简单地（以一种好的方式）替换上面的内容，如下所示

.testClass {
    border: solid red 1px;
}

<template>
    <div class="testClass" @click="handleClick">This is some test element</div>
</template>

<script>
export default{
    methods: {
        handleClick(){ 
            console.log("clicked");
        }
    }
}
</script>

<style scoped>
.testClass{
    border: solid red 1px;
}
</style>

这是一些测试元素
导出默认值{
方法：{
handleClick（）{
控制台日志（“单击”）；
}
}
}
.testClass{
边框：纯红1px；
}

我注意到我可以不使用

id

复制整个示例

---

我意识到我没有经常使用

id

那么糟糕吗？还有我遗漏的任何用例吗？

不，我不认为这是不好的。拥有更多id并不能改善站点体验。

id将是元素的唯一部分。在

Vue

中，您可以直接绑定事件，使用类应用css。所以我没有看到

id

s的用例。而且在元素中使用

id

s也不是强制性的。这只是处理元素的另一种方式。

类对于对共享某些属性的一组元素进行分类很有用，然后您可以使用javascript或css来更改元素集

id用于标识页面中的组件，它必须是唯一的。如果您有一个包含4个部分的页面，因此每个部分都有自己的id（section1、section2、section3、section4），那么您可以在页面内创建一个链接，使用类似这样的a标记访问每个部分

我发现

id

属性对于查找DOM中的元素非常有用，例如用于测试目的

---

好吧，这就是我的观点和我所知道的：你认为你能详细说明一下吗？

<template>
    <div class="testClass" @click="handleClick">This is some test element</div>
</template>

<script>
export default{
    methods: {
        handleClick(){ 
            console.log("clicked");
        }
    }
}
</script>

<style scoped>
.testClass{
    border: solid red 1px;
}
</style>