Vue.js 시작하기 | #Developer #Hotsse

Vue.js

Vue는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크이다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계했다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽다. Vue는 현대적 도구 및 지원하는 라이브러리(Axios 등)와 함께 사용한다면 정교한 SPA를 완벽하게 만들 수 있다.

Vue.js 추가

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Prod

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

프로덕션 환경에서는 버전명을 명시하는 것으로, 새로운 버전에서 발생할 수 있는 예상치 못한 오류를 방지하는 것이 좋다.
프로덕션용은 개발용에 비해 최소화, 최적화가 진행되어 있으므로 앱 성능을 높일 수 있다.

선언적 렌더링

Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링 하는 것이다.

<div id="app">
    {{ message }}
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

new Vue() 구문을 통해 새로운 Vue 인스턴스를 생성했으며, 데이터와 문자열 템플릿을 매핑하여 렌더링 할 수 있게 구현했다. 상기 내용에서 app 인스턴스에 message 값을 변경하는 것으로 뷰 내용까지 한 번에 수정할 수 있다.

app.message = 'Bye Vue!';

엘레멘트 속성 바인딩

<div id="app-2">
    <span v-bind:title="message">
        내 위에 잠시 마우스를 올리면 동적으로 바인딩된 title을 볼 수 있습니다!
    </span>
</div>

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
    }
});

조건문과 반복문

엘레먼트의 존재 여부 토글은 v-if 디렉티브를 통해 가능하다.

<div id="app-3">
    <p v-if="seen">던질까말까던질까말까</p>
</div>

var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: true
    }
});

List 형식의 데이터를 반복적인 엘레멘트로 표현하고자 할때는 v-for 디렉티브를 통해 표현할 수 있다.

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            
            {{ todo.text }}
            
        </li>
    </ol>
</div>

var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            { text: 'todo list 1'},
            { text: 'todo list 2'},
            { text: 'todo list 3'}
        ]
    }
});

위와 같은 경우에 새로운 데이터는 app4.todos.push({ text: ‘New item’}) 의 방식으로 입력할 수 있다.

사용자 입력 핸들링

사용자 입력에 대한 이벤트 발생은 v-on 디렉티브를 통해 제어할 수 있다.

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">메시지 뒤집기</div>
</div>

var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello! Vue.js!'
    },
    method: {
        reverseMessage: function() {
            this.message = this.message.split(''),reverse().join('')
        }
    }
});

Share on: