시나브로

[Vue.js 기초] hello world 출력하기 본문

web/Vue.js

[Vue.js 기초] hello world 출력하기

혬혬 2020. 8. 25. 09:59
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기본적인 vue 문법</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--vue-->


    
<!--기본적인 vue 문법-->
</head>
<body>
    
    <div id="app">
        {{msg}}
    </div>

    <script>
        const app=new Vue({
            el:"#app",
            data(){
                return{
                    msg:"helloworld"
                }
            }
        });
    </script>

</body>
</html>

 

 

title 밑의 script문은 vue를 사용하기 위해 추가해줘야된다.

위와 같이 사용을 한다면, 인터넷을 통해 vue 파일들을 가져온다는 말이다. 이 방법말고도 다운을 받아도 좋지만, 편한기 때문에 이 방법을 추천한다. 

{{msg}} 이렇게 중괄호를 두번쓰고 변수를 사용하면 자바스크립트의 변수를 사용할 수 있게 된다. 

 

그렇기에 이를 활용하면 {{msg}} 대신에 msg 값인 "helloworld"가 나타나게 된다. 

 

위의 코드는 가장 기본적인 틀이니 숙지하는 것이 좋다. 

 

 

 

728x90
저작자표시 비영리 동일조건

'web > Vue.js' 카테고리의 다른 글

[ vue.js ] 구현 : 리스트 중 하나를 선택하면 버튼을 활성화 시키자  (0) 2021.02.15
[ Vue.js ] 오류 : v-if, v-show에서 변경 값 인식 안됨  (0) 2021.02.15
[Vue.js 기초] 버튼 클릭 시, text 변경  (0) 2020.08.25
'web/Vue.js' Related Articles more
Comments