@@ -37,7 +37,7 @@ sidebar: auto
37
37
### 组件名为多个单词<sup data-p =" a " >必要</sup >
38
38
39
39
40
- ** 组件名应该始终是多个单词的,根组件 ` App ` 以及 ` <transition> ` 、` <component> ` 之类的 Vue 内置组件除外。 **
40
+ ** 组件名应该始终是多个单词的,根组件 ` App ` 以及 ` <transition> ` 、` <component> ` 之类的 Vue 内置组件除外** 。
41
41
42
42
这样做可以避免跟现有的以及未来的 HTML 元素[ 相冲突] ( http://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name ) ,因为所有的 HTML 元素名称都是单个单词的。
43
43
@@ -188,7 +188,7 @@ data() {
188
188
189
189
### 避免 ` v-if ` 和 ` v-for ` 用在一起<sup data-p =" a " >必要</sup >
190
190
191
- ** 永远不要把 ` v-if ` 和 ` v-for ` 同时用在同一个元素上。 **
191
+ ** 永远不要把 ` v-if ` 和 ` v-for ` 同时用在同一个元素上** 。
192
192
193
193
一般我们在两种常见的情况下会倾向于这样做:
194
194
@@ -337,11 +337,11 @@ computed: {
337
337
338
338
### 为组件样式设置作用域<sup data-p =" a " >必要</sup >
339
339
340
- ** 对于应用来说,顶级 ` App ` 组件和布局组件中的样式可以是全局的,但是其它所有组件都应该是有作用域的。 **
340
+ ** 对于应用来说,顶级 ` App ` 组件和布局组件中的样式可以是全局的,但是其它所有组件都应该是有作用域的** 。
341
341
342
342
这条规则只和[ 单文件组件] ( ../guide/single-file-components.html ) 有关。你* 不一定* 要使用 [ ` scoped ` attribute] ( https://vue-loader.vuejs.org/en/features/scoped-css.html ) 。设置作用域也可以通过 [ CSS Modules] ( https://vue-loader.vuejs.org/en/features/css-modules.html ) ,那是一个基于 class 的类似 [ BEM] ( http://getbem.com/ ) 的策略,当然你也可以使用其它的库或约定。
343
343
344
- ** 不管怎样,对于组件库,我们应该更倾向于选用基于 class 的策略而不是 ` scoped ` attribute。 **
344
+ ** 不管怎样,对于组件库,我们应该更倾向于选用基于 class 的策略而不是 ` scoped ` attribute** 。
345
345
346
346
这让覆写内部样式更容易:使用了常人可理解的 class 名称且没有太高的选择器优先级,而且不太会导致冲突。
347
347
@@ -428,7 +428,7 @@ computed: {
428
428
429
429
### 私有 property 名<sup data-p =" a " >必要</sup >
430
430
431
- ** 使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点,就始终为插件、混入等不考虑作为对外公共 API 的自定义私有 property 使用 ` $_ ` 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 ` $_yourPluginName_ ` )。 **
431
+ ** 使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点,就始终为插件、混入等不考虑作为对外公共 API 的自定义私有 property 使用 ` $_ ` 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 ` $_yourPluginName_ ` )** 。
432
432
433
433
::: 详细
434
434
@@ -527,7 +527,7 @@ export default myGreatMixin
527
527
528
528
### 组件文件<sup data-p =" b " >强烈推荐</sup >
529
529
530
- ** 只要有能够拼接文件的构建系统,就把每个组件单独分成文件。 **
530
+ ** 只要有能够拼接文件的构建系统,就把每个组件单独分成文件** 。
531
531
532
532
当你需要编辑一个组件或查阅一个组件的用法时,可以更快速的找到它。
533
533
@@ -564,7 +564,7 @@ components/
564
564
### 单文件组件文件的大小写<sup data-p =" b " >强烈推荐</sup >
565
565
566
566
567
- ** [ 单文件组件] ( ../guide/single-file-components.html ) 的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。 **
567
+ ** [ 单文件组件] ( ../guide/single-file-components.html ) 的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)** 。
568
568
569
569
单词大写开头对于代码编辑器的自动补全最为友好,因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而,混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题,这也是横线连接命名同样完全可取的原因。
570
570
@@ -598,7 +598,7 @@ components/
598
598
599
599
### 基础组件名<sup data-p =" b " >强烈推荐</sup >
600
600
601
- ** 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 ` Base ` 、` App ` 或 ` V ` 。 **
601
+ ** 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 ` Base ` 、` App ` 或 ` V ` ** 。
602
602
603
603
::: details 详解
604
604
@@ -674,7 +674,7 @@ components/
674
674
675
675
### 单组件名<sup data-p =" b " >强烈推荐</sup >
676
676
677
- ** 只应该拥有单个活跃实例的组件应该以 ` The ` 前缀命名,以示其唯一性。 **
677
+ ** 只应该拥有单个活跃实例的组件应该以 ` The ` 前缀命名,以示其唯一性** 。
678
678
679
679
这不意味着组件只可用于一个单页面,而是* 每个页面* 只使用一次。这些组件永远不接受任何 prop,因为它们是为你的应用定制的,而不是它们在你的应用中的上下文。如果你发现有必要添加 prop,那就表明这实际上是一个可复用的组件,只是* 目前* 在每个页面里只使用一次。
680
680
@@ -700,7 +700,7 @@ components/
700
700
701
701
### 紧密耦合的组件名<sup data-p =" b " >强烈推荐</sup >
702
702
703
- ** 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。 **
703
+ ** 和父组件紧密耦合的子组件应该以父组件名作为前缀命名** 。
704
704
705
705
如果一个组件只在某个父组件的场景下有意义,这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件,所以这样做可以把相关联的文件排在一起。
706
706
@@ -770,7 +770,7 @@ components/
770
770
771
771
### 组件名中的单词顺序<sup data-p =" b " >强烈推荐</sup >
772
772
773
- ** 组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。 **
773
+ ** 组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾** 。
774
774
775
775
::: details 详解
776
776
你可能会疑惑:
@@ -849,7 +849,7 @@ components/
849
849
850
850
### 自闭合组件<sup data-p =" b " >强烈推荐</sup >
851
851
852
- ** 在[ 单文件组件] ( ../guide/single-file-components.html ) 、字符串模板和 [ JSX] ( ../guide/render-function.html#JSX ) 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。 **
852
+ ** 在[ 单文件组件] ( ../guide/single-file-components.html ) 、字符串模板和 [ JSX] ( ../guide/render-function.html#JSX ) 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做** 。
853
853
854
854
自闭合组件表示它们不仅没有内容,而且** 刻意** 没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签,你的代码也更简洁。
855
855
@@ -885,7 +885,7 @@ components/
885
885
886
886
### 模板中的组件名大小写<sup data-p =" b " >强烈推荐</sup >
887
887
888
- ** 对于绝大多数项目来说,在[ 单文件组件] ( ../guide/single-file-components.html ) 和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。 **
888
+ ** 对于绝大多数项目来说,在[ 单文件组件] ( ../guide/single-file-components.html ) 和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的** 。
889
889
890
890
PascalCase 相比 kebab-case 有一些优势:
891
891
@@ -939,7 +939,7 @@ PascalCase 相比 kebab-case 有一些优势:
939
939
940
940
### JS/JSX 中的组件名大小写<sup data-p =" b " >强烈推荐</sup >
941
941
942
- ** JS/[ JSX] ( ../guide/render-function.html#JSX ) 中的组件名应该始终是 PascalCase 的,尽管在较为简单的应用中只使用 ` app.component ` 进行全局组件注册时,可以使用 kebab-case 字符串。 **
942
+ ** JS/[ JSX] ( ../guide/render-function.html#JSX ) 中的组件名应该始终是 PascalCase 的,尽管在较为简单的应用中只使用 ` app.component ` 进行全局组件注册时,可以使用 kebab-case 字符串** 。
943
943
944
944
::: details 详解
945
945
@@ -1009,7 +1009,7 @@ export default {
1009
1009
1010
1010
### 完整单词的组件名<sup data-p =" b " >强烈推荐</sup >
1011
1011
1012
- ** 组件名应该倾向于完整单词而不是缩写。 **
1012
+ ** 组件名应该倾向于完整单词而不是缩写** 。
1013
1013
1014
1014
编辑器中的自动补全已经让书写长命名的代价非常之低了,而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。
1015
1015
@@ -1035,7 +1035,7 @@ components/
1035
1035
1036
1036
### Prop 名大小写<sup data-p =" b " >强烈推荐</sup >
1037
1037
1038
- ** 在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 [ JSX] ( ../guide/render-function.html#JSX ) 中应该始终使用 kebab-case。 **
1038
+ ** 在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 [ JSX] ( ../guide/render-function.html#JSX ) 中应该始终使用 kebab-case** 。
1039
1039
1040
1040
我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。
1041
1041
@@ -1069,7 +1069,7 @@ props: {
1069
1069
1070
1070
### 多个 attribute 的元素<sup data-p =" b " >强烈推荐</sup >
1071
1071
1072
- ** 多个 attribute 的元素应该分多行撰写,每个 attribute 一行。 **
1072
+ ** 多个 attribute 的元素应该分多行撰写,每个 attribute 一行** 。
1073
1073
1074
1074
在 JavaScript 中,用多行分隔对象的多个 property 是很常见的最佳实践,因为这样更易读。模板和 [ JSX] ( ../guide/render-function.html#JSX ) 值得我们做相同的考虑。
1075
1075
@@ -1106,7 +1106,7 @@ props: {
1106
1106
1107
1107
### 模板中简单的表达式<sup data-p =" b " >强烈推荐</sup >
1108
1108
1109
- ** 组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法。 **
1109
+ ** 组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法** 。
1110
1110
1111
1111
复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的* 是* 什么,而非如何计算那个值。而且计算属性和方法使得代码可以重用。
1112
1112
@@ -1144,7 +1144,7 @@ computed: {
1144
1144
1145
1145
### 简单的计算属性<sup data-p =" b " >强烈推荐</sup >
1146
1146
1147
- ** 应该把复杂计算属性分割为尽可能多的更简单的 property。 **
1147
+ ** 应该把复杂计算属性分割为尽可能多的更简单的 property** 。
1148
1148
1149
1149
::: details 详解
1150
1150
更简单、命名得当的计算属性是这样的:
@@ -1202,7 +1202,7 @@ computed: {
1202
1202
1203
1203
### 带引号的 attribute 值<sup data-p =" b " >强烈推荐</sup >
1204
1204
1205
- ** 非空 HTML attribute 值应该始终带引号 (单引号或双引号,选你 JS 里不用的那个)。 **
1205
+ ** 非空 HTML attribute 值应该始终带引号 (单引号或双引号,选你 JS 里不用的那个)** 。
1206
1206
1207
1207
在 HTML 中不带空格的 attribute 值是可以没有引号的,但这鼓励了大家在特征值里不写空格,导致可读性变差。
1208
1208
@@ -1232,7 +1232,7 @@ computed: {
1232
1232
1233
1233
### 指令缩写<sup data-p =" b " >强烈推荐</sup >
1234
1234
1235
- ** 指令缩写 (用 ` : ` 表示 ` v-bind: ` ,` @ ` 表示 ` v-on: ` 和用 ` # ` 表示 ` v-slot ` ) 应该要么都用要么都不用。 **
1235
+ ** 指令缩写 (用 ` : ` 表示 ` v-bind: ` ,` @ ` 表示 ` v-on: ` 和用 ` # ` 表示 ` v-slot ` ) 应该要么都用要么都不用** 。
1236
1236
1237
1237
<div class =" style-example style-example-bad " >
1238
1238
<h4 >反例</h4 >
@@ -1319,7 +1319,7 @@ computed: {
1319
1319
1320
1320
### 组件/实例的选项的顺序<sup data-p =" c " >推荐</sup >
1321
1321
1322
- ** 组件/实例的选项应该有统一的顺序。 **
1322
+ ** 组件/实例的选项应该有统一的顺序** 。
1323
1323
1324
1324
这是我们推荐的组件选项默认顺序。它们被划分为几大类,所以你也能知道从插件里添加的新 property 应该放到哪里。
1325
1325
@@ -1372,7 +1372,7 @@ computed: {
1372
1372
1373
1373
### 元素 attribute 的顺序<sup data-p =" c " >推荐</sup >
1374
1374
1375
- ** 元素 (包括组件) 的 attribute 应该有统一的顺序。 **
1375
+ ** 元素 (包括组件) 的 attribute 应该有统一的顺序** 。
1376
1376
1377
1377
这是我们为组件选项推荐的默认顺序。它们被划分为几大类,所以你也能知道新添加的自定义 attribute 和指令应该放到哪里。
1378
1378
@@ -1414,7 +1414,7 @@ computed: {
1414
1414
1415
1415
### 组件/实例选项中的空行<sup data-p =" c " >推荐</sup >
1416
1416
1417
- ** 你可能想在多个 property 之间增加一个空行,特别是在这些选项一屏放不下,需要滚动才能都看到的时候。 **
1417
+ ** 你可能想在多个 property 之间增加一个空行,特别是在这些选项一屏放不下,需要滚动才能都看到的时候** 。
1418
1418
1419
1419
当你的组件开始觉得密集或难以阅读时,在多个 property 之间添加空行可以让其变得容易。在一些诸如 Vim 的编辑器里,这样格式化后的选项还能通过键盘被快速导航。
1420
1420
@@ -1479,7 +1479,7 @@ computed: {
1479
1479
1480
1480
### 单文件组件的顶级元素的顺序<sup data-p =" c " >推荐</sup >
1481
1481
1482
- ** [ 单文件组件] (../guide/single-file-components.html)应该总是让 ` <script> ` 、` <template> ` 和 ` <style> ` 标签的顺序保持一致。且 ` <style> ` 要放在最后,因为另外两个标签至少要有一个。 **
1482
+ ** [ 单文件组件] (../guide/single-file-components.html)应该总是让 ` <script> ` 、` <template> ` 和 ` <style> ` 标签的顺序保持一致。且 ` <style> ` 要放在最后,因为另外两个标签至少要有一个** 。
1483
1483
1484
1484
<div class =" style-example style-example-bad " >
1485
1485
<h4 >反例</h4 >
@@ -1533,7 +1533,7 @@ computed: {
1533
1533
1534
1534
### ` scoped ` 中的元素选择器<sup data-p =" d " >谨慎使用</sup >
1535
1535
1536
- ** 元素选择器应该避免在 ` scoped ` 中出现。 **
1536
+ ** 元素选择器应该避免在 ` scoped ` 中出现** 。
1537
1537
1538
1538
在 ` scoped ` 样式中,类选择器比元素选择器更好,因为大量使用元素选择器是很慢的。
1539
1539
@@ -1579,7 +1579,7 @@ button {
1579
1579
1580
1580
### 隐性的父子组件通信<sup data-p =" d " >谨慎使用</sup >
1581
1581
1582
- ** 应该优先通过 prop 和事件进行父子组件之间的通信,而不是 ` this.$parent ` 或变更 prop。 **
1582
+ ** 应该优先通过 prop 和事件进行父子组件之间的通信,而不是 ` this.$parent ` 或变更 prop** 。
1583
1583
1584
1584
一个理想的 Vue 应用是 prop 向下传递,事件向上传递的。遵循这一约定会让你的组件更易于理解。然而,在一些边界情况下 prop 的变更或 ` this.$parent ` 能够简化两个深度耦合的组件。
1585
1585
@@ -1672,7 +1672,7 @@ app.component('TodoItem', {
1672
1672
1673
1673
### 非 Flux 的全局状态管理<sup data-p =" d " >谨慎使用</sup >
1674
1674
1675
- ** 应该优先通过 [ Vuex] ( https://github.com/vuejs/vuex ) 管理全局状态,而不是通过 ` this.$root ` 或一个全局事件总线。 **
1675
+ ** 应该优先通过 [ Vuex] ( https://github.com/vuejs/vuex ) 管理全局状态,而不是通过 ` this.$root ` 或一个全局事件总线** 。
1676
1676
1677
1677
通过 ` this.$root ` 和/或[ 全局事件总线管理] ( https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced ) 状态在很多简单的情况下都是很方便的,但是并不适用于绝大多数的应用。
1678
1678
0 commit comments