vue中变量下面有横线是什么 • Worktile社区

不及物动词

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

在Vue中，变量下面有横线通常是指变量的命名采用了"kebab-case"命名规则，也称为短横线命名或连字符命名。

Vue中的变量命名通常有两种风格，一种是"camelCase"命名，即首字母小写，后面每个单词的首字母大写；另一种就是"kebab-case"命名，即所有单词都用小写字母，并且使用短横线连接。

例如，在Vue中声明一个属性或者组件的变量时，可以使用"kebab-case"命名，例如：

data() {
  return {
    my-variable: 'Hello World'
  }
}

在模板中使用这个变量时，可以直接使用"my-variable"，例如：

<div>{{ my-variable }}</div>

声明一个组件时也可以使用"kebab-case"命名，例如：

Vue.component('my-component', {
  // 组件的定义
})

使用这个组件时，也是直接使用"my-component"，例如：

<my-component></my-component>

总的来说，Vue中使用"kebab-case"命名的变量是一种常见的命名风格，可以使代码更加易读和易于理解。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，变量下划线表示该变量是一个私有变量、属性或方法。它的命名约定是Vue中的一种编码风格，用于表示一个只能在组件内部访问的私有成员，而不能被组件外部访问。

下面是关于在Vue中使用变量下划线的一些注意事项：

私有变量：在Vue组件中，使用下划线定义一个私有变量可以避免命名冲突和变量污染。例如： _privateVariable 。只能在组件内部使用的私有变量，无法在组件的模板中使用。
私有属性：在Vue组件实例中，可以使用下划线定义一个私有属性。例如： _privateProperty。私有属性只能在组件实例内部使用，无法在组件的模板中访问。
私有方法：在Vue组件中，可以使用下划线定义一个私有方法。例如： _privateMethod()。私有方法只能在组件内部调用，无法在模板中直接调用。
组件选项：在Vue组件选项中，使用下划线表示一个私有选项。例如：_privateOption。私有选项仅在组件的定义中可用，而无法在组件的实例中访问。
编码约定：使用下划线表示私有成员是Vue的一种编码约定，它有助于将公共成员与私有成员区分开来，并提醒开发者私有成员的作用范围。

总之，Vue中使用下划线来表示私有成员是一种常见的编码风格，在组件内部使用下划线定义的变量、属性和方法只能在组件内部使用，无法被组件外部访问。这种方式有助于提高代码的可维护性和可读性。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，变量下面的横线（也称为破折号）在命名规范中被称为"kebab-case"（烤串式命名法）或"hyphenated-case"（连字符命名法）。这是一种命名变量或组件的约定，其中单词之间使用连字符分隔。例如，使用kebab-case命名的变量会以类似"my-variable"的形式出现。

Vue官方推荐使用kebab-case来命名Vue组件的属性、方法和事件。这是因为在HTML中，属性和事件名是区分大小写的，并且大多数HTML解析器不支持驼峰式命名法（CamelCase）的属性和事件名。因此，在Vue组件中使用kebab-case确保了属性和事件能够在HTML模板中正常工作。

要在Vue中使用kebab-case命名变量或组件，可以按照以下步骤操作：

data: {
  my-variable: 'Hello World'
},
methods: {
  my-method: function() {
    // 方法逻辑
  }
}

<div>{{ my-variable }}</div>

或者，绑定一个kebab-case的事件处理函数：

<button v-on:click="my-method">Click me</button>

使用kebab-case命名规范有助于提高代码的可读性和一致性，并且确保在Vue组件中使用时能够与HTML进行良好的交互。请注意，Vue中的组件名称仍然推荐使用PascalCase（大驼峰命名法）。例如，在定义Vue组件时使用PascalCase的命名：

Vue.component('MyComponent', {
  // 组件逻辑
})

总结起来，kebab-case是Vue中使用的一种命名约定，用于在HTML模板中与属性和事件进行交互。通过使用这种命名规范，可以确保Vue应用程序的正常运行和易于维护。

1年前 0条评论