티스토리 뷰

개발 노트

[vue.js] 데이터 렌더링 하기

2020. 3. 10. 16:46

 

아주 간단한 예제로 데이터가 어떻게 렌더링 되는지 알아보자.

 

 

The Vue Instance - Intro to Vue.js | Vue Mastery

This lesson covers how to get your data from your JavaScript to show up in your HTML.

www.vuemastery.com

 

영상을 따라 하면 아래와 같다.

<!DOCTYPE html>
<html>
    <head>
        <title>App</title>
    </head>
    <body>
        <div id="app">
            <h1>{{ product }}</h1>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="main.js"></script>
    </body>
</html>
var app = new Vue({
    el: '#app',
    data: {
        product: 'Socks'
    }
})

Vue 인스턴스 생성 시 data 옵션에 product 값을 넣어주고 html에서 {{}} 문자열 안에 동일한 이름으로 넣으면 자동으로 렌더링 된다.

 

 

영상 마지막에 있는 도전과제를 풀어본 답은 아래와 같다.

<!DOCTYPE html>
<html>
    <head>
        <title>App</title>
    </head>
    <body>
        <div id="app">
            <h1>{{ product }}</h1>
            <p>{{ description }}</p>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="main.js"></script>
    </body>
</html>
var app = new Vue({
    el: '#app',
    data: {
        product: 'Socks',
        description: 'A pair of warm, fuzzy socks'
    }
})
댓글