1. 시작 기본 디렉티브 (v-model, v-show 등..) 외에도 사용자가 직접 정의한 디렉티브를 등록 할 수 있습니다. 기본적으로 Vue 2.0의 코드 재사용 및 추상화의 기본 형식은 컴포넌트 입니다. 하지만 일반 엘리먼트의 DOM에 접근이 필요한 경우 사용자 정의 디렉티브가 유용하게 사용 될 수 있습니다. // 전역 사용자 정의 디렉티브 v-focus 등록 Vue.directive('focus', { // 바인딩 된 엘리먼트가 DOM에 삽입되었을 때... inserted: function (el) { // 엘리먼트에 포커스를 줍니다 el.focus() } })위의 코드는 페이지가 로드되면 해달 엘리먼트에 포커스를 주는 디렉티브 입니다. (참고, 모바일 사파리에서도는 동작하지 않습니..
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. 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..
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..