Skip to content

属性 -> property & 特性 -> attribute #1081

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

Merged
merged 10 commits into from
Apr 26, 2020
78 changes: 39 additions & 39 deletions src/v2/api/index.md

Large diffs are not rendered by default.

18 changes: 9 additions & 9 deletions src/v2/cookbook/adding-instance-properties.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: 添加实例属性
title: 添加实例 property
type: cookbook
order: 2
---
Expand All @@ -24,13 +24,13 @@ new Vue({

则控制台会打印出 `My App`。就这么简单!

## 为实例属性设置作用域的重要性
## 为实例 property 设置作用域的重要性

你可能会好奇:

> “为什么 `appName` 要以 `$` 开头?这很重要吗?它会怎样?”

这里没有什么魔法。`$` 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
这里没有什么魔法。`$` 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

> “你指的冲突是什么意思?”

Expand All @@ -45,7 +45,7 @@ Vue.prototype.appName = 'My App'
``` js
new Vue({
data: {
// 啊哦,`appName` *也*是一个我们定义的实例属性名!😯
// 啊哦,`appName` *也*是一个我们定义的实例 property 名!😯
appName: 'The name of some other app'
},
beforeCreate: function () {
Expand All @@ -57,7 +57,7 @@ new Vue({
})
```

日志中会先出现 `"My App"`,然后出现 `"The name of some other app"`,因为 `this.appName` 在实例被创建之后被 `data` [覆写了](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/objects-classes/ch5.md)。我们通过 `$` 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定,诸如 `$_appName` 或 `ΩappName`,来避免和插件或未来的插件相冲突。
日志中会先出现 `"My App"`,然后出现 `"The name of some other app"`,因为 `this.appName` 在实例被创建之后被 `data` [覆写了](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/objects-classes/ch5.md)。我们通过 `$` 为实例 property 设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定,诸如 `$_appName` 或 `ΩappName`,来避免和插件或未来的插件相冲突。

## 真实的示例:通过 axios 替换 Vue Resource

Expand Down Expand Up @@ -145,7 +145,7 @@ Uncaught TypeError: Cannot read property 'split' of undefined

## 何时避免使用这个模式

只要你对原型属性的作用域保持警惕,那么使用这个模式就是安全的——保证了这一点,就不太会出 bug。
只要你对原型 property 的作用域保持警惕,那么使用这个模式就是安全的——保证了这一点,就不太会出 bug。

然而,有的时候它会让其他开发者感到混乱。例如他们可能看到了 `this.$http`,然后会想“哦,我从来没见过这个 Vue 的功能”,然后他们来到另外一个项目又发现 `this.$http` 是未被定义的。或者你打算去搜索如何使用它,但是搜不到结果,因为他们并没有发现这是一个 axios 的别名。

Expand Down Expand Up @@ -178,11 +178,11 @@ var App = Object.freeze({
})
```

<p class="tip">如果你在好奇 `Object.freeze`,它做的事情是阻止这个对象在未来被修改。这实质上是将它的属性都设为了常量,避免在未来出现状态的 bug。</p>
<p class="tip">如果你在好奇 `Object.freeze`,它做的事情是阻止这个对象在未来被修改。这实质上是将它的 property 都设为了常量,避免在未来出现状态的 bug。</p>

现在这些被共享的属性的来源就更加明显了:在应用中的某个地方有一个被定义好的 `App` 对象。你只需在项目中搜索就可以找到它。
现在这些被共享的 property 的来源就更加明显了:在应用中的某个地方有一个被定义好的 `App` 对象。你只需在项目中搜索就可以找到它。

这样做的另一个好处是 `App` 可以在你代码的*任何地方*使用,不管它是否是 Vue 相关的。包括向实例选项直接附加一些值而不必进入一个函数去访问 `this` 上的属性来得到这些值
这样做的另一个好处是 `App` 可以在你代码的*任何地方*使用,不管它是否是 Vue 相关的。包括向实例选项直接附加一些值而不必进入一个函数去访问 `this` 上的 property 来得到这些值

``` js
new Vue({
Expand Down
2 changes: 1 addition & 1 deletion src/v2/cookbook/avoiding-memory-leaks.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ new Vue({

## 解决这个内存泄漏问题

在上述的示例中,我们可以用 `hide()` 方法在将选择框从 DOM 中移除之前做一些清理工作,来解决内存泄露问题。为了做到这一点,我们会在 Vue 实例的数据对象中保留一个属性,并会使用 [Choices API 中的](https://github.com/jshjohnson/Choices) `destroy()` 方法将其清除。
在上述的示例中,我们可以用 `hide()` 方法在将选择框从 DOM 中移除之前做一些清理工作,来解决内存泄露问题。为了做到这一点,我们会在 Vue 实例的数据对象中保留一个 property,并会使用 [Choices API 中的](https://github.com/jshjohnson/Choices) `destroy()` 方法将其清除。

通过这个[更新之后的 CodePen 示例](https://codepen.io/freeman-g/pen/mxWMor)可以再重新看看内存的使用情况。

Expand Down
2 changes: 1 addition & 1 deletion src/v2/cookbook/creating-custom-scroll-directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ new Vue({

<p class="tip">记住!指令必须在 Vue 实例之前注册好。</p>

我们可能还需要一个样式属性来对中间值做过渡,在这个例子中:
我们可能还需要一个样式 property 来对中间值做过渡,在这个例子中:

```css
.box {
Expand Down
8 changes: 4 additions & 4 deletions src/v2/cookbook/debugging-in-vscode.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@ order: 8

在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map。做了这件事之后,我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试,即便你的资源已经被 webpack 优化过了也没关系。

打开 `config/index.js` 并找到 `devtool` 属性。将其更新为:
打开 `config/index.js` 并找到 `devtool` property。将其更新为:

如果你使用的是 Vue CLI 2,请设置并更新 `config/index.js` 内的 `devtool` 属性
如果你使用的是 Vue CLI 2,请设置并更新 `config/index.js` 内的 `devtool` property

```json
devtool: 'source-map',
```

如果你使用的是 Vue CLI 3,请设置并更新 `vue.config.js` 内的 `devtool` 属性
如果你使用的是 Vue CLI 3,请设置并更新 `vue.config.js` 内的 `devtool` property

```js
module.exports = {
Expand Down Expand Up @@ -101,7 +101,7 @@ module.exports = {

### Vue Devtools

我们还有一些其它的调试方法,复杂度不尽相同。其中最流行和简单的是使用非常棒的 [Chrome 版本](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 和 [Firefox 版本](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)的 Vue.js devtools。使用 devtools 有很多好处,比如它可以让你能够实时编辑数据属性并立即看到其反映出来的变化。另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验。
我们还有一些其它的调试方法,复杂度不尽相同。其中最流行和简单的是使用非常棒的 [Chrome 版本](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)和 [Firefox 版本](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)的 Vue.js devtools。使用 devtools 有很多好处,比如它可以让你能够实时编辑数据 property 并立即看到其反映出来的变化。另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验。

![Devtools Timetravel Debugger](/images/devtools-timetravel.gif)

Expand Down
2 changes: 1 addition & 1 deletion src/v2/cookbook/editable-svg-icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -185,4 +185,4 @@ export default {
* [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader)
* [svgo-loader](https://github.com/rpominov/svgo-loader)

这些工具会在编译时打包 SVG,但是在运行时编辑它们会有一些麻烦,因为 `<use>` 标签在处理一些复杂的事情时存在浏览器兼容问题。同时它们会给你两个嵌套的 `viewBox` 属性,这是两套坐标系。所以实现上稍微复杂了一些。
这些工具会在编译时打包 SVG,但是在运行时编辑它们会有一些麻烦,因为 `<use>` 标签在处理一些复杂的事情时存在浏览器兼容问题。同时它们会给你两个嵌套的 `viewBox` property,这是两套坐标系。所以实现上稍微复杂了一些。
2 changes: 1 addition & 1 deletion src/v2/cookbook/form-validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ const app = new Vue({
</form>
```

这组输入框覆盖了五个不同的部件。注意这里为 `v-model` 特性添加了 `.number`。它会告诉 Vue 将其值作为数字来使用。不过这里有一个小小的 bug,那就是当其值为空的时候,它会回到字符串格式,稍后你将会看到变通的办法。为了让用户使用起来更方便,我们添加展示了一个当前的总和,这样我们就能够实时的看到它们一共花掉了多少钱。现在我们来看看 JavaScript。
这组输入框覆盖了五个不同的部件。注意这里为 `v-model` attribute 添加了 `.number`。它会告诉 Vue 将其值作为数字来使用。不过这里有一个小小的 bug,那就是当其值为空的时候,它会回到字符串格式,稍后你将会看到变通的办法。为了让用户使用起来更方便,我们添加展示了一个当前的总和,这样我们就能够实时的看到它们一共花掉了多少钱。现在我们来看看 JavaScript。

``` js
const app = new Vue({
Expand Down
2 changes: 1 addition & 1 deletion src/v2/cookbook/using-axios-to-consume-apis.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ order: 9

在本次实践中,我们会使用 [CoinDesk API](https://www.coindesk.com/api/) 来完成展示比特币价格且每分钟更新的工作。首先,我们要通过 npm/Yarn 或一个 CDN 链接安装 axios。

我们有很多种方式可以从 API 请求信息,但是最好首先确认这些数据看起来长什么样,以便进一步确定如何展示它。为此,我们会调用一次这个 API 并输出结果,以便我们能够看清楚它。如 CoinDesk 的 API 文档所述,请求会发送到 `https://api.coindesk.com/v1/bpi/currentprice.json`。所以,我们首先创建一个 data 里的属性以最终放置信息,然后将会在 `mounted` 生命周期钩子中获取数据并赋值过去:
我们有很多种方式可以从 API 请求信息,但是最好首先确认这些数据看起来长什么样,以便进一步确定如何展示它。为此,我们会调用一次这个 API 并输出结果,以便我们能够看清楚它。如 CoinDesk 的 API 文档所述,请求会发送到 `https://api.coindesk.com/v1/bpi/currentprice.json`。所以,我们首先创建一个 data 里的 property 以最终放置信息,然后将会在 `mounted` 生命周期钩子中获取数据并赋值过去:

```js
new Vue({
Expand Down
2 changes: 1 addition & 1 deletion src/v2/examples/elastic-header.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ type: examples
order: 7
---

<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-elastic-header?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-elastic-header?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
2 changes: 1 addition & 1 deletion src/v2/examples/hackernews.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: examples
order: 12
---

> HackerNews 克隆是基于 HN 的官方 firebase API 、Vue 2.0 、Vue Router 和 Vuex 来构建的,使用服务器端渲染。
> HackerNews 克隆是基于 HN 的官方 firebase API、Vue 2.0、Vue Router 和 Vuex 来构建的,使用服务器端渲染。

{% raw %}
<div style="max-width: 600px;">
Expand Down
2 changes: 1 addition & 1 deletion src/v2/examples/modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ type: examples
order: 6
---

> 使用到的特性:组件,prop 传递,内容插入(content insertion),过渡 (transitions)。
> 使用到的特性:组件,prop 传递,内容插入 (content insertion),过渡 (transitions)。

<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-modal-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
14 changes: 7 additions & 7 deletions src/v2/guide/class-and-style.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type: guide
order: 6
---

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

## 绑定 HTML Class

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

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

``` html
<div
Expand Down Expand Up @@ -120,7 +120,7 @@ data: {

> 这个章节假设你已经对 [Vue 组件](components.html)有一定的了解。当然你也可以先跳过这里,稍后再回过头来看。

当在一个自定义组件上使用 `class` 属性时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
当在一个自定义组件上使用 `class` property 时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

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

Expand Down Expand Up @@ -158,7 +158,7 @@ HTML 将被渲染为:

### 对象语法

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


``` html
Expand Down Expand Up @@ -199,13 +199,13 @@ data: {

### 自动添加前缀

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

### 多重值

> 2.3.0+

从 2.3.0 起你可以为 `style` 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:
从 2.3.0 起你可以为 `style` 绑定中的 property 提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

``` html
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
Expand Down
2 changes: 1 addition & 1 deletion src/v2/guide/comparison.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ Vue 的整体思想是拥抱经典的 Web 技术,并在其上进行扩展。
</style>
```

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

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

Expand Down
Loading