Vue.js

[Vue.js] Vue.js 기초 배우기

네모세모동동 2025. 1. 9. 12:56

Vue.js 시작하기

Vue.js를 사용하기 위해서는 vue.js 라이브러리를 추가해준다.

 

https://v2.ko.vuejs.org/v2/guide/

 

시작하기 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

v2.ko.vuejs.org

<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

 

 

기본 인스턴스 생성하기

<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: "hello",
            },
        });
    </script>
</body>

 

[실행결과]

 

✏️ id가 app이 아닌 div 구조 안에서는 설정해놓은 data나 methods를 사용할 수 없다.

<body>
    <div id="app">
        {{ greeting.message }} {{ greeting.discription }}
    </div>
    <div>{{ greeting.message }}</div>
    <script>
        new Vue({
            el: "#app",
            data: {
                greeting: {
                    message: "hello!",
                    discription: 'Vue 페이지 연습 중 입니다><',
                },
            },
        });
    </script>
</body>

 

[실행결과]

 

🌈 오늘도 공부 성공! 🤓

 

[출처]