Component

Component 메소드를 이용하여 View/Model/Template 기능을 결합한 재사용가능한 코드를 생성할 수 있습니다. Nue.js에서는 select/form/grid/tree 등의 기본 컴포넌트를 제공합니다. 또한 사용자 컴포넌트를 생성할 수도 있습니다.

Component 생성

var component = Nue.component('componentName', options);

"componentName"은 해당 component의 이름입니다. Nue.js에서 제공하는 컴포넌트들의 name인 경우 해당 컴포넌트의 사용을 뜻합니다. 예를 들어 "select"가 component name인 경우 Nue.js에서 제공하는 Select Component를 생성하게 됩니다.

Nue.js 제공 Component

• Select Nue.component('select')
• Checkbox Nue.component('checkbox')
• Radio Nue.component('radio')
• Form Nue.component('form')
• Grid Nue.component('grid')
• Tree Nue.component('tree')
• Bootstrap ComponentNue.component('bs-***')

사용자 Component 등록

Component는 Nue.component의 create메소드를 이용하여 만듭니다. 이는 Nue.component에 사용자 제작 Component와 그것을 가리키는 이름을 등록하게 되며, 어디에서든 그 이름으로 Component를 재사용 할 수 있습니다.

사용자 Component 예제

Nue.component.create({
    name: 'myComponent',
    model: Nue.model({ url: '/api/codes' }),
    events: {
        'keydown': 'methodOne',
        'click .btn-save': 'methodTwo'
    },
    initialize: function(options){

    },
    render: function(){

    },
    template: function(){
    },

    components: {
    },

    // 사용자 작성 method
    methodOne: function(){
    },
    methodTwo: function(){
    }
});

기본 Options사항은 아래와 같습니다.

{
    el: '#componentDOM',    // Component적용 DOM Selector
    model: Nue.model(),     // Component Model
    template: '',           // Component Template
    autoRender: true        // Model에 data를 set()한 경우 자동 rendering여부
}

기본 Methods

Component Create

이렇게 작성된

DOM Selector

Model과 Rendering

AutoRender

Destroy

Component lifeCycle

onWillMount

onDidMount

onWillUpdate

onDidUpdate

onUnmount

사용자 Component 생성

Nue.component에 사용자 Component를 등록하여 어느곳에서든 재사용 가능한 Component를 직접 만들 수 있습니다.

Nue.component.create({
    name: 'myComponent',
    options: {},
    constructor: function(){
    },


});

myComponent.model.set({ });