Javascript/Vue.js
-
[Vue] Directive hookJavascript/Vue.js 2019. 9. 13. 14:23
bind(el, binding, vnode) Directive 가 엘리먼트에 처음 바인딩 될 때 한 번만 호출됩니다. inserted(el, binding, vnode) 바인딩된 엘리먼트가 부모 노드에 삽되었을 때 호출됩니다. update(el, binding, vnode, oldVnode) 컴포넌트가 업데이트되고난 후에 호출됩니다. 자식 컴포넌트는 아직 업데이트 되기 전에 호출됩니다. 새로운 가상돔과 이전의 가상돔을 파라미터로 받습니다. componentUpdated(el, binding, vnode, oldVnode) 컴포넌트가 업데이트되고난 후에 호출되지만 update hook과 다르게 자식 컴포넌트까지 업데이트된 후에 호출됩니다. unbind(el, binding, vnode) 디렉티브가 엘리먼트..
-
[Vue] LifecycleJavascript/Vue.js 2019. 9. 1. 11:44
Vue의 라이프 사이클 훅 Creation 1. beforeCreate 인스턴스가 생성되고 가장 먼저 실행된다. 아직 data와 event 속성이 설정되기 전이기 때문에 data와 event 객체에는 접근할 수 없다. 2. created data와 event 속성이 설정된 상태로 정의된 값에 접근하여 로직을 수행할 수 있다. 하지만 아직 template 속성과 Virtual DOM이 렌더링 되지 않은 상태이다. Mounting 1. beforeMount 템플릿 및 코드들이 렌더링 되기 직전에 호출된다. 2. mounted 컴포넌트, 템플릿, DOM이 모두 렌더링 된 후에 호출된다. 컴포넌트 구성 요소의 데이터를 조작할 수 있다. 다만 모든 자식 컴포넌트가 렌더링 되어 있지 않을 수 있기 때..
-
[Vue] Computed and WatchJavascript/Vue.js 2019. 8. 26. 17:25
computed Vue 인스턴스에는 computed 라는 속성이 있습니다. 이 속성은 평소에는 자신의 계산된 값을 캐싱하고 있습니다. 자신이 의존하고 있는 속성이 변경되지 않는 한, 함수를 실행하지 않습니다. 만약 자신이 의존하고 있는 속성이 변경된다면 함수가 호출되어 자신이 가지고 있는 값을 갱신합니다. Increase Decrease Increase Second Counter : {{ counter }} | {{ secondCounter }} Result : {{ result() }} | {{ output }} 위 코드를 보면 html 코드에 삽입된 Interpolation 으로 인해 최초 렌더링이 될 때, computed의 output 메서드와 methods의 result 메서드가 호출되어 콘솔 출..
-
[Vue.js] DOM event 핸들링 방법Javascript/Vue.js 2019. 8. 20. 22:28
v-bind 디렉티브는 인스턴스의 데이터를 HTML 속성으로 바인딩하여 렌더링합니다. 이와는 반대로 v-on 디렉티브는 인스턴스에서 DOM 이벤트를 수신할 수 있습니다. Click me {{ counter }} new Vue({ el: '#app', data: { counter: 0 }, methods: { increase: function() { this.counter++; } } }); 위의 예시는 counter 라는 데이터를 렌더링하고 있고, v-on 디렉티브를 이용하여 버튼의 click 이벤트를 리스닝하고 있는 상황입니다. 만약 버튼이 클릭되면 인스턴스는 이벤트를 수신하여 "increase" 메서드를 수행합니다. 그 결과 counter++ 가 수행되고, counter가 증가함에 따라 Interpo..