Skip to content

Commit c0885b1

Browse files
committed
fixed all lint format errors
1 parent 74f024c commit c0885b1

27 files changed

+183
-183
lines changed

src/v2/api/index.md

Lines changed: 35 additions & 35 deletions
Large diffs are not rendered by default.

src/v2/guide/class-and-style.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type: guide
44
order: 6
55
---
66

7-
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是property,所以我们可以用 `v-bind` 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 `v-bind` 用于 `class``style` 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
7+
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 property,所以我们可以用 `v-bind` 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 `v-bind` 用于 `class``style` 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
88

99
## 绑定 HTML Class
1010

@@ -17,9 +17,9 @@ order: 6
1717
``` html
1818
<div v-bind:class="{ active: isActive }"></div>
1919
```
20-
上面的语法表示 `active` 这个 class 存在与否将取决于数据property `isActive`[truthiness](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy)
20+
上面的语法表示 `active` 这个 class 存在与否将取决于数据 property `isActive`[truthiness](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy)
2121

22-
你可以在对象中传入更多property来动态切换多个 class。此外,`v-bind:class` 指令也可以与普通的 class property共存。当有如下模板:
22+
你可以在对象中传入更多 property 来动态切换多个 class。此外,`v-bind:class` 指令也可以与普通的 class property 共存。当有如下模板:
2323

2424
``` html
2525
<div
@@ -60,7 +60,7 @@ data: {
6060
}
6161
```
6262

63-
渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的[computed property](computed.html)。这是一个常用且强大的模式:
63+
渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的 [computed property](computed.html)。这是一个常用且强大的模式:
6464

6565
``` html
6666
<div v-bind:class="classObject"></div>
@@ -120,7 +120,7 @@ data: {
120120

121121
> 这个章节假设你已经对 [Vue 组件](components.html)有一定的了解。当然你也可以先跳过这里,稍后再回过头来看。
122122
123-
当在一个自定义组件上使用 `class` property时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
123+
当在一个自定义组件上使用 `class` property 时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
124124

125125
例如,如果你声明了这个组件:
126126

@@ -158,7 +158,7 @@ HTML 将被渲染为:
158158

159159
### 对象语法
160160

161-
`v-bind:style` 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
161+
`v-bind:style` 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
162162

163163

164164
``` html
@@ -187,7 +187,7 @@ data: {
187187
}
188188
```
189189

190-
同样的,对象语法常常结合返回对象的computed property使用
190+
同样的,对象语法常常结合返回对象的 computed property 使用
191191

192192
### 数组语法
193193

@@ -199,13 +199,13 @@ data: {
199199

200200
### 自动添加前缀
201201

202-
`v-bind:style` 使用需要添加[浏览器引擎前缀](https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix)的 CSS property时,如 `transform`,Vue.js 会自动侦测并添加相应的前缀。
202+
`v-bind:style` 使用需要添加[浏览器引擎前缀](https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix)的 CSS property 时,如 `transform`,Vue.js 会自动侦测并添加相应的前缀。
203203

204204
### 多重值
205205

206206
> 2.3.0+
207207
208-
从 2.3.0 起你可以为 `style` 绑定中的property提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:
208+
从 2.3.0 起你可以为 `style` 绑定中的 property 提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:
209209

210210
``` html
211211
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

