event bus


https://ryuzuka.github.io/VUE/tutorial/10_eventBus.html


비어있는 Vue 인스턴스를 이벤트 버스로 이용해 컴포넌트 간 통신 가능( $emit, $on )


<div id="app">
<div>
<button-component></button-component>
<text-component></text-component>
</div>
</div>

<script>
let eventBus = new Vue(); // 빈 Vue 인스턴스 생성

Vue.component( 'button-component', {
template: '<button @click="clickButton">button-component</button>',
methods: {
clickButton () {
eventBus.$emit( 'component-event', '비 부모-자식간 컴포넌트 통신' );
}
}
});

Vue.component( 'text-component', {
template: '<span>{{ text }}</span>',
data: function () {
return { text: '' };
},
mounted: function () {
eventBus.$on( 'component-event', function ( text ) {
this.text = text;
}.bind( this ));
}
});
new Vue({
el: '#app',
});
</script>



'Vue' 카테고리의 다른 글

동적 컴포넌트 ( is, keep-alive )  (0) 2019.02.08
slot  (0) 2019.02.08
사용자 정의 이벤트  (0) 2019.02.06
props  (0) 2019.02.05
컴포넌트  (0) 2019.01.26

사용자 정의 이벤트


https://ryuzuka.github.io/VUE/tutorial/09_customEvent.html


$on(eventName)  이벤트 감지

$emit(eventName) 이벤트 트리거

부모 컴포넌트는 자식 컴포넌트가 사용되는 템플릿에서 직접 v-on 을 사용하여 자식 컴포넌트에서 보내진 이벤트를 청취할 수 있다.

<custom-event v-on:custom-event="customEvent"></custom-event>


  • .native

컴포넌트의 루트 엘리먼트에서 네이티브 이벤트를 수신할 수 있다.

<custom-event v-on:click.native="nativeEvent"></custom-event>


  • .sync

자식 컴포넌트가 .sync를 가지는 속성을 변경하면 값의 변경이 부모에 반영 된다. 편리하지만 단방향 데이터 흐름이 아니기 때문에 컴포넌트의 데이터 관리가 어려워 진다. 그러나 재사용 가능한 컴포넌트를 만들 때 유용할 수 있다. 

부모 상태에 영향을 미치는 코드를 더욱 일관적이고 명백하게 만들어야 한다.

<sync :data.sync="data"></sync>

this.$emit( 'update:data', ... );


컴포넌트에 v-model을 정의하면 props에서 'value' 로 사용할 수 있다.

<div id="app">
<v-model-component v-model="modelData"></v-model-component>
</div>

Vue.component( 'v-model-component', {
props: ['value'],
template: '<input type="text" :value="value" @input="validate">'
});

new Vue({
el: '#app',
data: {
modelData: '...'
}
});


'Vue' 카테고리의 다른 글

slot  (0) 2019.02.08
event bus  (0) 2019.02.08
props  (0) 2019.02.05
컴포넌트  (0) 2019.01.26
필터  (0) 2019.01.26

props


https://ryuzuka.github.io/VUE/tutorial/08_props.html


  • props

 Vue.js에서 부모-자식 컴포넌트 관계는 props는 아래로, events 위로 라고 요약 할 수 있다. 부모는 props를 통해 자식에게 데이터를 전달하고 자식은 events를 통해 부모에게 메시지를 보낸다. ( parent => child: props || child => parent: emit )

HTML 속성은 대소 문자를 구분하지 않으므로 문자열이 아닌 템플릿을 사용할 때 camelCased prop 이름에 해당하는 kebab-case(하이픈 구분)를 사용해야 한다.


<div id="app">
<props-component props-data="props-data"></props-component>
</div>
<script>
new Vue({
el: '#app',
components: {
'props-component': {
props: ['props-data'],
template: '<div>{{ propsData }}</div>'
}
}
});
</script>


  • dynamic props
<div id="app">
<dynamic-props-component :dynamic-props-data="dynamicPropsData"></dynamic-props-component>
</div>
<script>
new Vue({
el: '#app',
data: {
dynamicPropsData: 'dynamic-props-data',
},
components: {
'dynamic-props-component': {
props: ['dynamic-props-data'],
template: '<span>{{ dynamicPropsData }}</span>'
}
}
});
</script>


  • props 주의점 ( 단방향 데이터 흐름 )

 컴포넌트 사이의 모든 props는 parent -> child 사이의 단방향 바인딩을 형성하위 컴포넌트가 부모의 상태를 변경하여 앱의 데이터 흐름을 추론하기 더 어렵게 만드는 것을 방지.


1. props의 초기 값을 컴포넌트 로컬 데이터 속성으로 정의

<div id="app">
<caution-initial :initial-counter="counter"></caution-initial></div>
</div>
<script>
var v2 = new Vue({
el: '#app',
data: {
counter: 0
},
components: {
'caution-initial': {
props: ['initial-counter'],
template: '<div><button @click="addCounter">{{ counter }}</div>',
data: function () {
return {
counter: this.initialCounter
};
},
methods: {
addCounter () {
this.counter++;
}
}
}
}
});
</script>


2. props 값으로 부터 계산된 속성을 정의

<div id="app">
<cuation-computed :props-data="propsData"></cuation-computed>
</div>
<script>
var v1 = new Vue({
el: '#app',
data: {
propsData: 'props-data'
},
components: {
'cuation-computed': {
props: ['props-data'],
template: '<div>{{ computedPropsData }}</div>',
computed: {
computedPropsData () {
return 'computed-' + this.propsData;
}
}
}
}
});
</script>


  • props 검증

