Skip to content
guankaishe edited this page Aug 20, 2015 · 9 revisions

el

  • Type: String | HTMLElement

Provide the Zect 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.

data

  • Type: Object | Function

The data object for the Zect instance. It can be accessed as vm.$data:

var data = { a: 1 }
var vm = new Zect({
  data: data
})
vm.$data.a === 1 // -> true

mixins

  • Type: Object

Merge properties and function from given object to current viewModel's options.

replace

  • Type: Boolean

This option is uesed to reduce one level document structure. if option value is truly, replace component's element with it's main child element.

Component template:

<header class="internal-header" data-title="header">
    <h1>Header</h1>
</header>

Usage:

<div z-component="my-component" z-replace="true" class="external-header"></div>

Render result:

<div id="app">
    <header class="internal-header external-header" data-title="header">
        <h1>Header</h1>
    </header>
</div>

methods

  • Type: Object

Methods to be mixed into the Zect 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 Zect instance.

template

  • Type: Object

A string template to be inserted into vm.$el

computed

  • Type: Object

Computed properties to be mixed into the Zect instance. All getters and setters have their this context automatically bound to the Zect instance. For more detail see Computed Properties

directives

  • Type: Object

Define directives that only be used in current viewMode. About directive for more detailt see Custom Directive

components

  • Type: Object Define componens that only be used in current viewMode. About component for more detailt see Reusable Component

created

  • Type: Function

For more detail see Lifecyle Methods/created

ready

  • Type: Function

For more detail see Lifecyle Methods/ready

destroy

  • Type: Function

For more detail see Lifecyle Methods/destroy