[Vue.js] Vue.js 설치 및 기초

정재훈·2022년 3월 14일

vue.js

Vue.js

목록 보기

1/12

1) Vue.js 사용 이유 및 개념

사용 이유

웹페이지 기능이 많아짐에 따라 이벤트들이 증가되고 둠 조작량이 증가하였습니다.
이는 즉, 프론트앤드 개발자는 개발해야할 JS가 많아졌고, 근래에는 서버에 대한 지식까지 겸비를 해야합니다.

Front-end Framework를 사용하는 이유는 DOM제어의 변경과 Component 기반 웹 개발을 위함으로, Component(블록) 단위로 조립하는 것 처럼 웹페이지 UI를 개발하면 생산성과 가독성을 향상시킬 수 있습니다.

Vue.jS란?

Vue.js는 Front-end Framework의 한 종류로 Progressive JavaScript Framework입니다.

Vue.js 이전 Html 출력 원리

Browser가 HTML을 출력하는 원리/순서
1) HTML Parsing 하여 DOM Tree 생성
2) Render Tree 생성 – 각 DOM Tree의 Node에 Style 정보를 입힌다.
3) Layout 과정 – 각 Render Tree Node들의 출력 할 좌표가 계산되어 정해진다.
4) Painting – 이미지/Color를 입혀 출력을 준비하는 과정

일반적인 Html은 변경시 render tree부터 재시작하여 모든 DOM의 style 정보를 다시 입혀야 했기 때문에 브라우저 속도가 느리고 비효율적이다.

Virtual DOM을 이용한 Html 출력 원리

1) 기존 DOM Tree를 기반으로 Virtual DOM 생성한다.
2) Virtual DOM에 DOM 제어를 적용해본다.
3) 제어가 끝나면 기존 DOM Tree에 적용을 해본다.
4) 문제가 없다면 랜더링을 실행한다.

즉, 모든 DOM 제어 이후, 최종적으로 랜더링을 1번 수행한다. 이는 속도가 상승되는 효과와 엘리먼트(요소)가 많아지면 DOM을 다루기 어렵기 때문에, Virtual DOM을 사용하게 된다.

2) Vue.js 설치

설치 사이트
저는 Vue.js의 최신 버전인 3버전을 사용하지 않고 2버전을 사용합니다.
3버전은 아직 사용할 수 있는 라이브러리가 충분치 않기 때문에, 저는 2.6.14 버전을 사용할 것입니다.
CDN 파일을 복사 후 html에 붙여넣어 줍니다!

3) message 개념 및 Vue 기본 사용 코드

// body만 작성
<body>
    <!-- {{ }} : 데이터 바인딩(묶는다)을 위해 사용한다.  -->
    <!-- message를 변수로 사용하기 위해 -->
    <div id = "app">{{ message }}</div>  
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        // app이라는 인스턴스를 Vue라는 객체로 생성
        const app = new Vue({
            // id가 app인 것을 선택자로 사용
            el: "#app",
            // 변수들이 들어가는 속성
            data : {
                message : "Hello Vue!",
            },
        });
    </script>
</body>

결과

이를 Data Binding , 단방향 Binding이라 불린다.
Vue 인스턴스의 값을 수정하면, 즉시 {{ message }}에 값이 반영된다.
{{ }} 사용해서 태그 안에 들어갈 내용을 변수와 바인딩

4) v-on:click

v-on:click(@click 으로 축약 가능)은 클릭 이벤트로 콜백함수를 등록하여 사용할 수 있다.
vue.js를 사용하기 전인 javascript에서는 인라인 Onclick() 함수의 사용을 피하였습니다. 이는 JS와 Html을 분리 하려는 이유와 동적으로 생성되는 컴포넌트에 적용할 수 없었기 때문입니다.

하지만, v-on:click은 javascript가 내장되어 있으므로, 문제없이 여러 함수와 연결지어 사용할 수 있습니다. 특정 조건을 만족되어야 실행되는 함수인 Callback 함수와 같이 사용할 것입니다.

// body만 작성
<body>
    <!-- html 영역 -->
    <div id="app">
        <h1>{{ message }}</h1>
        <button v-on:click = "bbq">hey</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

    <!-- JS 영역 -->
    <script>
        const app = new Vue({
            el : "#app",
            data: {
                message : "Hello world",
                nextMessage : "Why so serious?"
            },
            // 객체는 키(:)와 value로 이루어져있음
            methods: {
                // callback 함수
                // bbq()  <- bbq : function()의 축약형
                bbq(){
                    this.message = this.nextMessage;
                },
            },
        });
    </script>
</body>

버튼 클릭 전	버튼 클릭 후

5) v-bind

v-bind 또한 단방향 Binding으로, v-bind 사용해서 애트리뷰트(속성)을 변수와 바인딩한다.
실행1 : value 속성을 변수와 바인딩

	//body만 작성
	<body>
  <!-- html 영역 -->
  <div id="app">
      <!-- input의 text.value attriubte에 접근 -->
      <!-- v-bind:value -> :value로 축약가능 -->
     <input type="text" v-bind:value = "message">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

  <!-- JS 영역 -->
  <script>
      const app = new Vue({
          el : "#app",
          data:{
              message : "vue.js에 온 것을 환영해!"
          },
         
      });
  </script>
</body>

실행2 : class 속성을 변수와 바인딩

<!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>

    <style>
        .colorBlue{
            color: blue;
        }
        .colorRed {
            color : red;
        }
    </style>

</head>
<body>
    <!-- html 영역 -->
    <div id="app">
        <!-- class 속성을 바인딩 -->
        <h1 v-bind:class="colorofHi">Hi</h1>
       <button v-on:click = "ChangeColor">컬러바꾸기</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

    <!-- JS 영역 -->
    <script>
        const app = new Vue({
            el : "#app",
            data:{
                colorofHi:"colorBlue",
            },
            methods: {
                ChangeColor(){
                    this.colorofHi = "colorRed"
                }
            }
        });
    </script>
</body>
</html>

결과1	결과2 버튼 클릭 전	결과2 버튼 클릭 후

6) v-model

v-model이란 유일한 양방향 Binding 문법이다.

<body>
  <!-- html 영역 -->
  <div id="app">
      <!-- v-model : 양방향 Data Binding -->
      <!-- 사용자가 입력을 하게되면 message 변수의 value 값이 변경된다. -->
      <input type="text" v-model = "message">
      <div>{{ message }}</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

  <!-- JS 영역 -->
  <script>
      const app = new Vue({
          el : "#app",
          data :{
              message: "",
          }
         
      });
  </script>
</body>