[Vue.JS] 컴포넌트 (고급:Handling Edge Cases)
1. Element & Component Access 대부분의 경우 다른 컴포넌트의 인스턴스에 접근하거나 DOM을 직접 조작하는 것은 피해야 합니다. 그러나 때로는 다른 컴포넌트의 인스턴스에 접근하거나 DOM을 직접 조작해야 할 때가 있습니다. 1) 루트 인스턴스 접근 $root를 사용하면 루트 인스턴스에 접근 가능합니다. // The root Vue instance new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function () { /* ... */ } } })위의 코드와 같이 루트 인스턴스가 있을 때, // Get root data this.$root.foo // Set root da..
[Vue.JS] 컴포넌트 (고급:Dynamic & Async Components)
1. 동적(Dynamic) 컴포넌트와 keep-alive [Vue.JS] 컴포넌트 (기본) 에서 동적 컴포넌트에 관한 이야기를 하였습니다. 위의 코드와 같이 is를 사용하여 동적으로 컴포넌트를 랜더링 할 수 있습니다, is를 사용한 동적 컴포넌트 랜더링을 사용하여 위의 그림와 같이 탭 뷰를 만들 수 있습니다. 하지만 탭을 이동 할 때마다, 새로운 컴포넌트가 그려지기 때문에, 이전의 tab의 상태를 기억하지 못합니다. 위의 예제에서는 Posts 탭에서 Hipster Ipsum을 클릭 했지만, Archive 탭으로 변경하고 다시 Posts 탭으로 돌아오면 이전에 클릭했던 Hipster Ipsum이 보이는 상태가 아니게 됩니다. 탭을 변경 할 때, 이전 탭의 상태를 유지하는 것이 성능 상 좋을 수 있습니다. ..
[Vue.JS] 컴포넌트 (고급:slot)
1. Slot Content Your Profile 부모 컴포넌트에서 자식 컴포넌트를 위의 코드와 같이 사용하여 자식 컴포넌트의 하위 엘리먼트의 값들을 보여주고 싶다면, 위의 코드와 같이 자식 컴포넌트가 작성되어야 합니다. 위의 코드들이 랜더링 되면 엘리먼트는 Your Profile이라는 문구로 대체됩니다. 은 문자열 뿐만 아니라 모든 HTML과 대체 될 수 있습니다. Your Profile 위의 코드와 같은 기본 HTML 태그 뿐만 아니라, Your Profile 위의 코드와 같은 사용자 정의 컴포넌트도 과 대체 될 수 있습니다. 자식 컴포넌트에서 을 사용하지 않았다면, 부모 컴포넌트에서 자식 컴포넌트의 하위 엘리먼트로 넘겨 준 값들은 모두 무시 됩니다. 2. Named Slots 부모 컴포넌트에서 자..
[Vue.JS] 컴포넌트 (고급:Custrom Events)
1. 이벤트 이름 $emit을 이용하여 커스텀 이벤트를 만들 때, 이벤트 이름은 kebab-case를 사용하는 것이 좋습니다. 컴포넌트의 이름이나 prop의 이름과 달리 이벤트 이름은 자동으로 변환(camelCase kebab-case)되지 않습니다. 이벤트 이름은 정확히 일치하는 이벤트 리스너와 매칭됩니다. 예를 들어, this.$emit('myEvent')위의 코드와 같이 myEvent 이벤트를 발생 시킨다고 할 때, 부모 컴포넌트는 위의 코드와 같이 myEvent를 받기 위해 v-on:my-event를 사용한다면, my-event는 myEvent가 발생 했다는 것을 감지 할 수 없습니다. 컴포넌트의 이름이나 prop의 이름과 다르게 이벤트 이름은 자바스크립트의 변수나, 속성으로 사용되..
[Vue.JS] 컴포넌트 (고급:props)
1. prop 표기법 (camelCase VS kebab-case) HTML 속성은 대소문자를 구별하지 않습니다. 모든 대문자를 소문자로 인식합니다. Vue에서 HTML을 표현 할 때 보통 kebal-case로 표현하고, JavaScript에서 prop를 받아 사용할 때는 camelCase를 사용합니다. HTML에서는 kebal-case(post-title)를 사용합니다. Vue.component('blog-post', { // camelCase in JavaScript props: ['postTitle'], template: '{{ postTitle }}' })JavaScript에서는 camelCase(postTitle)를 사용합니다. 2. prop 타입 pr..
[Vue.JS] 컴포넌트 (기본)
이번 포스트에서는 SPA에서 가장 중요하다 이야기 되는 컴포넌트에 관해 이야기 할 것입니다. 1. 기본 예제 // Define a new component called button-counter Vue.component('button-counter', { data: function () { return { count: 0 } }, template: 'You clicked me {{ count }} times.' });위의 예제는 라는 이름으로 재사용이 가능한 컴포넌트입니다. Vue.component('button-counter', { data: function () { return { count: 0 } }, template: 'You clicked me..