src/v2/guide/comparison.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ Vue 的整体思想是拥抱经典的 Web 技术,并在其上进行扩展。
8686
</style>
8787
```
8888

89-
这个可选 `scoped` property会自动添加一个唯一的property (比如 `data-v-21e5b78`) 为组件内 CSS 指定作用域,编译的时候 `.list-container:hover` 会被编译成类似 `.list-container[data-v-21e5b78]:hover`
89+
这个可选 `scoped` property 会自动添加一个唯一的 property (比如 `data-v-21e5b78`) 为组件内 CSS 指定作用域,编译的时候 `.list-container:hover` 会被编译成类似 `.list-container[data-v-21e5b78]:hover`
9090

9191
最后,Vue 的单文件组件里的样式设置是非常灵活的。通过 [vue-loader](https://github.com/vuejs/vue-loader),你可以使用任意预处理器、后处理器,甚至深度集成 [CSS Modules](https://vue-loader.vuejs.org/en/features/css-modules.html)——全部都在 `<style>` 标签内。
9292

@@ -202,7 +202,7 @@ Ember 是一个全能框架。它提供了大量的约定,一旦你熟悉了
202202

203203
也就是说,我们最好比较的是 Vue 内核和 Ember 的[模板](https://guides.emberjs.com/v2.10.0/templates/handlebars-basics/)[数据模型](https://guides.emberjs.com/v2.10.0/object-model/)层:
204204

205-
* Vue 在普通 JavaScript 对象上建立响应,提供自动化的computed property。在 Ember 中需要将所有东西放在 Ember 对象内,并且手工为computed property声明依赖
205+
* Vue 在普通 JavaScript 对象上建立响应,提供自动化的 computed property。在 Ember 中需要将所有东西放在 Ember 对象内,并且手工为 computed property 声明依赖
206206

207207
* Vue 的模板语法可以用全功能的 JavaScript 表达式,而 Handlebars 的语法和帮助函数相比来说非常受限。
208208

src/v2/guide/components-custom-events.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ this.$emit('myEvent')
2121
<my-component v-on:my-event="doSomething"></my-component>
2222
```
2323

24-
不同于组件和 prop,事件名不会被用作一个 JavaScript 变量名或property名,所以就没有理由使用 camelCase 或 PascalCase 了。并且 `v-on` 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以 `v-on:myEvent` 将会变成 `v-on:myevent`——导致 `myEvent` 不可能被监听到。
24+
不同于组件和 prop,事件名不会被用作一个 JavaScript 变量名或 property 名,所以就没有理由使用 camelCase 或 PascalCase 了。并且 `v-on` 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以 `v-on:myEvent` 将会变成 `v-on:myevent`——导致 `myEvent` 不可能被监听到。
2525

2626
因此,我们推荐你**始终使用 kebab-case 的事件名**
2727

