[FE] Vue.js

Ryong·2024년 3월 3일

FE

목록 보기

3/3

Vue.js는 사용자 인터페이스를 구축하기 위한 진보적인 프론트엔드 프레임워크로, 웹 애플리케이션의 동적이고 반응형 부분을 만들기 위해 사용된다. Vue.js는 단일 페이지 애플리케이션(SPA) 및 웹 애플리케이션의 일부를 개발하는 데 매우 효과적이며, 가볍고 유연한 구조로 빠르게 성장하고 있는 인기 있는 프레임워크 중 하나다.

기본 구조:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js Example</title>
    <!-- Vue.js CDN 추가 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

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

<script>
   // Vue 인스턴스 생성
    var app = new Vue({
        el: '#app', // 인스턴스가 적용될 HTML 요소 지정
        data: {
            message: 'Hello, Vue.js!'
        }
    });
</script>

</body>
</html>

주요 개념:

1. 디렉티브 (Directives):

Vue.js 디렉티브는 HTML 요소에 특별한 속성으로 표시되어, DOM 요소와 Vue 인스턴스를 연결하고 데이터를 렌더링하는 데 사용.
v-bind, v-model, v-for, v-if 등이 일반적인 디렉티브다.

2. 데이터 바인딩 (Data Binding):

Vue.js는 데이터와 DOM 요소를 연결하여 데이터의 변경 사항이 자동으로 반영되도록 한다. 이를 양방향 데이터 바인딩이라고 한다.

{{ }}를 사용한 콧수염 구문 또는 v-bind 디렉티브를 통해 데이터를 DOM에 바인딩할 수 있다.

텍스트 바인딩:

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

<script>
new Vue({
    el: '#app',
    data: {
        message: 'Vue.js is awesome!'
    }
});
</script>

속성 바인딩:

<div id="app">
<img v-bind:src="imageURL" alt="Vue Logo">
</div>

<script>
new Vue({
    el: '#app',
    data: {
        imageURL: 'https://vuejs.org/images/logo.png'
    }
});
</script>

이벤트 처리 (Event Handling):

Vue.js를 사용하여 DOM 이벤트를 처리하고 메서드를 호출할 수 있다. 이벤트 처리기는 Vue 인스턴스의 메서드로 정의된다.

v-on 디렉티브를 사용하여 이벤트를 바인딩하고, 해당 이벤트가 발생할 때 호출할 메서드를 지정한다.

<div id="app">
    <button v-on:click="sayHello">Click me</button>
</div>

<script>
    new Vue({
        el: '#app',
        methods: {
            sayHello: function() {
                alert('Hello, Vue!');
            }
        }
    });
</script>

조건문과 반복문:

Vue.js에서는 v-if, v-else-if, v-else, v-for 디렉티브를 사용하여 조건문과 반복문을 작성할 수 있다.
조건문:

<div id="app">
    <p v-if="isUserLoggedIn">Welcome, User!</p>
    <p v-else>Login to access the content.</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            isUserLoggedIn: false
        }
    });
</script>

반복문:

<div id="app">
    <ul>
        <li v-for="item in items">{{ item }}</li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            items: ['Apple', 'Banana', 'Orange']
        }
    });
</script>

컴포넌트 (Components):
- Vue.js에서 컴포넌트는 재사용 가능한 Vue 인스턴스. 각 컴포넌트는 자체적으로 관리되는 데이터와 메서드를 가질 수 있다.
- Vue.component()를 사용하여 전역적으로 등록하거나, 단일 파일 컴포넌트를 사용하여 지역적으로 정의할 수 있다.
```
<div id="app">
    <my-component></my-component>
</div>

<script>
    // 컴포넌트 정의
    Vue.component('my-component', {
        template: '<p>This is a custom component!</p>'
    });

    new Vue({
        el: '#app'
    });
</script>
```

라이프사이클 훅 (Lifecycle Hooks):

Vue 인스턴스 및 컴포넌트는 생성, 갱신, 소멸과 같은 특정 시점에 라이프사이클 훅을 실행할 수 있다. 이를 통해 애플리케이션의 동작을 제어할 수 있다.

new Vue({
    beforeCreate() {
        // 인스턴스가 생성되고 데이터 및 이벤트 초기화 전에 호출
    },
    created() {
        // 인스턴스가 생성된 후 데이터 및 이벤트 초기화가 완료된 시점에 호출
    },
    // ... (중략)
    destroyed() {
        // 인스턴스가 파괴된 후에 호출
    }
});

가상 DOM (Virtual DOM):

Vue.js는 가상 DOM을 사용하여 실제 DOM과 동기화하여 효율적으로 렌더링을 수행한다. 이를 통해 성능을 최적화하고 빠른 UI 업데이트를 가능하게 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Virtual DOM Example</title>
    <!-- Vue.js CDN 추가 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

    <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="updateMessage">Update Message</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            },
            methods: {
                updateMessage: function() {
                    // 가상 DOM을 사용하여 실제 DOM에 반영
                    this.message = 'Updated Message';
                }
            }
        });
    </script>

</body>
</html>

라우팅 (Routing):

Vue Router를 사용하여 단일 페이지 애플리케이션에서 라우팅 기능을 구현할 수 있다. 이를 통해 다중 페이지 애플리케이션처럼 동작하면서도 페이지 간의 전환을 부드럽게 처리할 수 있다. SPA에서 페이지 간의 이동 및 네비게이션을 관리할 수 있다.

<div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
</div>

<script>
    // Vue Router 설정
    const router = new VueRouter({
        routes: [
            { path: '/home', component: Home },
            { path: '/about', component: About }
        ]
    });

    // Vue 인스턴스 생성
    new Vue({
        el: '#app',
        router: router,
        components: {
            Home: { template: '<p>Home Page</p>' },
            About: { template: '<p>About Page</p>' }
        }
    });
</script>

REF)
https://ko.vuejs.org/guide/quick-start

Ryong

새로운 시작. 그리고 도약

이전 포스트

[FE] Vue.js

FE

기본 구조:

주요 개념:

1. 디렉티브 (Directives):

2. 데이터 바인딩 (Data Binding):

[FE] JavaScript

0개의 댓글