Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
관리 메뉴

나만의공간

Vue 알아보기 #3 본문

IT/Vue

Vue 알아보기 #3

밥알이 2023. 3. 20. 08:47

Vue 강의 세번째 입니다.
Vue 알아보기를 위해 강의 들은 내용을 기준으로 정리를 한 내용입니다.
기초강의 내용이며, Vue 알아보기 #1에 이야기 드린 강의 내용을 정리 하고 있습니다.

Vue는 무엇인가?

Vue 기본문서에 나와있는 Vue개념에 대한 이미지 입니다.
vuejs.org에서 찾아봐도 안보여 강의에 있는 이미지를 활용했네여
View : Dom객체(HTML)파일에 해당됩니다.
ViewModel: 우리가 사용할 Vue F/W이 되겠네여
Model: BackEnd API에서 전달된 데이타가 들어 있는 곳입니다.

Vue가 적용된 간단한 코드

우선 Visual Studio(이하 VS Code)에 Auto Close Tag라는 PlugIn을 설치해 주세요.
Auto Close Tag를 설치 하게 되며, HTML Tag에 대해 태그가 끝날때 마다 자동으로 닫히게 됩니다.
HTML 파일 Vue에 대한 간단한 코드들을 만들어 보면서 Vue에 개념을 익히도록 하겠습니다.
우선 HTML에 기본 스타일을 만들어야 하는 VS Code에 앞단에서 설명드린 PlugIn이 설치가 되어 있으면 아래 기능을 이용하면 금방 기본 형태를 만들 수 있습니다.

vue1.html 파일을 만든 후 !만 입력 후 엔터를 누르면 html파일에 기본구성이 자동으로 나옵니다.
Ghat-GPT도 나오고 하니 이제 이런 기능은 신기하지도 않네여 ㅎ

HTML 기본 포멧을 제가 타이핑 않해도 빠르게 만들어 줍니다.

추가로 자동 생성을 할수 있는 기능이 있습니다.

div#app
위와 같이 입력을 하고 Enter를 누르면 div tag에 기본 모양이 자동으로 만들어 집니다.

아래 모양으로 자동 변경이 짜잔 하고 됩니다.
<div id="app"></div>

아래 HTML코드를 입력하고 Live Server를 실행합니다.
Live Server는 Vue 알아보기 #2 강의 내용에 작성되어 있습니다.
대상 파일에서 마우스 오른쪽 버튼을 누른후 Open With Live Server를 선택하면 실행이 됩니다.
Open With Live Server는 별도 서버를 만들필요 없이 HTML/Vue 파일을 바로 실행해서 볼 수 있는 기능을 제공하는 PlugIn입니다.

이제 아래 소스코드에 대해서 설명을 드리고 다음내용으로 넘어가겠습니다.

<!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"></div>

    <script>
        var div = document.querySelector('#app');
        var str = 'hello world';

        div.innerHTML = str;

        str = 'hello world~~~~';
        div.innerHTML = str;

    </script>
</body>
</html>

div 객체에 값을 변경하는 일반적인 JS 방법입니다.
innerHTML을 이용하여 최초 'hello world' 값을 넣었지만 바로 해당 변수에 값을 변경해서 'hello world~~~'로 변경해서 출력하고 있습니다. 객체에 값을 변경하는 일반적인 방법을 vue로는 어떡해 표현을 할지 알아 보겠습니다.

'IT > Vue' 카테고리의 다른 글

Vue 알아보기 #2  (0) 2023.01.27
Vue 알아보기 #1  (0) 2023.01.26
'IT/Vue' Related Articles more
Comments