Posted Updated  minkuen Vue.js6 minutes read (About 900 words)

Vue.js 기초 개념

[인프런 강의] Vue.js 시작하기 - Age of Vue.js

Vue는 무엇인가?

  • View = HTML. 브라우저에서 사용자에게 보여지는 요소들 (버튼, 입력 창 등)
  • DOM = HTML 은 DOM을 이용해 JAVA Script로 조작할 수 있게 구성된다.
  • Vue
    • DOM Listneners = View 의 이벤트를 청취하여 JavaScript의 데이터를 바꿔주거나 특정 로직을 실행한다
    • Data Biindings = JavaScript에서 관련 로직을 실행하고 View에 반영한다

Untitled

실습1

  • 폴더 생성

  • 파일 생성 : web-dev.html

  • 기본 코드 생성 : ! + TAB

  • 패널 토글 : *Ctrl + *

  • 쉽게 작성 예시 : div#app 입력한 후에 Enter

  • console.log 가 div 태그의 정보를 받아와서 출력한다

1
2
3
4
5
6
7
8
9
10
11
<div id="app"></div>

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

			str = 'hello world!!!';  // 여기까지만 작성하면 !!!는 반영되지 않는다
      div.innerHTML = str;
  </script>
  • 서버 실행
  • F12
  • Console 칸에서 결과 확인

Untitled

실습2

1
2
3
4
Object.defineProperty(대상 객체, 객체의 속성, {

            
        })
  • 사용 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app"></div>

    <script>
      var div = document.querySelector('#app');
      var viewModel = {};

      Object.defineProperty(viewModel, 'str', {
            // 속성에 접글했을 때의 동작을 정의
            get: function(){
                console.log('접근');

            },
            // 속성에 값을 할당했을 때의 동작을 정의
            set: function(newValue){
                console.log('할당', newValue); 

            }

          })
    </script>
  • 결과

Untitled

  • set:function 수정
1
2
3
4
5
// 속성에 값을 할당했을 때의 동작을 정의
  set: function(newValue){
      console.log('할당', newValue); 
      **div.innerHTML = newValue;**
  }
  • 결과
  • 실행 결과 곧바로 화면에 반영!
  • data binding
    • = Re Activity 특성

Untitled

  • 위에서 작성한 코드를 함수에 담는다
  • 그 함수를 즉시 실행 함수 문법에 담는다 : (function() { … } )();
  • div.innerHTML = newValue; 부분을 render(newValue)로 대체한다
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
(function() {
            function init() {

                Object.defineProperty(viewModel, 'str', {
                    // 속성에 접글했을 때의 동작을 정의
                    get: function () {
                        console.log('접근');

                    },
                    // 속성에 값을 할당했을 때의 동작을 정의
                    set: function (newValue) {
                        console.log('할당', newValue);
                        // div.innerHTML = newValue;
                        **render(newValue);**
                    }
                });
            }

            function **render**(value) {
                div.innerHTML = value;
            }

            init();

        })();
  • 결과

Untitled

Vue 개발자 도구 사용법

  • getting-started → index.html
  • vue.js 스크립트를 들고 와서 실행하는 간단한 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting Started</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>

  • 라이브 서버 실행

  • Vue 개발자 도구 확인

    • Vue → Components

    Untitled

  • data 변경 가능

    • 화면에 반영된다

Untitled

Slot

랜더링(Rendering)

  • 읽어들인 코드를 웹 표준에 맞게, 화면에 적절히 그려내는 중요 구성요소
  • 즉, HTML, CSS, JS 등을 통해 만든 페이지가 브라우저에서 보여지게 되는 것
  • https://velog.io/@plum3526/랜더링Rendering

Vue.js 기초 개념

https://kmk3593.github.io/2023/04/18/vue_concept/

Author

minkuen

Posted on

2023-04-18

Updated on

2023-04-18

Licensed under

#
You need to set install_url to use ShareThis. Please set it in _config.yml.

Like this article? Support the author with

You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.

Comments

You forgot to set the shortname for Disqus. Please set it in _config.yml.
Follow

Links

Categories

Recents

Archives

Tags

HTML6
JPA11
JPA 기초11
Java9
JavaScript1
NiFi1
Notion4
PL/SQL4
R2
R Markdown1
VScord1
Vue.js7
Vue.js 기초7
airflow4
anaconda1
apache1
chatbot5
crawling4
elasticsearch1
git1
github blog1
heroku4
javascript10
kakao_chatbot5
kibana1
machine learning22
oracle15
pipeline1
postgreSQL5
python30
setting14
spark7
wsl21
생활코딩1

Subscribe for updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

follow.it

×