Vue.js 소개와 기본 개념 이해하기

Vue.js는 직관적이고 유연한 프론트엔드 프레임워크로, 웹 애플리케이션의 사용자 인터페이스를 구축하는 데 사용됩니다. 이 글에서는 Vue.js의 기본 개념과 사용 방법을 소개하고, 간단한 예제를 통해 Vue.js의 동작 원리를 이해해보겠습니다.
 

Vue.js?

• Vue.js는 사용자 인터페이스를 구축하기 위한 직관적이고 유연한 프론트엔드 프레임워크입니다. 반응성이 뛰어나며, 간단한 문법과 다양한 기능을 제공하여 개발자들이 웹 애플리케이션을 쉽게 개발할 수 있도록 도와줍니다.

Vue.js의 기본 개념:

• 컴포넌트(Component): Vue.js 애플리케이션은 여러 개의 컴포넌트로 구성됩니다. 컴포넌트는 화면의 특정 부분을 나타내는 재사용 가능한 모듈입니다.
• 데이터 바인딩(Data Binding): Vue.js는 데이터와 화면 요소를 연결하여 데이터의 변화에 따라 화면이 자동으로 업데이트되도록 지원합니다.
• 디렉티브(Directive): Vue.js의 디렉티브는 HTML 요소에 특별한 속성을 추가하여 동적으로 DOM을 조작할 수 있게 해줍니다.

728x90

Vue.js 예제 코드:

• 다음은 간단한 Vue.js 예제 코드입니다.

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

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello, Vue.js!'
        }
    });
</script>

 

Vue.js 실습 예제:

• 다음은 Vue.js를 사용하여 간단한 할 일 목록을 만드는 예제입니다.

<div id="app">
    <input v-model="newTodo" @keyup.enter="addTodo">
    <ul>
        <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            newTodo: '',
            todos: [
                { id: 1, text: '할 일 1' },
                { id: 2, text: '할 일 2' },
                { id: 3, text: '할 일 3' }
            ]
        },
        methods: {
            addTodo: function() {
                this.todos.push({ id: this.todos.length + 1, text: this.newTodo });
                this.newTodo = '';
            }
        }
    });
</script>