Skip to content

将 HTML attribute 的翻译从“特性”改为“属性” #977

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/v2/guide/syntax.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,21 +60,21 @@ new Vue({

<p class="tip">你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。请只对可信内容使用 HTML 插值,**绝不要**对用户提供的内容使用插值。</p>

### 特性
### 属性

Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 [v-bind 指令](../api/#v-bind):
Mustache 语法不能作用在 HTML 属性上,遇到这种情况应该使用 [v-bind 指令](../api/#v-bind):

``` html
<div v-bind:id="dynamicId"></div>
```

对于布尔特性 (它们只要存在就意味着值为 `true`),`v-bind` 工作起来略有不同,在这个例子中:
对于布尔属性 (它们只要存在就意味着值为 `true`),`v-bind` 工作起来略有不同,在这个例子中:

``` html
<button v-bind:disabled="isButtonDisabled">Button</button>
```

如果 `isButtonDisabled` 的值是 `null`、`undefined` 或 `false`,则 `disabled` 特性甚至不会被包含在渲染出来的 `<button>` 元素中。
如果 `isButtonDisabled` 的值是 `null`、`undefined` 或 `false`,则 `disabled` 属性甚至不会被包含在渲染出来的 `<button>` 元素中。

### 使用 JavaScript 表达式

Expand Down Expand Up @@ -106,7 +106,7 @@ Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 [

<div class="vueschool"><a href="https://learning.dcloud.io/#/?vid=6" target="_blank" rel="noopener" title="Vue.js教程-模板语法-指令">观看本节视频讲解</a></div>

指令 (Directives) 是带有 `v-` 前缀的特殊特性。指令特性的值预期是**单个 JavaScript 表达式** (`v-for` 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。回顾我们在介绍中看到的例子:
指令 (Directives) 是带有 `v-` 前缀的特殊属性。指令属性的值预期是**单个 JavaScript 表达式** (`v-for` 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。回顾我们在介绍中看到的例子:

``` html
<p v-if="seen">现在你看到我了</p>
Expand All @@ -116,13 +116,13 @@ Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 [

### 参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,`v-bind` 指令可以用于响应式地更新 HTML 特性
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,`v-bind` 指令可以用于响应式地更新 HTML 属性

``` html
<a v-bind:href="url">...</a>
```

在这里 `href` 是参数,告知 `v-bind` 指令将该元素的 `href` 特性与表达式 `url` 的值绑定。
在这里 `href` 是参数,告知 `v-bind` 指令将该元素的 `href` 属性与表达式 `url` 的值绑定。

另一个例子是 `v-on` 指令,它用于监听 DOM 事件:

Expand Down Expand Up @@ -158,7 +158,7 @@ Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 [

#### 对动态参数表达式的约束

<p class="tip">动态参数表达式有一些语法约束,因为某些字符,例如空格和引号,放在 HTML 特性名里是无效的。同样,在 DOM 中使用模板时你需要回避大写键名。</p>
<p class="tip">动态参数表达式有一些语法约束,因为某些字符,例如空格和引号,放在 HTML 属性名里是无效的。同样,在 DOM 中使用模板时你需要回避大写键名。</p>

例如,下面的代码是无效的:

Expand All @@ -169,7 +169,7 @@ Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 [

变通的办法是使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式。

另外,如果你在 DOM 中使用模板 (直接在一个 HTML 文件里撰写模板),需要留意浏览器会把特性名全部强制转为小写
另外,如果你在 DOM 中使用模板 (直接在一个 HTML 文件里撰写模板),需要留意浏览器会把属性名全部强制转为小写

``` html
<!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
Expand Down Expand Up @@ -216,4 +216,4 @@ Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 [
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

它们看起来可能与普通的 HTML 略有不同,但 `:` 与 `@` 对于特性名来说都是合法字符,在所有支持 Vue 的浏览器都能被正确地解析。而且,它们不会出现在最终渲染的标记中。缩写语法是完全可选的,但随着你更深入地了解它们的作用,你会庆幸拥有它们。
它们看起来可能与普通的 HTML 略有不同,但 `:` 与 `@` 对于属性名来说都是合法字符,在所有支持 Vue 的浏览器都能被正确地解析。而且,它们不会出现在最终渲染的标记中。缩写语法是完全可选的,但随着你更深入地了解它们的作用,你会庆幸拥有它们。