트랜지션


https://ryuzuka.github.io/VUE/tutorial/15_transition.html


  • <transition>

- single element

<div id="app">
<button @click="show = !show">
Toggle render
</button>
<transition name="transition">
<p v-if="show">hello</p>
</transition>
</div>
<style>
.transition-enter-active { transition: opacity .5s }
.transition-enter { opacity: 0 }
.transition-enter-to { opacity: 1 }

.transition-leave-active { transition: opacity .5s }
.transition-leave { opacity: 1 }
.transition-leave-to { opacity: 0 }
</style>
<script>
new Vue({
el: '#app',
data: {
show: true
}
});
</script>


  • <transition-group>

- multiple element ( v-for )

<div id="app">
<button @click="show = !show">Toggle render</button>
<transition-group name="transition" tag="ul">
<li v-for="item in items" v-bind:key="item" class="item" v-if="show">{{ item }}</li>
</transition-group>
</div>
<style>
.transition-enter-active { transition: opacity .5s }
.transition-enter { opacity: 0 }
.transition-enter-to { opacity: 1 }

.transition-leave-active { transition: opacity .5s }
.transition-leave { opacity: 1 }
.transition-leave-to { opacity: 0 }
</style>
<script>
new Vue({
el: '#app',
data: {
show: true,
items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
nextNum: 10
},
methods: {
}
});
</script>


  • 트랜지션 클래스

  1. v-enter: enter의 시작 상태. 엘리먼트가 삽입되기 전에 적용되고 한 프레임 후에 제거됩니다.

  2. v-enter-active: enter에 대한 활성 및 종료 상태. 엘리먼트가 삽입되기 전에 적용됩니다. 트랜지션 / 애니메이션이 완료되면 제거됩니다.

  3. v-enter-to: 진입 상태의 끝에서 실행됩니다. 엘리먼트가 삽입된 후 (동시에 v-leave가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가했습니다.

  4. v-leave: leave를 위한 시작 상태. 진출 트랜지션이 트리거 될 때 적용되고 한 프레임 후에 제거됩니다.

  5. v-leave-active: leave에 대한 활성 및 종료 상태. 진출 트랜지션이 트리거되면 적용되고 트랜지션 / 애니메이션이 완료되면 제거됩니다.

  6. v-leave-to: 진출 상태의 끝에서 실행됩니다. 진출 트랜지션이 트리거되고 (동시에 v-leave가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가했습니다.


  • javascript hook

<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"

v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled">
</transition>


  • appear

최초 렌더링 시 트랜지션

<transition

appear

// 사용자 정의 css

appear-class="custom-appear-class"

appear-to-class="custom-appear-to-class"
appear-active-class="custom-appear-active-class"
// javascript 훅
v-on:before-appear="beforeAppear"
v-on:appear="appear"
v-on:after-appear="afterAppear"

v-on:appear-cancelled="appearCancelled">

</transition>


  • mode

트랜지션 모드

in-out: 처음에는 새로운 엘리먼트가 트랜지션되고, 완료되면 현재 엘리먼트가 트랜지션됩니다.

out-in: 현재 엘리먼트가 먼저 트랜지션되고, 완료되면 새로운 요소가 바뀝니다.

<transition mode="out-in">
<!-- ... -->
</transition>



저작자표시

'Vue' 카테고리의 다른 글

vue-router  (0) 2019.02.23
axios  (0) 2019.02.23
사용자 정의 디렉티브  (0) 2019.02.09
믹스인  (0) 2019.02.09
동적 컴포넌트 ( is, keep-alive )  (0) 2019.02.08

사용자 정의 디렉티브


https://ryuzuka.github.io/VUE/tutorial/14_customDirective.html


  • 사용자 정의 디렉티브

- 기본 디렉티브 (v-model, v-show 등..) 외에도 사용자가 직접 정의한 디렉티브를 등록 가능

<div id="app">
<input v-border>
<input v-focus>
</div>
<script>
Vue.directive( 'border', { // 전역
inserted: function ( el ) {
el.style.border = '1px solid red'
}
});
new Vue({
el: '#app',
directives: { // 로컬
'focus': {
inserted ( el ) {
el.focus();
}
}
}
});
</script>


  • javascript hook

bind : 디렉티브가 처음 엘리먼트에 바인딩 될 때 한번만 호출


inserted : 바인딩 된 엘리먼트가 DOM에 삽입 되었을 때 호출


update : 해당 컴포넌트가 업데이트 된 후 호출. ( 자식이 업데이트 되기 전일 가능성이 있다. ) 


componentUpdate : 포함하고 있는 컴포넌트와 하위 컴포넌트들이 업데이트 된 후에 호출


unbind : 디렉티브가 엘리먼트로부터 바인딩이 해제될 때 호출


  • <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

  • Vue.directive('demo', {
    bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
    'name: ' + s(binding.name) + '<br>' +
    'value: ' + s(binding.value) + '<br>' +
    'expression: ' + s(binding.expression) + '<br>' +
    'argument: ' + s(binding.arg) + '<br>' +
    'modifiers: ' + s(binding.modifiers) + '<br>' +
    'vnode keys: ' + Object.keys(vnode).join(', ')
    }
    });

    new Vue({
    el: '#hook-arguments-example',
    data: {
    message: 'hello!'
    }
    });
  • * 디렉티브 훅의 모든 전달인자는 readonly로 사용해야 한다.
  • el: 디렉티브가 바인딩된 엘리먼트. 이 것을 사용하면 DOM 조작을 할 수 있습니다.
  • binding: 아래의 속성을 가진 객체입니다.
    • name: 디렉티브 이름, v- 프리픽스가 없습니다.
    • value: 디렉티브에서 전달받은 값. 예를 들어 v-my-directive="1 + 1"인 경우 value는 2 입니다.
    • oldValue: 이전 값. update와 componentUdated에서만 사용할 수 있습니다. 이를 통해 값이 변경되었는지 확인할 수 있습니다.
    • expression: 표현식 문자열. 예를 들어 v-my-directive="1 + 1"이면, 표현식은 "1 + 1" 입니다.
    • arg: 디렉티브의 전달인자, 있는 경우에만 존재합니다. 예를 들어 v-my-directive:foo 이면"foo" 입니다.
    • modifiers: 포함된 수식어 객체, 있는 경우에만 존재합니다. 예를 들어 v-my-directive.foo.bar이면, 수식어 객체는 { foo: true, bar: true }입니다.
  • vnode: Vue 컴파일러가 만든 버추얼 노드. VNode API에 전체 설명이 있습니다.
  • oldVnode: 이전의 버추얼 노드. update와 componentUdated에서만 사용할 수 있습니다.


저작자표시

'Vue' 카테고리의 다른 글

axios  (0) 2019.02.23
트랜지션  (0) 2019.02.10
믹스인  (0) 2019.02.09
동적 컴포넌트 ( is, keep-alive )  (0) 2019.02.08
slot  (0) 2019.02.08

믹스인


https://ryuzuka.github.io/VUE/tutorial/13_mixin.html


  • mixin

- Vue 컴포넌트에 재사용 가능한 기능을 배포하는 방법

- mixin 객체는 모든 구성 요소 옵션을 포함할 수 있다.

- 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”된다.

- mixin과 컴포넌트의 옵션이 중첩이 된다면, 두 옵션은 'Merged' 되며 컴포넌트가 우선순위를 갖는다.

// 전역
Vue.mixin({
methods: {
global () {
alert( 'global - mixin')
}
}
});
// 로컬
let mixin = {
methods: {
local () {
alert( 'local - mixin' );
}
}
};

new Vue({
mixins: [mixin],
el: '#mixin',
});


저작자표시

'Vue' 카테고리의 다른 글

트랜지션  (0) 2019.02.10
사용자 정의 디렉티브  (0) 2019.02.09
동적 컴포넌트 ( is, keep-alive )  (0) 2019.02.08
slot  (0) 2019.02.08
event bus  (0) 2019.02.08

동적 컴포넌트


https://ryuzuka.github.io/VUE/tutorial/12_dynamicComponent.html


  • is

- 같은 마운트 포인트를 사용하고 예약된 <component> 엘리먼트를 사용하여 여러 컴포넌트 간에 동적으로 트랜지션하고 is 속성에 바인드 할 수 있다.


  • keep-alive

- 컴포넌트를 메모리에 유지하여 상태를 보존하거나 다시 렌더링하지 않도록하려면 동적 컴포넌트를 <keep-alive> 로 래핑한다.


<div id="app">
<ul>
<li @click="current = 'component1'"><a href="#">component1</a></li>
<li @click="current = 'component2'"><a href="#">component2</a></li>
<li @click="current = 'component3'"><a href="#">component3</a></li>
</ul>
<keep-alive>
<component :is="current"></component>
</keep-alive>
</div>
<script>
new Vue({
el: '#app',
data: {
current: 'component1'
},
components: {
component1: {
template: '<div>component1</div>'
},
component2: {
template: '<input type="text" placeholder="conponent2">'
},
component3: {
template: '<div>component3</div>'
},
}
});
</script>



저작자표시

'Vue' 카테고리의 다른 글

사용자 정의 디렉티브  (0) 2019.02.09
믹스인  (0) 2019.02.09
slot  (0) 2019.02.08
event bus  (0) 2019.02.08
사용자 정의 이벤트  (0) 2019.02.06

slot


https://ryuzuka.github.io/VUE/tutorial/11_slot.html


  • slot

컨텐츠 배포 - 자식 컴포넌트의 지정된 <slot> 위치에 부모 컴포넌트의 컨텐츠가 삽입된다.

 - 부모 컴포넌트가 비어있고 <slot> 내부에 컨텐츠가 존재하면 <slot> 자체의 컨텐츠가 렌더링 된다. - 대체 컨텐츠

 - 하위 컴포넌트 템플릿에 최소한 하나의 <slot> 콘텐츠가 포함되어 있지 않으면 부모 콘텐츠가 삭제된다.

 - 상위 템플릿의 모든 내용은 상위 범위로 컴파일된다. 하위 템플릿의 모든 내용은 하위 범위에서 컴파일된다.

<div id="app">
<post>
컨텐츠 배포 - 컴포넌트의 마크업 확장
</post>
</div>
<script>
Vue.component( 'post', {
template: `
<div>
<p>
<slot></slot>
</p>
</div>
`
});

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


  • 이름을 가지는 slot

자식 컴포넌트에 <slot name="..."> 속성을 지정하고 부모 컴포넌트의 마크업에 slot="..." 속성을 지정하면 해당하는 <slot> 위치에 렌더링 된다.
<div id="app">
<post>
<h3 slot="title">{{ title }}</h3>
<p slot="contents">{{ contents }}</p>
</post>
</div>
<script>
Vue.component( 'post', {
template: `
<div>
<slot name="title"></slot>
<slot name="contents"></slot>
</div>
`
});

new Vue({
el: '#app',
data: {
title: '이름을 가지는 slot',
contents: '일치하는 name 속성값을 가진 slot위치로 렌더링 된다.'
}
});
</script>

  • 범위를 가지는 slot

범위를 가지고 있는 <slot v-for="..."> 의 경우 <template scope="..."> 통해 처리할 수 있다.

<div id="app">
<scope-component>
<template scope="fruits">
<li>{{ fruits.fruitName }}: {{ fruits.price }}</li>
</template>
</scope-component>
</div>
<script>
Vue.component( 'scope-component', {
template: `
<div>
<ul>
<slot v-for="item in fruits" :fruit-name="item.name" :price="item.price"></slot>
</ul>
</div>
`,
data: function () {
return {
fruits: [
{
name: 'Apple',
price: 1500
},
{
name: 'Banana',
price: 900
}
]
};
}
});

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


저작자표시

'Vue' 카테고리의 다른 글

믹스인  (0) 2019.02.09
동적 컴포넌트 ( is, keep-alive )  (0) 2019.02.08
event bus  (0) 2019.02.08
사용자 정의 이벤트  (0) 2019.02.06
props  (0) 2019.02.05

티스토리툴바