Vue.js개요, 인스턴스, 디렉티브

728x90

1) Vue2와 Vue3..?

Vue.js - The Progressive JavaScript Framework | Vue.js

Versatile A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework.

vuejs.org

2020년 9월 Vue3가 정식 릴리즈 되고 나서도 Vue2에서 Vue3로 사용자들이 자연스럽게 넘어갈 수 있도록 꽤 오랜 기간 vuejs.org에서 Vue2를 기존 공식 문서로 유지해 왔다. 그러다가 사람들이 하도 3으로 안 넘어가니까 2022년 2월 공식문서 버전이 Vue3가 되었다. 그렇다고 해서 Vue2를 보지 못하는 건 아니고 다른 주소를 통해 접근 가능하다.

Vue2버전 공식문서: https://v2.vuejs.org/v2/guide/

Introduction — Vue.js

Vue.js - The Progressive JavaScript Framework

v2.vuejs.org

심지어 [translate-한국어]로 설정하면 한국어로 볼 수 있음. Vue 책 사지 말고 공식문서 보고 하기!

Vue3버전 공식문서: https://vuejs.org/guide/introduction.html

Introduction | Vue.js

vuejs.org

2) 어쩌다가 Vue를 만들었을까?

Google의 Angular, FaceBook의 React 둘이 양대산맥인데, Angular가 무거워 React가 대중적이었다. Evan You는 가벼운 걸 만들어보고 싶다는 생각에 개인 프로젝트로 Vue를 만들게 됨(ㄷㄷ)

3) MVVM pattern

Model + View + ViewModel
View : 웹페이지의DOM(HTML)
ViewModel : Vue의 역할(View와 Model을 연결해주는 역할)
기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 library 이용. Vue는 view와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함
Model : 순수 자바스크립트 객체(옛날 JS≒바닐라스크립트≒로직만 처리하는)

4) MVC VS MVVM

View: 보이는 것
ViewModel: js클래스로 구성되며 주시하고 있다가 View와 Model을 연결해주는 역할. Model의 데이터를 잘 가공해서 View에서 뿌리기 쉬운 Model로 바꾸는 역할
Model: 데이터 소스 역할

이전처럼 페이지 이동이 아니라 모듈로 화면의 일부분만 바뀌게 함

5) chrom웹스토어에 Vue.js devtools 추가

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ko

Vue.js devtools

Browser DevTools extension for debugging Vue.js applications.

chrome.google.com

개발자 도구에 보면 vue탭이 생김

6) Vue설치방법과 일단 따라 하기

- Vue.js 설치 방법(CDN, NPM, CLI): 이 중 CDN 방식 사용

<!-- 개발버전, 도움되는 콘솔 경고를 포함 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

(Node.js 사용할 때 vue-cli로 할 거임. 아직 익숙지 않아서 CND방식을 사용하는 거임)

- 전체 코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{message}}</h2>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: "안녕",
            }
        });
    </script>
</body>

</html>

개발자 도구를 열어 message의 내용을 바로 바꿀 수 있다. vue내부적으로 ajax가 있는 격임(반응형)

7) Vue Instance 구성

script안에 vue객체를 생성하는데, 객체는 내부적으로 속성을 가지고 있다.

수많은 속성 중에 el과 data가 대표적인데 el은 어떤 DOM과 연결할지 알려주는 이름 같은 거다. DOM(view)과 Model을 연결해주는 역할이 vue였으니까..ㅎ

data는 변수라고 생각하면 쉽다. 하지만, data의 경우 변수보다 함수처럼 사용하길 권장. 왜? 변수처럼 사용하면 값을 못 읽는 경우 발생!!

<script>
        new Vue({
            el: "#app",
            // data: {
            //     message: "안녕",
            // }
            data() {
                return {
                    message: "안녕"
                }
            }
        });
    </script>

