개발자 '쑥말고인절미'

[Vue.js] Vue.js Tutorial: Hello world in Vue👋 본문

STUDY/Vue.js & Express.js & JS

[Vue.js] Vue.js Tutorial: Hello world in Vue👋

쑥말고인절미 2022. 4. 1. 11:35

첫 튜토리얼 소스는 아래와 같이 index.css, index.html, index.js 로 되어 있다.

<!--index.css-->
html, body {
    margin: 5px;
    padding: 0;
}
<!--index.html-->
<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
        <div id="app"><!--js의 app과 연결되는 부분-->
            {{ message }}<!--js의 data안에 message와 연결되는 부분. {{ }} 이게 템플릿이다.-->
        </div>
        
        <script src="index.js"></script>
    </body>
</html>​
<!--index.js-->
var app = new Vue({ 
    el: '#app', <!--여기 적힌 app이 html에 적힌 div id와 연결된다-->
    data: {
        message: 'testing~~~~!'<!--최종적으로 이 부분이 출력된다. index.html에 div안에 보면 {{message}}에 들어가는 내용이다.-->
    }
});

 app.message = 'changed message blabla' <!--message를 이렇게 넣어주면 위에 있는 message가 아니고 이 메세지로 출력된다.-->

처음으로 Vue.js를 써보는 건데 음 지금 첫번째 튜토리얼에서 배운건

1. js파일에서 Vue를 생성하고 그 안에서 작동한다. 그리고 Vue안에 el과 data를 선언하는데

2. el은 html파일의 div영역 id와 연결된다는 것이고,

3. data는 html파일의 div영역 안에 {{ }} 부분과 연결된다는 것이다.

'STUDY > Vue.js & Express.js & JS' 카테고리의 다른 글

[에러]Client does not support authentication protocol requested by server; consider upgrading MySQL client  (0) 2022.06.08
[vue.js]npm run serve 멈춤현상  (0) 2022.06.07
[Vue&Express] Vue와 Express 시작하기  (0) 2022.04.28
[Node.js] CORS 해결 참고 링크  (0) 2022.04.27
[Vue.js] Vue.js Tutorial: Conditionals in Vue  (0) 2022.04.01
'STUDY/Vue.js & Express.js & JS' Related Articles more