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/index.md
+6-2Lines changed: 6 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -9,12 +9,16 @@ The `Vue` Class is the core of vue.js. It is a constructor that allows you to cr
9
9
var vm =newVue({ /* options */ })
10
10
```
11
11
12
-
When you instantiate a ViewModel instance, it compiles the DOM element it is assigned to and creates data bindings that keep the DOM and the data in sync. It takes an option object that can include options about the DOM element, data object, mixin methods, lifecycle hooks and more. See the full list of [Instantitation Options](/api/instantiation-options.html).
12
+
When you instantiate a ViewModel instance, it compiles the DOM element it is assigned to and creates data bindings that keep the DOM and the data in sync. It takes an option object that can include options about the DOM element, data object, mixin methods, lifecycle callbacks and more. See the full list of [Instantitation Options](/api/instantiation-options.html).
13
+
14
+
During the compilation phase, Vue.js walks through the DOM and compiles the directives it runs into. Once compiled, these DOM nodes are now said to be managed by the ViewModel. A DOM node can only be managed by one ViewModel, and once compiled, it should not be compiled again because the original binding information would have been lost. For templates, Vue.js caches them as un-compiled DocumentFragments and simply does `cloneNode(true)` when reusing them, which is highly efficient.
13
15
14
16
Each ViewModel instance has an associated DOM element `$el`, which is essentially the V in MVVM. It also has an associated JavaScript object `$data`, which is essentially the M in MVVM. Changing the M results in updates in the V. For two-way bindings, inputs in the V results in changes in the M. For more details check out [Instance Properties](/api/instance-properties.html).
15
17
16
18
ViewModel instances proxies access to their `$data` objects, so if you have `vm.$data.msg` you can also access it as `vm.msg`. This might look a bit magical, but is totally optional. You can stick to `vm.$data.msg` for more explicit data access. However it is still important to notice the difference between `vm` and `vm.$data`, since the former cannot be observed by other ViewModels as data.
17
19
20
+
It's also worth noting that data objects do not necessarily belong to a single ViewModel - multiple ViewModels can observe the same piece of data, whether directly as `$data` or nested under it. This is useful when multiple components need to react to a shared global state object.
21
+
18
22
Each ViewModel instance also has a number of [Instance Methods](/api/instance-methods.html) which covers data observation, event communication and dom manipulation.
19
23
20
-
`Vue` also holds several [Global Methods](/api/global-methods.html), which allow you to extend the `Vue` class, configure global settings and register global custom assets such as components, directives, filters and more.
24
+
Finally, the `Vue` constructor itself also holds several [Global Methods](/api/global-methods.html), which allow you to extend the `Vue` class, configure global settings and register global custom assets such as components, directives, filters and more.
0 commit comments