Skip to content

Docs:更改”特性“为”属性“ #1044

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
18 changes: 9 additions & 9 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="sponsored 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 @@ -192,7 +192,7 @@ Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 [

## 缩写

`v-` 前缀作为一种视觉提示,用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,`v-` 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue 管理所有模板的[单页面应用程序 (SPA - single page application)](https://en.wikipedia.org/wiki/Single-page_application) 时,`v-` 前缀也变得没那么重要了。因此,Vue 为 `v-bind` 和 `v-on` 这两个最常用的指令,提供了特定简写:
`v-` 前缀作为一种视觉提示,用来识别模板中 Vue 特定的属性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,`v-` 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue 管理所有模板的[单页面应用程序 (SPA - single page application)](https://en.wikipedia.org/wiki/Single-page_application) 时,`v-` 前缀也变得没那么重要了。因此,Vue 为 `v-bind` 和 `v-on` 这两个最常用的指令,提供了特定简写:

### `v-bind` 缩写

Expand Down Expand Up @@ -220,4 +220,4 @@ Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 [
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

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