props 검증을 통해 props 데이터 타입, 기본값, 유효성 검사를 강제. ( 객체 형식으로 props 속성에 대한 값에 정의. )

- type : String, Number, Boolean, Object, Array, Function, Symbol

- default : 기본값

- required : 필수값

- validator : 유효성 검사

props: {
'props 검증': {
type: String, Number, Boolean, Object, Array, Function, Symbol
type: [],
default: function () { // 기본값 정의
return 'default';
},
validator: function ( value ) { // 유효성 검사
return value > 0;
},
required: true // 필수값 설정
},
}


  • props가 아닌 존재하는 속성 교체/병합

기본적으로 부모 컴포넌트에 제공된 값은 자식 컴포넌트에서 설정되어 값을 대체. ( class와 style 속성은 병합됨 )

inheritAttrs 존재하는 속성 병합 ( Boolean )

<div id="app">
<bs-date-input type="date" data-3d-date-picker="true"></bs-date-input>
</div>
<script>
new Vue({
el: '#app',
components: {
'bs-date-input': {
inheritAttrs: true,
template: '<input class="form-control">'
}
}
});
</script>


'Vue' 카테고리의 다른 글

event bus  (0) 2019.02.08
사용자 정의 이벤트  (0) 2019.02.06
컴포넌트  (0) 2019.01.26
필터  (0) 2019.01.26
폼 입력 바인딩, 모델  (0) 2019.01.23

컴포넌트


https://ryuzuka.github.io/VUE/tutorial/07_component.html


  • 컴포넌트

 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 된다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트. 경우에 따라 특별한 is 속성으로 확장 된 원시 HTML 엘리먼트로 나타날 수도 있다.


 Vue 컴포넌트는 Vue 인스턴스이기도 하다. 그러므로 모든 옵션 객체를 사용할 수 있다. (루트에만 사용하는 옵션은 제외)

그리고 같은 라이프사이클 훅을 사용할 수 있다.


- Vue는 사용자 지정 태그 이름에 대해 
W3C 규칙을 적용하지 않는다. ( 모두 소문자, 하이픈 포함. )
컴포넌트의data옵션은 반드시 함수형으로 정의한다. ( 컴포넌트 재 사용시 인스턴스가 같은 data객체를 공유하므로 새로운 데이터 객체를 반환. )


  • 전역 컴포넌트

<div id="app">
<global-component></global-component>
</div>
<script>
Vue.component( 'global-component', {            // 컴포넌트 이름은 하이픈을 포함한 소문자여야 한다.
template: '<div>global-component</div>',
data: function () {                     // 컴포넌트 data를 정의할때 반드시 함수로 정의해야 한다.
return {}
}
});

new Vue({
el: '#app'
});
</script>


  • 지역 컴포넌트
<div id="app">
<local-component></local-component>
</div>
<script>
new Vue({
el: '#app',
components: {
'local-component': {
template: '<div>local-component</div>',
data: function () {
return {}
}
}
}
});
</script>


  • DOM 템플릿 구문 분석 경고

<ul>,<ol>,<table><select>와 같은 일부 엘리먼트는 그 안에 어떤 엘리먼트가 나타날 수 있는지에 대한 제한을 가지고 있으며,<option>과 같이 특정 다른 엘리먼트 안에만 나타날 수 있다. 해결 방법은 is 특수 속성을 사용.

<table>
<tr is="table-element"></tr>
</table>


  • 템플릿 분리
<script type="text/x-template" id="template-component"></script>
<template id="template-component"></template>

new Vue({
components: {
'template-component': {
template: '#template-component'
}
}
});


  • v-once

컴포넌트 템플릿의 루트 엘리먼트에 v-once 속성 추가

<div id="app">
<once-component></once-component>
</div>
<script>
Vue.component( 'once-component', {
template: '<div v-once><div>v-once: 컴포넌트 템플릿의 루트 엘리먼트에 v-once 속성 추가</div></div>' // v-once
});

new Vue({
el: '#app',
});
</script>




'Vue' 카테고리의 다른 글

사용자 정의 이벤트  (0) 2019.02.06
props  (0) 2019.02.05
필터  (0) 2019.01.26
폼 입력 바인딩, 모델  (0) 2019.01.23
이벤트  (0) 2019.01.16

필터


https://ryuzuka.github.io/VUE/tutorial/06_filter.html


Vue는 텍스트 형식화를 적용할 수 있는 필터를 지원합니다. 이 필터들은 중괄호 보간법 혹은 v-bind표현법 을 이용할 때 사용가능.

필터는 자바스크립트 표현식 마지막에 “파이프”심볼과 함께 추가.

( v-bind, Mustache ( {{ }} )표현식에서 사용 가능, 복잡한 데이터 변환을 해야하는 경우 computed 이용 )


<!-- Mustache -->
<div>{{ value | filter }}</div>
<div>{{ filter | filterA( 'arg1', 'arg2' ) | filterB }}</div> <!-- 체이닝 가능, 두개 이상의 인수를 받을 수 있음 -->

<!-- v-bind -->
<div v-bind:id="value | filter"></div>

// 로컬 필터 정의
new Vue({
filters: {
filter ( value ) {}
}
});

// 전역 필터 정의
Vue.filter( 'filter', function ( value ) {});




'Vue' 카테고리의 다른 글

props  (0) 2019.02.05
컴포넌트  (0) 2019.01.26
폼 입력 바인딩, 모델  (0) 2019.01.23
이벤트  (0) 2019.01.16
템플릿 문법, 디렉티브  (0) 2019.01.12