[Age of Vue] Vue.js 시작하기 - 4. 기존 웹 개발 방식(HTML, Javascript)

📕 Language/Vue

[Age of Vue] Vue.js 시작하기 - 4. 기존 웹 개발 방식(HTML, Javascript)

a n u e 2022. 4. 27. 22:16

- Auto Close Tag 플러그인 다운로드

- 기본 HTML 태그 셋팅

태그 빈 화면인 경우 바로 Tab + !

데이터가 있는 경우 ctrl + a (전체선택)하고 Tab + !

- 자동완성 div#app 기능 : <divid="app"></div>

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <div id="app">
        <!--hello world-->
    </div>
    
    <script>
        //제이쿼리 $('#app') 와 같다
        //div 태그의 정보를 가져와서 div라는 변수에 담을 수 있다.
        var div = document.querySelector('#app');
        var str = 'hello world';
        console.log(div); //<div id="app"></div>
        div.innerHTML = str;
        
        str = 'hello world 변경합니다'; //이렇게만 변경하면, 바뀐 데이터의 내용이 반영되지 않는다.
        div.innerHTML = str; //또 다시 대입을 해주어야만 변경 내용이 반영되어짐. 일반적 웹 개발 방식!
    </script>

    <!-- 
        HTML은 화면에 나타나는 태그, DOM의 정보를 넣는 것
        자바스크립트는 해당 태그나 DOM을 조작하는 것 
    -->
</body>
</html>

참고 !

1. VS code 한 줄 삭제 단축키는 ctrl + shift + k

2. open Live Serve : 변경사항이 새로고침 없이 바로 적용 가능하게 해주는 플러그인