@@ -56,7 +56,7 @@ Vue.component('base-checkbox', {
5656
<base-checkbox v-model="lovingVue"></base-checkbox>
5757
```
5858

59-
这里的 `lovingVue` 的值将会传入这个名为 `checked` 的 prop。同时当 `<base-checkbox>` 触发一个 `change` 事件并附带一个新的值的时候,这个 `lovingVue` 的property将会被更新
59+
这里的 `lovingVue` 的值将会传入这个名为 `checked` 的 prop。同时当 `<base-checkbox>` 触发一个 `change` 事件并附带一个新的值的时候,这个 `lovingVue` 的 property 将会被更新
6060

6161
<p class="tip">注意你仍然需要在组件的 <code>props</code> 选项里声明 <code>checked</code> 这个 prop。</p>
6262

@@ -92,7 +92,7 @@ Vue.component('base-checkbox', {
9292
}
9393
```
9494

95-
有了这个 `$listeners` property,你就可以配合 `v-on="$listeners"` 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 `<input>` 的你希望它也可以配合 `v-model` 工作的组件来说,为这些监听器创建一个类似下述 `inputListeners` 的computed property通常是非常有用的
95+
有了这个 `$listeners` property,你就可以配合 `v-on="$listeners"` 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 `<input>` 的你希望它也可以配合 `v-model` 工作的组件来说,为这些监听器创建一个类似下述 `inputListeners` 的 computed property 通常是非常有用的
9696

9797
```js
9898
Vue.component('base-input', {
@@ -143,7 +143,7 @@ Vue.component('base-input', {
143143
this.$emit('update:title', newTitle)
144144
```
145145

146-
然后父组件可以监听那个事件并根据需要更新一个本地的数据property。例如:
146+
然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如:
147147

148148
```html
149149
<text-document
@@ -166,6 +166,6 @@ this.$emit('update:title', newTitle)
166166
<text-document v-bind.sync="doc"></text-document>
167167
```
168168

169-
这样会把 `doc` 对象中的每一个property (如 `title`) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 `v-on` 监听器。
169+
这样会把 `doc` 对象中的每一个 property (如 `title`) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 `v-on` 监听器。
170170

171171
<p class="tip">将 <code>v-bind.sync</code> 用在一个字面量的对象上,例如 <code>v-bind.sync="{ title: doc.title }"</code>,是无法正常工作的,因为在解析一个像这样的复杂表达式的时候,有很多边缘情况需要考虑。</p>

src/v2/guide/components-edge-cases.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ order: 106
1414

1515
### 访问根实例
1616

17-
在每个 `new Vue` 实例的子组件中,其根实例可以通过 `$root` property进行访问。例如,在这个根实例中:
17+
在每个 `new Vue` 实例的子组件中,其根实例可以通过 `$root` property 进行访问。例如,在这个根实例中:
1818

1919
```js
2020
// Vue 根实例
@@ -51,7 +51,7 @@ this.$root.baz()
5151

5252
### 访问父级组件实例
5353

54-
`$root` 类似,`$parent` property可以用来从一个子组件访问父组件的实例。它提供了一种机会,可以在后期随时触达父级组件,以替代将数据以 prop 的方式传入子组件的方式。
54+
`$root` 类似,`$parent` property 可以用来从一个子组件访问父组件的实例。它提供了一种机会,可以在后期随时触达父级组件,以替代将数据以 prop 的方式传入子组件的方式。
5555

5656
<p class="tip">在绝大多数情况下,触达父级组件会使得你的应用更难调试和理解,尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候,很难找出那个变更是从哪里发起的。</p>
5757

@@ -136,7 +136,7 @@ this.$refs.usernameInput.focus()
136136
</google-map>
137137
```
138138

139-
在这个组件里,所有 `<google-map>` 的后代都需要访问一个 `getMap` 方法,以便知道要跟哪个地图进行交互。不幸的是,使用 `$parent` property无法很好的扩展到更深层级的嵌套组件上。这也是依赖注入的用武之地,它用到了两个新的实例选项:`provide``inject`
139+
在这个组件里,所有 `<google-map>` 的后代都需要访问一个 `getMap` 方法,以便知道要跟哪个地图进行交互。不幸的是,使用 `$parent` property 无法很好的扩展到更深层级的嵌套组件上。这也是依赖注入的用武之地,它用到了两个新的实例选项:`provide``inject`
140140

141141
`provide` 选项允许我们指定我们想要**提供**给后代组件的数据/方法。在这个例子中,就是 `<google-map>` 内部的 `getMap` 方法:
142142

@@ -148,7 +148,7 @@ provide: function () {
148148
}
149149
```
150150

151-
然后在任何后代组件里,我们都可以使用 `inject` 选项来接收指定的我们想要添加在这个实例上的property
151+
然后在任何后代组件里,我们都可以使用 `inject` 选项来接收指定的我们想要添加在这个实例上的 property
152152

153153
```js
154154
inject: ['getMap']
@@ -158,8 +158,8 @@ inject: ['getMap']
158158

159159
实际上,你可以把依赖注入看作一部分“大范围有效的 prop”,除了:
160160

161-
* 祖先组件不需要知道哪些后代组件使用它提供的property
162-
* 后代组件不需要知道被注入的property来自哪里
161+
* 祖先组件不需要知道哪些后代组件使用它提供的 property
162+
* 后代组件不需要知道被注入的 property 来自哪里
163163

164164
<p class="tip">然而,依赖注入还是有负面影响的。它将你应用程序中的组件与它们当前的组织方式耦合起来,使重构变得更加困难。同时所提供的property是非响应式的。这是出于设计的考虑,因为使用它们来创建一个中心化规模化的数据跟<a href="#访问根实例">使用 <code>$root</code></a>做这件事都是不够好的。如果你想要共享的这个property是你的应用特有的,而不是通用化的,或者如果你想在祖先组件中更新所提供的数据,那么这意味着你可能需要换用一个像 <a href="https://github.com/vuejs/vuex">Vuex</a> 这样真正的状态管理方案了。</p>
165165

src/v2/guide/components-props.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ Vue.component('blog-post', {
3333
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
3434
```
3535

36-
但是,通常你希望每个 prop 都有指定的值类型。这时,你可以以对象形式列出 prop,这些property的名称和值分别是 prop 各自的名称和类型:
36+
但是,通常你希望每个 prop 都有指定的值类型。这时,你可以以对象形式列出 prop,这些 property 的名称和值分别是 prop 各自的名称和类型:
3737

3838
```js
3939
props: {
@@ -123,9 +123,9 @@ props: {
123123
<blog-post v-bind:author="post.author"></blog-post>
124124
```
125125

126-
### 传入一个对象的所有property
126+
### 传入一个对象的所有 property
127127

128-
如果你想要将一个对象的所有property都作为 prop 传入,你可以使用不带参数的 `v-bind` (取代 `v-bind:prop-name`)。例如,对于一个给定的对象 `post`
128+
如果你想要将一个对象的所有 property 都作为 prop 传入,你可以使用不带参数的 `v-bind` (取代 `v-bind:prop-name`)。例如,对于一个给定的对象 `post`
129129

130130
``` js
131131
post: {
@@ -157,7 +157,7 @@ post: {
157157

158158
这里有两种常见的试图改变一个 prop 的情形:
159159

160-
1. **这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。**在这种情况下,最好定义一个本地的 data property并将这个 prop 用作其初始值:
160+
1. **这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。**在这种情况下,最好定义一个本地的 data property 并将这个 prop 用作其初始值:
161161

162162
``` js
163163
props: ['initialCounter'],
@@ -168,7 +168,7 @@ post: {
168168
}
169169
```
170170

171-
2. **这个 prop 以一种原始的值传入且需要进行转换。**在这种情况下,最好使用这个 prop 的值来定义一个computed property:
171+
2. **这个 prop 以一种原始的值传入且需要进行转换。**在这种情况下,最好使用这个 prop 的值来定义一个 computed property:
172172

173173
``` js
174174
props: ['size'],
@@ -310,7 +310,7 @@ Vue.component('my-component', {
310310
})
311311
```
312312

313-
这尤其适合配合实例的 `$attrs` property使用,该property包含了传递给一个组件的 attribute 名和 attribute 值,例如:
313+
这尤其适合配合实例的 `$attrs` property 使用,该 property 包含了传递给一个组件的 attribute 名和 attribute 值,例如:
314314

315315
```js
316316
{

src/v2/guide/components-registration.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ new Vue({
9696
})
9797
```
9898

99-
对于 `components` 对象中的每个property来说,其property名就是自定义元素的名字,其property值就是这个组件的选项对象
99+
对于 `components` 对象中的每个 property 来说,其 property 名就是自定义元素的名字,其 property 值就是这个组件的选项对象
100100

101101
注意**局部注册的组件在其子组件中*不可用***。例如,如果你希望 `ComponentA``ComponentB` 中可用,则你需要这样写:
102102

src/v2/guide/components-slots.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 [Web C
6363
</navigation-link>
6464
```
6565

66-
该插槽跟模板的其它地方一样可以访问相同的实例property (也就是相同的“作用域”),而**不能**访问 `<navigation-link>` 的作用域。例如 `url` 是访问不到的:
66+
该插槽跟模板的其它地方一样可以访问相同的实例 property (也就是相同的“作用域”),而**不能**访问 `<navigation-link>` 的作用域。例如 `url` 是访问不到的:
6767

6868
``` html
6969
<navigation-link url="/profile">

src/v2/guide/components.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ Vue.component('my-component-name', {
144144

145145
早些时候,我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的。这也正是 prop 的由来。
146146

147-
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个property。为了给博文组件传递一个标题,我们可以用一个 `props` 选项将其包含在该组件可接受的 prop 列表中:
147+
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题,我们可以用一个 `props` 选项将其包含在该组件可接受的 prop 列表中:
148148

149149
```js
150150
Vue.component('blog-post', {
@@ -268,13 +268,13 @@ Vue.component('blog-post', {
268268

269269
<p class="tip">上述的这个和一些接下来的示例使用了 JavaScript 的[模板字符串](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals)来让多行的模板更易读。它们在 IE 下并没有被支持,所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE,请使用[折行转义字符](https://css-tricks.com/snippets/javascript/multiline-string-variables-in-javascript/)取而代之。</p>
270270

271-
现在,不论何时为 `post` 对象添加一个新的property,它都会自动地在 `<blog-post>` 内可用。
271+
现在,不论何时为 `post` 对象添加一个新的 property,它都会自动地在 `<blog-post>` 内可用。
272272

273273
## 监听子组件事件
274274

275275
在我们开发 `<blog-post>` 组件时,它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号,同时让页面的其它部分保持默认的字号。
276276

277-
在其父组件中,我们可以通过添加一个 `postFontSize` 数据property来支持这个功能
277+
在其父组件中,我们可以通过添加一个 `postFontSize` 数据 property 来支持这个功能
278278

279279
```js
280280
new Vue({

0 commit comments

Comments
 (0)