Javascript
-
[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..
-
Vue.js 와 DOM의 상호작용 방법Javascript/Vue.js 2019. 8. 18. 20:21
Vue.js 는 아래와 같은 html 코드를 기반으로 템플릿을 만들어냅니다. 그리고 내부적으로 이 템플릿을 이용하여 사용자에게 실제로 보여지게될, 렌더링된 DOM을 생성합니다. Vue 인스턴스는 new 키워드를 통해 아래와 같이 생성할 수 있습니다. 인스턴스 내의 데이터를 html 코드에 바인딩하기 위해서 이중 중괄호 {{ }} 를 이용할 수 있습니다. {{ }} 를 Interpolation(보간법) 이라고 합니다. {{ title }} new Vue({ el: '#app', data: { title: 'Hello world!' } }); Interpolation 안에는 data 오브젝트 뿐만 아니라 methods 내의 함수들을 호출하여 렌더링할 수도 있습니다. {{ sayHello() }} new Vu..