You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: source/api/options.md
+81-82Lines changed: 81 additions & 82 deletions
Original file line number
Diff line number
Diff line change
@@ -7,10 +7,10 @@ order: 2
7
7
8
8
### data
9
9
10
-
-**Type:**`Object | Function`
11
-
-**Restricton:**Only accepts `Function` when used in `Vue.extend()`.
10
+
-**类型：**`Object | Function`
11
+
-**局限：**`Vue.extend()`只接受`Function`.
12
12
13
-
The data object for the Vue instance. It can be accessed as `vm.$data`:
13
+
Vue实例的数据对象. 可以通过`vm.$data`访问:
14
14
15
15
```js
16
16
var data = { a:1 }
@@ -20,7 +20,7 @@ var vm = new Vue({
20
20
vm.$data=== data // -> true
21
21
```
22
22
23
-
The Vue instance will proxy access to all its properties, therefore you can manipulate the properties on the Vue instance and the changes get synced back to the actual data object:
The object must be JSON-compliant (no circular references). You can use it just like an ordinary object, and it will look exactly the same when serialized with `JSON.stringify`. You can also share it between multiple Vue instances.
A special case here is when using the `data` option in `Vue.extend()`. Since we don't want nested objects to be shared by all instances created from that extended constructor, we must provide a function that returns a fresh copy of the default data:
@@ -47,15 +47,15 @@ var MyComponent = Vue.extend({
47
47
})
48
48
```
49
49
50
-
<pclass="tip">Under the hood, Vue.js attaches a hidden property `__ob__` and recursively converts the object's enumerable properties into getters and setters to enable dependency collection. Properties with keys that starts with `$` or `_` are skipped.</p>
Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the Vue instance.
Param attributes can also contain interpolation tags. The interpolation will be evaluated against the parent, and under the hood they will be compiled as [`v-with`](../api/directives.html#v-with), which means when the value of the interpolated expression changes, the component's corresponding property will also be updated:
HTML attribute names ignore upper and lower case differences, so we usually use hyphened attributes instead of camel case. There are some special cases when using `paramAttributes` with attributes that contains hyphens:
1.If the attribute is a data attribute, the `data-` prefix will be auto stripped;
137
+
1.如果属性是一个数据属性，`data-`前缀会自动去掉；
139
138
140
-
2.If the attribute still contains dashes, it will be camelized. This is because it's inconvenient to access top level properties containing dashes in templates: the expression `my-param` will be parsed as a minus expression unless you use the awkward `this['my-param']` syntax.
-**Restriction:**only accepts type `Function` when used in `Vue.extend()`.
147
+
-**类型：**`String | HTMLElement | Function`
148
+
-**限制：**使用`Vue.extend()`时只接受`Function`类型。
150
149
151
-
Provide the Vue instance with an existing DOM element. It can be a CSS selector string, an actual HTMLElement, or a function that returns an HTMLElement. The resolved element will be accessible as `vm.$el`.
When used in `Vue.extend`, a function must be provided so each instance gets a separately created element.
152
+
当用`Vue.extend`，必须使用函数返回一个有效值，来保证每个实例得到一个独立的元素。
154
153
155
-
If the option is available at instantiation, the instance will immediately enter compilation; otherwise, the user will have to explicitly call `vm.$mount()` to manually start the compilation.
154
+
如果初始化的时候就提供了，那就马上进行编译；否则，只有执行了`vm.$mount()`才开始编译。
156
155
157
156
### template
158
157
159
-
-**Type:**`String`
158
+
-**类型：**`String`
160
159
161
-
A string template to be inserted into `vm.$el`. Any existing markup inside `vm.$el` will be overwritten, unless [content insertion points](../guide/components.html#内容插入) are present in the template. If the **replace** option is `true`, the template will replace `vm.$el` entirely.
If it starts with `#` it will be used as a querySelector and use the selected element's innerHTML and the template string. This allows the use of the common `<script type="x-template">` trick to include templates.
164
163
165
-
<pclass="tip">Vue.js uses DOM-based templating. The compiler walks through DOM elements and looks for directives and creates data bindings. This means all Vue.js templates are parsable HTML that can be converted into actual DOM elements by the browser. Vue.js converts string templates into DOM fragments so they can be cloned when creating more Vue instances. If you want your templates to be valid HTML, you can configure the directive prefix to start with `data-`.</p>
-**Restriction:**only respected if the **template** option is also present.
168
+
-**类型：**`Boolean`
169
+
-**缺省值：**`false`
170
+
-**限制：**只有提供**template**选项的时候
172
171
173
-
Whether to replace the original `vm.$el` with the template's content instead of appending to it.
172
+
是否用模板内容替换原始的`vm.$el`而不是附加上。
174
173
175
174
## Lifecycle
176
175
177
-
All lifecycle hooks have their `this` context bound to the Vue instance they belong to. The Vue instance will also fire corresponding events for each hook in the form of `"hook:<hookName>"`. e.g. for `created`, a `"hook:created"` event will be fired.
Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, DOM compilation has not been started, and the `$el` property will not be available yet.
Called after the compilation is finished. At this stage all directives have been linked so data changes will trigger DOM updates. However, `$el` is not guaranteed to have been inserted into the document yet.
Called after compilation **and** the `$el` is **inserted into the document for the first time**. Note this insertion must be executed via Vue (with methods like `vm.$appendTo()` or as a result of a directive update) to trigger the `ready` hook.
Called when `vm.$el` is attached to DOM by a directive or a VM instance method such as `$appendTo()`. Direct manipulation of `vm.$el` will **not** trigger this hook.
Called right before a Vue instance is destroyed. At this stage the instance is still fully functional.
218
+
在一个Vue实例被销毁之前调用。这个时候，实例的绑定和指令仍工作正常。
220
219
221
220
### destroyed
222
221
223
-
-**Type:**`Function`
222
+
-**类型：**`Function`
224
223
225
-
Called after a Vue instance has been destroyed. When this hook is called, all bindings and directives of the Vue instance have been unbound and all child Vue instances have also been destroyed.
These are private assets that will be available only to this Vue instance and its children during compilation.
230
+
这里有一些Vue实例和它的子实例在编译期有效的私有的资源。
232
231
233
232
### directives
234
233
235
-
-**Type:**`Object`
234
+
-**类型：**`Object`
236
235
237
-
A hash of directives to be made available to the Vue instance. For details on how to write a custom directive, see [Writing Custom Directives](../guide/custom-directive.html).
A hash of filters to be made available to the Vue instance. For details on how to write a custom filter, see [Writing Custom Filters](../guide/custom-filter.html).
A hash of components to be made available to the Vue instance. For details on how to extend and compose Vue instances, see [Component System](../guide/components.html).
Whether to inherit parent scope data. Set it to `true` if you want to create a component that inherits parent scope. When `inherit` is set to `true`, you can:
1.Bind to parent scope properties in the component template;
273
-
2.Directly access parent properties on the component instance itself, via prototypal inheritance.
271
+
1.在当先组件模板里绑定父组件的数据属性；
272
+
2.直接访问父组件的属相（通过prototypal继承）。
274
273
275
-
One important thing to know when using `inherit: true` is that **the child can also set parent properties**, because all Vue instance data properties are getter/setters.
An object where keys are events to listen for and values are the corresponding callbacks. Note these are Vue events rather than DOM events. The value can also be a string of a method name. The Vue instance will call `$on()` for each entry in the object at instantiation.
An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name. The Vue instance will call `$watch()` for each entry in the object at instantiation.
The `mixins` option accepts an array of mixin objects. These mixin objects can contain instance options just like normal instance objects, and they will be merged against the eventual options using the same option merging logic in `Vue.extend()`. e.g. If your mixin contains a created hook and the component itself also has one, both functions will be called.
-**Restrctions:**only respected when used in `Vue.extend()`.
366
+
-**类型**: `String`
367
+
-**限制:**仅限使用 `Vue.extend()`的时候。
369
368
370
-
When inspecting an extended Vue component in the console, the default constructor name is `VueComponent`, which isn't very informative. By passing in an optional `name` option to `Vue.extend()`, you will get a better inspection output so that you know which component you are looking at. The string will be camelized and used as the component's constructor name.
0 commit comments