1. 기초 Minxins는 컴포넌트에 재사용 가능한 기능을 배포하는 방법입니다. mixins 객체는 컴포넌트의 옵션에 정의됩니다. mixins를 사용하면 해당 mixin의 모든 옵션과 컴포넌트의 옵션들이 'Mixed' 됩니다. // define a mixin object var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // define a component that uses this mixin var Component = Vue.extend({ mixins: [myMixin] }) var compone..
1. 동적(Dynamic) 컴포넌트와 keep-alive [Vue.JS] 컴포넌트 (기본) 에서 동적 컴포넌트에 관한 이야기를 하였습니다. 위의 코드와 같이 is를 사용하여 동적으로 컴포넌트를 랜더링 할 수 있습니다, is를 사용한 동적 컴포넌트 랜더링을 사용하여 위의 그림와 같이 탭 뷰를 만들 수 있습니다. 하지만 탭을 이동 할 때마다, 새로운 컴포넌트가 그려지기 때문에, 이전의 tab의 상태를 기억하지 못합니다. 위의 예제에서는 Posts 탭에서 Hipster Ipsum을 클릭 했지만, Archive 탭으로 변경하고 다시 Posts 탭으로 돌아오면 이전에 클릭했던 Hipster Ipsum이 보이는 상태가 아니게 됩니다. 탭을 변경 할 때, 이전 탭의 상태를 유지하는 것이 성능 상 좋을 수 있습니다. ..
1. Slot Content Your Profile 부모 컴포넌트에서 자식 컴포넌트를 위의 코드와 같이 사용하여 자식 컴포넌트의 하위 엘리먼트의 값들을 보여주고 싶다면, 위의 코드와 같이 자식 컴포넌트가 작성되어야 합니다. 위의 코드들이 랜더링 되면 엘리먼트는 Your Profile이라는 문구로 대체됩니다. 은 문자열 뿐만 아니라 모든 HTML과 대체 될 수 있습니다. Your Profile 위의 코드와 같은 기본 HTML 태그 뿐만 아니라, Your Profile 위의 코드와 같은 사용자 정의 컴포넌트도 과 대체 될 수 있습니다. 자식 컴포넌트에서 을 사용하지 않았다면, 부모 컴포넌트에서 자식 컴포넌트의 하위 엘리먼트로 넘겨 준 값들은 모두 무시 됩니다. 2. Named Slots 부모 컴포넌트에서 자..
1. 이벤트 이름 $emit을 이용하여 커스텀 이벤트를 만들 때, 이벤트 이름은 kebab-case를 사용하는 것이 좋습니다. 컴포넌트의 이름이나 prop의 이름과 달리 이벤트 이름은 자동으로 변환(camelCase kebab-case)되지 않습니다. 이벤트 이름은 정확히 일치하는 이벤트 리스너와 매칭됩니다. 예를 들어, this.$emit('myEvent')위의 코드와 같이 myEvent 이벤트를 발생 시킨다고 할 때, 부모 컴포넌트는 위의 코드와 같이 myEvent를 받기 위해 v-on:my-event를 사용한다면, my-event는 myEvent가 발생 했다는 것을 감지 할 수 없습니다. 컴포넌트의 이름이나 prop의 이름과 다르게 이벤트 이름은 자바스크립트의 변수나, 속성으로 사용되..
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..
이번 포스트에서는 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..
이번 포스트에서는 폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 하는 방법을 이야기 할 것입니다. 1. v-model 사용법 v-model 디렉티브를 사용하여 폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 할 수 있습니다. v-model은 모든 폼 엘리먼트의 초기 value와 checked, selected 속성을 무시합니다. Vue 인스턴스의 데이터에 의해서만 동작합니다. 참고 - IME 사용시 유의사항 IME (중국어, 일본어, 한국어 등..)가 필요한 언어의 경우 IME 중 v-model이 업데이트 되지 않습니다. IME 중 업데이트 처리를 하기 위해서는 input 이벤트를 사용해야 합니다. 문자열 메시지: {..
1. 이벤트 리스너 v-on 디렉티브는 이벤트 리스너입니다. v-on 디렉티브는 DOM 이벤트가 발행하는지 듣고 있다가 이벤트가 발생 했을 때 JavaScript를 실행합니다. Add 1 위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다. new Vue({ el: '#app', data: { counter: 0 } });위의 예제는 v-on이라는 이벤트 리스너가 click 이벤트가 발행하는지 듣고 있다가 이벤트가 발생 되었을 때 간단한 JavaScript를 실행하는 예제입니다. CodePen에서 결과를 확인 할 수 있습니다. 2. 메소드 이벤트 핸들러 대부분의 이벤트 핸들러의 로직은 복잡하기 때문에 v-on에 JavaScript로 넘겨주기 어렵습니다. 그렇기 때문에 v-on에 m..
이번 포스트에서는 v-for을 사용하여 리스트 렌더링 하는 방법에 대해 이야기 할 것입니다. 1. v-for와 배열 v-for 디렉티브를 사용하여 배열을 리스트 렌더링 할 수 있습니다. v-for 디렉티브에 item in items 형태의 문법을 넘겨줘야 합니다. items는 원본 데이터 배열이고 item은 반복되는 배열의 요소입니다. 기본 사용방법 {{ item.message }} new Vue({ el: '#app', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } });위의 예제는 배열을 사용한 기본적인 리스트 렌더링 예제입니다. 또한 배열의 몇번째 인덱스인지 알 수 있는 인덱스 정보도 제공합니다...
이번 포스트는 v-if와 v-show를 이용하여 조건부 렌더링을 이야기 합니다. 1. v-if v-if 디렉티브를 사용하여 조건부 렌더링을 사용할 수 있습니다. Yes new Vue({ el: '#app', data: { ok: true, }, });v-else v-if 디렉티브는 v-else 디렉티브와 함께 사용 할 수 있습니다. Yes No new Vue({ el: '#app', data: { ok: true, }, });위의 예제는 CodePen에서 결과를 확인 할 수 있습니다. v-else-if v-else-if 디렉티브는 2.1.0에 추가되었습니다. 이름에서 알 수 있듯이 else if 블록 역할을 합니다. A B C Not A/B/C new Vue({ el: ..