속성	설명
el	Vue가 적용될 요소 지정, CSS Selector or HTML Element, 주로 '#이름' 형태로 많이씀
data	Vue에서 사용되는 정보저장, 객체 또는 함수(권장)의 형태
template	화면에 표시할 HTML, CSS등의 마크업 요소를 정의하는 속성, 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
methods	화면 로직 제어와 관계된 method를 정의하는 속성, 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와화면 동작과 관련된 로직을 추가
created	뷰 인스턴스가 생성되자 마자 실행할 로직을정의(Life Cycle Hook)

8) Vue Instance 유효 범위

el속성과 밀접한 관련이 있는데, el이름과 같은 곳에서만 적용된다는 의미

[유효 범위를 벗어난 경우]

9) Vue Instance의 Life - Cycle

라이프사이클을 크게 나누면 instance생성, 생성된 객체를 화면에 부착, 화면에 부착된 객체의 내용을 갱신, 객체를 제거하는 소멸의 4단계를 거친다.

new vue()에서 DOM과 연결x, 고로 created에서도 연결이 안 되어 있다.

vue에서 사용할 수 있게 함수나 html을 바꾸면 beforeMount가 호출됨.

mounted 함수가 호출되면 비로소 vue와 DOM이 연결. 여기까지가 우리 눈에 보이는 시점

data()의 부분을 바꾸는 순간에 beforeUpdate가 생성되고 화면에 바뀌어지는 순간 updated가 생성

beforeCreate	Vue Instance가 생성되고 각 정보의 설정 전에 호출, DOM과 같은 화면요소에 접근 불가
created★★★★★	Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출, Instance가 화면에 부착하기 전이기때문에 template 속성에 정의된 DOM 요소는 접근 불가, 서버에 데이터를 요청(http 통신)하여 받아오는 로직을 수행하기 좋다.
beforeMount	마운트가 시작되기 전에 호출
mounted	지정된 element에 Vue Instance 데이터가 마운트 된 후에 호출, template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직 수행
beforeUpdate	데이터가 변경될 때 virtual DOM이 랜더링, 패치 되기 전에 호출
updated★★★★★	Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가
beforeDestroy	Vue Instance가 제거되기 전에 호출
destroyed	Vue Instance가 제거된 후에 호출

created와 updated가 중요한데, 비동기 통신에서 데이터를 얻어올 때 객체를 연결하기 전에 데이터를 얻어와서 갱신해야 하므로!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>클릭카운트: {{count}}</h2>
        <button @click="count++">클릭</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    count: 0
                }
            },
            beforeCreate() {
                console.log("beforeCreate!");
                console.log("beforeCreate!" + this.count);
            },
            created() {
                console.log("created!");
                console.log("created!" + this.count);
            },
            beforeMounted() {
                console.log("beforeMounted!");
                console.log("beforeMounted!" + this.count);

            },
            mounted() {
                console.log("mounted!");
                console.log("mounted!" + this.count);
            },
            updated() {
                console.log("updated!");
                console.log("updated!" + this.count);
            },
            destroyed() {
                console.log("destroyed!" + this.count);

            },
        });
    </script>
</body>

</html>

10) 보간법(Interpolation)

데이터 바인딩의 가장 기본 형태는 “Mustache” 구문(이중 중괄호)을 사용한 텍스트 보간
{{ 속성명 }}

11) 디렉티브(Directives)

디렉티브는 v- 접두사가 있는 특수 속성
디렉티브 속성 값은 단일 JavaScript 표현식이 된다(v-for는 예외)
디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용

📌 v-once

: v-once 디렉티브를 사용하여 데이터 변경 시 업데이트되지 않는 일회성 보간을 수행(개발자 모드에서 바꿔도 바꿔지지 않음)

<h2 v-once> {{vonce}}</h2>

📌 v-text(일반 {{}}이거처럼 텍스트로 나옴)

<h2 v-text="vtext"></h2>

📌 v-html(비추)

<h2 v-html="vhtml"></h2>

📌JavaScript 표현식의 모든 기능을 지원

<h2> {{count?'yes':'no'}}</h2>
<h2> {{message.split('').reverse().join()}}</h2>

단, 단일 표현식만 포함될 수 있으므로 구문은 안된다.

📌 v-model

