Languages/Vue.js

[Vue.js]Vue.js 의 시작/hello vue.js 만들기

환테크 2021. 3. 11. 15:03
반응형

 

 

 

vue.js란?

 

프론트엔드 기술 중 하나이다.

한 페이지에서 모든 컨텐츠를 보여주는 웹사이트를 spa(single page application)

이럴 때 동적인 페이지를 쉽게 만들어주는 기술이다.

 

 

 

vue.js를 하기 위해선 visual studio code를 설치 해야한다

 

 

 

 

html소스를 이용하여 hello Vue.js!!! 만들어보기

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 알아보기</title>
</head>
<body>
    <div id = 'app'>
        {{ message  }}
        </div>
        <script> src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    message : 'Hello Vue.js!!'
                }
            })
            </script>
</body>
</html>

 

+point

Vue소스를 입력할 수 있는 

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

입력값을 입력해주어야 하는데 vue 홈페이지에서 소스를 가져올 수 있다.

 

 

 

vue.js link>>>>

kr.vuejs.org/v2/guide/index.html

 

시작하기 — Vue.js

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

kr.vuejs.org

 

후 서식 입력하기

new vue({vue 인스턴스 내용})
또는
var 변수명 = new ({vue 인스턴스 내용})

el: 어느 html 요소를 연결할 것인가
data: 어떤 데이터인가
method: 어떤 처리를 하는가
computed: 어떤 데이터를 사용하여 계산하는가
watch: 어는 데이터를 감시하는가

 

 

실행 결과

 

 

 

반응형