vue为什么没有用class创建 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue没有使用class创建组件是因为Vue采用了基于组件的开发模式，而不是传统的基于类的开发模式。

组件化开发模式：Vue采用了组件化的开发模式，将页面划分为多个可以复用的组件，每个组件都包含了自己的模板、逻辑和样式。通过组合多个组件，可以构建出复杂的页面。
模板语法：Vue使用了一种特殊的模板语法，称为Vue模板语法（或称为Vue指令），它允许开发者在HTML代码中直接使用Vue的特殊指令来动态地渲染页面。通过Vue指令，可以实现数据绑定、条件渲染、循环渲染等功能。
样式作用域：Vue还实现了样式作用域，可以使每个组件的样式只作用于当前组件，不会影响其他组件。这使得组件的样式更加独立和可维护。

通过以上特性，Vue能够更好地实现组件的复用和维护，提高开发效率。相比于传统的基于类的开发模式，Vue的组件化开发模式更加灵活、简洁和易于维护。因此，Vue选择了使用组件而不是class来创建组件。

1年前 0条评论

worktile

Worktile官方账号

Vue使用对象语法来创建组件样式，而不是使用传统的class语法。这是因为Vue的设计哲学是组件化，它试图将HTML、CSS和JavaScript视为一个整体，而不是将它们分开处理。使用对象语法可以更好地体现组件的一致性，使样式的定义更加直观和简洁。
使用对象语法可以更好地支持动态样式的绑定。在Vue中，可以通过绑定数据来动态修改样式对象的属性，实现样式的交互效果。而使用class语法，通常需要通过添加或删除class的方式来实现样式的动态变化，不如对象语法方便和灵活。
对象语法可以提供更好的样式封装和复用。在Vue中，可以将样式对象定义在组件的data选项中，然后在模板中直接引用该对象即可。这样可以将相关的样式属性打包在一个对象中，便于复用和维护。而使用class语法，通常需要在模板中逐个添加class，不够灵活和简洁。
使用对象语法可以更好地支持样式的条件判断和计算。在Vue中，可以在样式对象中使用JavaScript表达式，进行各种判断和计算。这样可以根据不同的条件动态地计算样式的属性值。而使用class语法，需要通过额外的判断和计算来实现样式的变化，不如对象语法方便和简洁。
对象语法可以更好地支持样式的扩展和继承。在Vue中，可以使用对象语法为样式对象添加更多的属性，或者使用extends选项来继承其他的样式对象。这样可以方便地扩展和定制样式的功能。而使用class语法，通常需要通过嵌套class或使用CSS预处理器来实现样式的扩展和继承，不如对象语法方便和直观。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue并不是不能使用class来创建组件，而是推荐使用单文件组件（SFC）的方式来创建组件。

单文件组件是一种将模板、脚本和样式集中在一个文件中的组件开发方式，使用.vue文件格式来编写。在单文件组件中，模板部分使用HTML编写，脚本部分使用JavaScript或TypeScript编写，样式部分使用CSS编写。它可以更好地组织和管理组件的代码，并且提供了更好的代码可读性和维护性。

以下是用单文件组件的方式创建一个Vue组件的操作流程：

创建一个.vue文件，例如HelloWorld.vue。
在.vue文件中，分别编写模板、脚本和样式部分。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="changeMsg">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  },
  methods: {
    changeMsg() {
      this.msg = 'Message Changed!';
    }
  }
}
</script>

<style scoped>
.hello {
  color: red;
}
</style>

在模板中使用{{}}的方式绑定数据，可以在Vue实例的data属性中定义需要绑定的数据。在脚本中，通过export default {}将组件的选项导出，其中包含了组件的数据、方法等。样式部分可以使用CSS语法来定义，使用scoped属性可以使样式只作用于当前组件。

在需要使用该组件的地方，引入并注册该组件。

import HelloWorld from './HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}

通过import语句引入该组件，并在components选项中注册该组件。

在模板中使用该组件。

<template>
  <div>
    <HelloWorld></HelloWorld>
  </div>
</template>

通过自定义标签的方式在模板中使用该组件。

以上就是使用单文件组件的方式创建一个Vue组件的流程。通过这种方式，可以更好地组织和管理组件的代码，提高开发效率和代码的可维护性。尽管可以使用class来创建组件，但使用单文件组件的方式更加灵活、可读性更高，是目前推荐的组件开发方式。

1年前 0条评论