:양방향 바인딩 처리를 위해서 사용 (form의 input, textarea)

<body>
    <div id="app">
        <input type="text" name="" id="" v-model="message">
        <div>{{message}}</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    message: "안녕"
                }
            },
        });
    </script>
</body>

📌 v-bind

:엘리먼트의 속성과 바인딩 처리를 위해서 사용, v-bind는 약어로 “ : ”로사용 가능, id의 속성 값으로 보여주기 위함

<body>
    <div id="app">
        <div v-bind:id="valueId">메시지</div>
        <button v-bind:id="btnId"></button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    valueId: 'test-id',
                    key: "id",
                    btnId: "btn"
                }
            },
        });
    </script>
</body>

💡단, 다른 속성의 '값'으로 '속성 이름'으로 쓰고 싶을 땐 대괄호([])쓰기

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        #btn {
            width: 200px;
            background-color: blueviolet;
        }

        .btn {
            width: 200px;
            background-color: rgb(245, 77, 161);
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:id="valueId">메시지</div>
        <button v-bind:[key]="btnId">버튼</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    valueId: 'test-id',
                    key: "class",//or "id"
                    btnId: "btn"
                }
            },
        });
    </script>
</body>

💡url이동 방법

<body>
    <div id="app">
        <a :href="url1">페이지로이동</a>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    valueId: 'test-id',
                    key: "class",//or "id"
                    btnId: "btn",
                    url1: "https://www.naver.com",
                }
            },
        });
    </script>
</body>

📌 v-show

: 조건에 따라 엘리먼트를 화면에 렌더링, 화면에 렌더링은 되지만 화면엔 보이지 않음

div의 style에 보면 false일 경우 display:none으로 되어 있음

<body>
    <div id="app">
        <h2>v-show</h2>
        <div v-show="isShow">{{msg}}</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    msg: "안녕하세요!",
                    isShow: false,
                }
            },
        });
    </script>
</body>

이벤트 처리했을 때 v-show

<body>
    <div id="app">
        <h2>v-show</h2>
        <div v-show="isShow">{{msg}}</div>
        <button @click="isShow = !isShow">클릭</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    msg: "안녕하세요!",
                    isShow: true,
                }
            },
        });
    </script>
</body>

📌 v-if, v-else-if, v-else

: 조건에 따라 엘리먼트를 화면에 렌더링, else의 경우 아무것도 작성x, 값이 반영되려면 v-model로 연결

<body>
    <div id="app">
        <label for="">나이</label>
        <input type="number" v-model="age">
        <br />
        <label>요금: </label>
        <div v-if="age<10">무료</div>
        <div v-else-if="age<20">7000원</div>
        <div v-else-if="age<65">10000원</div>
        <div v-else>3000원</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    age: 0,
                }
            },
        });
    </script>
</body>

📌 v-show VS v-if의 차이점

	v-if	v-show
렌더링	false일 경우 X	항상 O
false일 경우	엘리먼트 삭제	display:none 적용
template 지원	O	X
v-else 지원	O	X

📌v-for★★★

: 서버에서 json을 얻어오면 js로 json을 리스트로 만들어서 for문을 돌려서 했는데!! 그걸 쉽게 가능하게 함, 배열이나 객체의 반복에 사용, v -for=“요소변수이름 in 배열“ v -for=“(요소변수이름, 인덱스) in 배열＂

<body>
    <div id="app">
        <h2>단순for문</h2>
        <div v-for="i in 5" :key="index">{{i}}번</div>
        <h2>객체반복</h2>
        <div v-for="value in student" :key="value.id">{{value}}</div>
        <h2>배열반복</h2>
        <div v-for="(area, index) in areas" :key="index">{{index}}. {{area}}</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    student: {
                        name: "모두의 향연",
                        age: 100,
                    },
                    areas: ["서울", "대전", "대구", "부산"],
                }
            },
            created() {
                //ajax로 데이터 불러옴->그 데이터를 배열을 만들어서 넣음->그걸 화면에 뿌림
            }
        });
    </script>
