플러그인은 일반적으로 전역으로 기능을 Vue에 추가합니다. 플러그인은 엄격하게 규정된 범위는 없으며, 여러 유형의 플러그인이 있습니다. 일부 전역 메소드또는 속성 추가 : vue-coustom-element 하나 이상의 전역 자산 추가 : 디렉티브 / 필터 / 트랜지션 등.. vue-touch 글로벌 mixin으로 일부 컴포넌트 옵션을 추가 : vue-router 일부 Vue 인스턴스 메소드를 Vue.prototype에 추가 자체 API를 제공하는 동시에 위의 일부 조합을 주입하는 라이브러리 : vue-router 1. 플러그인 사용하기 Vue.use() 전역 메소드를 호출하여 플러그인을 사용할 수 있습니다. // calls `MyPlugin.install(Vue)` Vue.use(MyPlugin) ne..
1. 기본 대부분의 경우 Vue는 템플릿을 사용하여 HTML을 작성하는 것을 권장합니다. 하지만 때로는 JavaScript를 사용하여 HTML을 작성을 해야 할 때가 있습니다. 이럴 때 render 함수를 사용하면 됩니다. Hello world! 위의 코드와 같이 작성된 HTML이 있을 때, Hello world!위의 코드와 같이 컴포넌트를 작성하여 사용할 수 있습니다. 이 때 level 속성으로 h 태그의 종류를 바꿀 수 있는 컴포넌트를 작성한다면, Vue.component('anchored-heading', { template: '#anchored-heading-template', props: { level: { type: Number, required: true } } ..
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..