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
-**Restriction:** only accepts type `Function` when used in a component definition.
507
+
508
+
-**Details:**
509
+
510
+
Provide the Vue instance an existing DOM element to mount on. It can be a CSS selector string, an actual HTMLElement, or a function that returns an HTMLElement. Note that the provided element merely serves as a mounting point; it will be replaced if a template is also provided. The resolved element will be accessible as `vm.$el`.
511
+
512
+
When used in `Vue.extend`, a function must be provided so each instance gets a separately created element.
513
+
514
+
If this 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.
A string template to be used as the markup for the Vue instance. The template will **replace** the mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template.
525
+
526
+
If the string starts with `#` it will be used as a querySelector and use the selected element's innerHTML as the template string. This allows the use of the common `<script type="x-template">` trick to include templates.
An alternative to string templates allowing you to leverage the full programmatic power of JavaScript. The render function receives a `createElement` method as it's first argument used to create `VNode`s.
540
+
541
+
-**See also:**
542
+
-[Render Functions](/guide/render-function)
543
+
544
+
## Options / Lifecycle Hooks
545
+
546
+
### beforeCreate
547
+
548
+
-**Type:**`Function`
549
+
550
+
-**Details:**
551
+
552
+
Called synchronously after the instance has just been initialized, before data observation and event/watcher setup.
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 a dynamic component is activated, allowing you to perform any necessary asynchronous operations before it should be swapped in.
613
+
614
+
The `activated` hook is only respected during dynamic component swapping or the initial render for static components - it does not affect manual insertions with instance methods.
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.
645
+
646
+
Note if there is a leaving transition, the `destroyed` hook is called **after** the transition has finished.
A hash of components to be made available to the Vue instance.
683
+
684
+
-**See also:**
685
+
-[Components](/guide/components.html)
686
+
687
+
### transitions
688
+
689
+
-**Type:**`Object`
690
+
691
+
-**Details:**
692
+
693
+
A hash of transitions to be made available to the Vue instance.
694
+
695
+
-**See also:**
696
+
-[Transitions](/guide/transitions.html)
697
+
698
+
## Options / Misc
699
+
700
+
### parent
701
+
702
+
-**Type:**`Vue instance`
703
+
704
+
-**Details:**
705
+
706
+
Specify the parent instance for the instance to be created. Establishes a parent-child relationship between the two. The parent will be accessible as `this.$parent` for the child, and the child will be pushed into the parent's `$children` array.
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.
717
+
718
+
Mixin hooks are called in the order they are provided, and called before the component's own hooks.
719
+
720
+
-**Example:**
721
+
722
+
```js
723
+
var mixin = {
724
+
created:function () { console.log(1) }
725
+
}
726
+
var vm =newVue({
727
+
created:function () { console.log(2) },
728
+
mixins: [mixin]
729
+
})
730
+
// -> 1
731
+
// -> 2
732
+
```
733
+
734
+
-**See also:**[Mixins](/guide/mixins.html)
735
+
736
+
### name
737
+
738
+
-**Type:**`String`
739
+
740
+
-**Restriction:** only respected when used in `Vue.extend()`.
741
+
742
+
-**Details:**
743
+
744
+
Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with `Vue.component()`, the global ID is automatically set as its name.
745
+
746
+
Another benefit of specifying a `name` option is console inspection. 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.
747
+
748
+
-**Example:**
749
+
750
+
```js
751
+
var Ctor =Vue.extend({
752
+
name:'stack-overflow',
753
+
template:
754
+
'<div>'+
755
+
// recursively invoke self
756
+
'<stack-overflow></stack-overflow>'+
757
+
'</div>'
758
+
})
759
+
760
+
// this will actually result in a max stack size exceeded
Allows declaratively extending another component (could be either a plain options object or a constructor) without having to use `Vue.extend`. This is primarily intended to make it easier to extend between single file components.
774
+
775
+
This is similar to `mixins`, the difference being that the component's own options takes higher priority than the source component being extended.
776
+
777
+
-**Example:**
778
+
779
+
```js
780
+
var CompA = { ... }
781
+
782
+
// extend CompA without having to call Vue.extend on either
783
+
var CompB = {
784
+
extends: CompA,
785
+
...
786
+
}
787
+
```
788
+
789
+
### delimiters
790
+
791
+
-**Type:**`Array<String>`
792
+
793
+
-**default:**`["{{", "}}"]`
794
+
795
+
-**Details:**
796
+
797
+
Change the plain text interpolation delimiters. This option is only available in the standalone build.
798
+
799
+
-**Example:**
800
+
801
+
```js
802
+
newVue({
803
+
delimiters: ['${', '}']
804
+
})
805
+
806
+
// Delimiters changed to ES6 template string style
807
+
```
808
+
809
+
### functional
810
+
811
+
-**Type:**`boolean`
812
+
813
+
-**Details:**
814
+
815
+
Causes a component to be stateless (no `data`) and instanceless (no `this` context). They are simply a `render` function that returns virtual nodes making them much cheaper to render.
0 commit comments