</body>

- 배열의 각 객체의 내용을 출력하기

<body>
    <div id="app">
        <h2>배열 각 객체의 내용 출력</h2>
        <ul>
            <li v-for="(team, index) in teams" :key="team.area">번호:{{index}}, 지역: {{team.area}} {{team.count}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    teams: [
                        {
                            area: "서울",
                            count: 11,
                        },
                        {
                            area: "대전",
                            count: 2,
                        },
                        {
                            area: "대구",
                            count: 33,
                        },
                        {
                            area: "부산",
                            count: 44,
                        },
                        {
                            area: "광주",
                            count: 55,
                        },
                    ]
                }
            },
        });
    </script>
</body>

-v-if와 v-for을 동시에 사용하지 마세요

왜? 속도가 떨어져서,, for문으로 전체를 뿌린 다음에 조건문으로 걸러내는 역할을 함(vue2에선 오래 걸리더라도 실행은 됨)

Vue3에선 순서를 고정시켰는데, Vue2에선 if보다 for문이 앞선다.

<body>
    <div id="app">
        <label for="countNum">카운트 수</label>
        <input type="text" name="" id="countNum" v-model.number="cnt">
        <h2>배열 각 객체의 내용 출력</h2>
        <ul>
            <li v-for="(team, index) in teams" :key="team.area" v-if="team.count===cnt">번호:{{index+1}}, 지역:
                {{team.area}}
                {{team.count}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    cnt: 0,
                    teams: [
                        {
                            area: "서울",
                            count: 1,
                        },
                        {
                            area: "대전",
                            count: 2,
                        },
                        {
                            area: "대구",
                            count: 3,
                        },
                        {
                            area: "부산",
                            count: 4,
                        },
                        {
                            area: "광주",
                            count: 5,
                        },
                    ]
                }
            },
        });
    </script>
</body>

📌template

: 여러 개의 태그들을 묶어서 처리해야 할 경우 template를 사용, v-if, v-for, component 등과 함께 많이 사용

📌v-cloak

:Vue Instance가 준비될 때까지 mustache 바인딩을 숨기는 데 사용

<body>
    <div id="app">
        <div v-cloak>잠깐 기다려보세요! {{msg}}</div>
    </div>
    <script>
        setTimeout(() => {
            new Vue({
                el: "#app",
                data() {
                    return {
                        msg: "짜잔!",
                    }
                },
            });
        }, 3000);
    </script>
</body>

728x90

저작자표시 비영리 변경금지

'front-end > Vue.js' 카테고리의 다른 글

Vue.js 이벤트 (0)	2022.07.08
Vue.js 인스턴스 속성(methods, filter, computed, watch) (0)	2022.07.07
map마커 만들기 (0)	2022.05.24
vue Bootstrap설정하기 (0)	2022.05.13
Nodejs/NPM/SFC/CLI (0)	2022.05.12

모두의향연

Vue.js개요, 인스턴스, 디렉티브

1) Vue2와 Vue3..?

2) 어쩌다가 Vue를 만들었을까?

3) MVVM pattern

4) MVC VS MVVM

5) chrom웹스토어에 Vue.js devtools 추가

6) Vue설치방법과 일단 따라 하기

7) Vue Instance 구성

8) Vue Instance 유효 범위

9) Vue Instance의 Life - Cycle

10) 보간법(Interpolation)

11) 디렉티브(Directives)

'front-end > Vue.js' 카테고리의 다른 글

티스토리툴바

Vue.js개요, 인스턴스, 디렉티브

1) Vue2와 Vue3..?

2) 어쩌다가 Vue를 만들었을까?

3) MVVM pattern

4) MVC VS MVVM

5) chrom웹스토어에 Vue.js devtools 추가

6) Vue설치방법과 일단 따라 하기

7) Vue Instance 구성

8) Vue Instance 유효 범위

9) Vue Instance의 Life - Cycle

10) 보간법(Interpolation)

11) 디렉티브(Directives)

'front-end > Vue.js' 카테고리의 다른 글

관련글

티스토리툴바