Miracle Morning, LHWN

첫 번째 수업. 210220 본문

IT 기술/[Vue] 개발자 강의

첫 번째 수업. 210220

Lee Hye Won 2021. 6. 2. 15:18

# Vue..js Project 초기 설정 과정

​

1. Project Folder를 생성한다.

2. Project Folder/index.html 파일을 생성한 후,

vue.js 라이브러리를 CDN 형식으르 Loading 해주어야 하는데 안정적으로 구현하기 위해 아예 라이브러리로 저장해서 Loading 하자

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

 

3. Project Folder/vue/lib 경로에 vue.js 파일을 생성하여 위 js 파일을 저장해놓고, index.html 에서 Loading 해주면 된다.

이 라이브러리가 정상적으로 로딩되었다면 아래에서 소개하는 Vue.js devtools Plugin이 실행될 것이다.

​

# Vue.js 개발자 도구 (Chrome Plugin) "Vue.js devtools"

Vue.js로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있는 확장 프로그램이다. 각 컴포넌트별로 정의된 속성의 변화를 실시간으로 확인할 수 있어 매우 유용하다.

​

웹이 Vue.js로 만들어졌는지 자동으로 판단해주는데, [Chrome > 개발자 도구] Tab에서 확인할 수 있다.

<Root> : 최상위 컴포넌트

우측 data > msg, txt : 최상위 컴포넌트의 상세 내용

​

Vuex : 뷰엑스 속성 확인

Events : 특정 시간 동안에 발생한 이벤트 관찰

Refresh : 새로고침

 

 

이제 프로젝트를 생성하자. 작업 순서는 아래와 같다

​

1. HTML 파일 생성

→ 2. Vue.js 소스 코드 추가

→ 3. 브라우저로 실행

 

핵심은 Vue.js 인스턴스를 만들고, 인스턴스에 정의된 데이터 객체의 프로퍼티 (property) 를 화면에 출력하는 것

 

아래는 Vue.js 로 구현한 index.html 의 전문이다.

 

// index.html
<!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>vue.js Training</title>
    
    <script src="./vue/lib/vue.js"></script>
</head>
<body>
    <div id="wrap">
        <div id="app">
            <h1>JavaScript Framework, Vue.js</h1>
            <h2 v-on:click='changeData'>Bind() Vue Data Property<br>msg : "{{ msg }}", txt : "{{ txt }}" </h2>
        </div>

        <script>
            var obj = new Vue({
                el: '#app', 
                data: { 
                    msg: 'JavaScript Data',
                    txt: 'JavaScript Text',
                },
                methods: {
                    changeData: function() {
                        this.msg = '하이?';
                        this.txt = '하이?';
                    }
                }
            });
        </script>

        <style>
            #wrap {
                width: 1000px;
                margin: 0 auto;
                background: #f0f0f0;
                padding: 100px;
                border-radius: 20px;
            }

            #app {
                text-align: center;
            }

            h2 {
                color: navy;
                background: #ddd;
                border-radius: 20px;
                display: inline-flex;
                padding: 10px 20px;
                font-weight: normal;
            }

            h2:hover {
                background: rgb(224, 219, 219);
                box-shadow: 1px 2px 0 1px gray;
                cursor: pointer;
            }
        </style>
    </div>
</body>
</html>

 

1. View 영역 (DOM, Markup)

 

        <div id="app">
            <h1>JavaScript Framework, Vue.js</h1>
            <h2 v-on:click='changeData'>Bind() Vue Data Property<br>msg : "{{ msg }}", txt : "{{ txt }}" </h2>
        </div>

 

2. View Model 영역 (Script)

 

3. Model 영역 : data 부분이 Model 영역이다.

        <script>
            var obj = new Vue({
                el: '#app', 
                data: { 
                    msg: 'JavaScript Data',
                    txt: 'JavaScript Text',
                },
                methods: {
                    changeData: function() {
                        this.msg = '하이?';
                        this.txt = '하이?';
                    }
                }
            });
        </script>

 

 

 

 

하나 하나 뜯어보자!

 

        <div id="app">
            <h1>JavaScript Framework, Vue.js</h1>
            <h2 v-on:click='changeData'>Bind() Vue Data Property<br>msg : "{{ msg }}", txt : "{{ txt }}" </h2>
        </div>

# Vue Directive

(1) v-on : 이벤트 발생 시 실행시킬 메서드를 지정할 수 있다.

예를 들어, v-on:click='(메서드) 함수호출'으로 작성하면 된다. v-on은 @를 이용하여 축약할 수 있다. 예를 들어 @click='(메서드) 함수호출'

​

(2) v-bind : 데이터를 binding 할 수 있다. v-bind는 : 로 축약할 수 있다.

        <script>
            var obj = new Vue({
                el: '#app', 
                data: { 
                    msg: 'JavaScript Data',
                    txt: 'JavaScript Text',
                },
                methods: {
                    changeData: function() {
                        this.msg = '하이?';
                        this.txt = '하이?';
                    }
                }
            });
        </script>

 

위 코드에서 Vue는 생성자 방식으로 생성되어 obj 변수에 할당되어 있는 모습이다.

객체 형태로 작성하는데 el 은 Root element를 의미한다. (Chrome Vue 확장 도구에서 Root 의 이름으로 볼 수 있다.)

el: '#app'를 통해 id로 'app' 값을 가진 DOM에 Vue를 연결한다.

 

이때, data는 (1) 속성으로 쓰는 방식 (2) 메서드로 쓰는 방식 총 두 가지가 있다.

​

(1) 속성으로 쓰는 방식

data: { 
  msg: 'JavaScript Data',
  txt: 'JavaScript Text',
},

 

(2) 메서드로 쓰는 방식

- 반드시 return { 속성(property): 값(value) } 의 형태로 작성해주어야 한다. > ECMA5 방식!

data: function() {
  return {
    msg: 'MVVM Pattern',
    txt: 'MVVM Text',
  }
}

※ ECMA6에서는 data() { ... } 이러한 형태로 작성한다.

​

여기서 또 꿀팁!

프로젝트의 규모가 커지면 아래와 같이 this를 임의 변수에 담아 사용하는 것이 좋다. this를 잃어버리는 경우가 생기기 때문

methods: {
  changeData: function() {
    var that = this;
    that.msg = 'Hello';
    that.txt = 'Hello';
  }
}
저작자표시

'IT 기술 > [Vue] 개발자 강의' 카테고리의 다른 글

세 번째 수업. 210227  (0) 2021.06.25
두 번째 수업. 210221  (0) 2021.06.02
두 번째 수업. 210221_궁금해서 찾아본 이것저것  (0) 2021.06.02
첫 번째 수업. 210220_궁금해서 찾아본 이것저것  (0) 2021.06.02
'IT 기술/[Vue] 개발자 강의' Related Articles more
Comments