본문 바로가기
Vue/Vue 정리

< Vue 정리 >

by 마늘아빠 2021. 1. 6.
728x90
반응형

Vue.js

Evan You에 의해서 만들어짐

Vue 탄생은 Google에서 Angular로 개발하다가 가벼운 것을 만들어보고 싶어 시작

사용자 인터페이스를 만들기 위해 사용하는 오픈소스 Progressive Framework

Vuejs특징

접근성 유연성 고성능

MVVM 패턴

Model + View + ViewModel

Model : 순수 자바스크립트 객체

View : 웹페이지의 DOM

ViewModel : Vue의 역할

  • 기존에는 자바스크립트로 vuew에 해당하는 DOM에 접근/수정 하기 위해 JQuery와 같은 Library를 사용.
  • Vue는 View와 Model을 연결. 자동으로 바인딩. 양방향 통신이 가능

MVC

Controller - View - 화면 업데이트

- Model - Data갱신

MVVC

View → ViewModel → Model

View - ViewModel - Model

Vue의 생성자 만들기

  • Vue.js CDN
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 생성자 코드 (뷰 인스턴스)
    <div id="app">
        <h2>{{ msg }}</h2> // 머스티치. 콧수염 형식
    </div>
    <script>
          // Vue의 인스턴스
          new Vue({
            el: '#app', // element. id = app과 연결 바인딩
            data() {
              return {
                msg: 'Hello Vuejs',
              };
            },
          });
    </script>

Vue Instance 생성

속성

el : Vue가 적용될 요소 지정. CSS Selector or HTML Element

data : Vue에서 사용되는 정보 저장. 객체 또는 함수 형태

template : 화면에 표시할 HTML, CSS등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들을 화면에 그림

methods : 화면 로직 제어와 관계된 method를 정의하는 속성. 마으스 클릭 이벤트 처리와 같이 이벤트와 화면 동작과 관련된 로직 추가

created : 뷰 인스턴스가 생성되자 마자 실행할 로직 정의

인스턴스가 화면에 적용되는 과정

  1. CDN을 이용해서 뷰 라이브러리 파일 로딩
  1. 인스턴스 객체 생성 ( 옵션 속성 포함 )
  1. 특정 화면 요소에 인스턴스를 붙임 (바인딩 )
  1. 인스턴스 내용이 화면 요소로 변환
  1. 변환된 화면 요소를 사용자 최종 확인

Vue Instance Life Cycle

생성(Created), 부착(Mounted), 갱신(Updated) 소멸(Detroyed)의 4가지 단계로 나뉜다.

Created : Vue Instance가 생성 된 후 데이터들의 설정이 완료된 후 호출. Instance가 화면에 부착하기 전 template 속성에 정의된 DOM 요소 접근 불가.

Mounted : 지정된 Element에 Vue Instance 데이터가 마운트 된 후에 호출. template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직 수행

Updated : Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태. 데이터 변경 후 화면 요소 제어와 관련된 로직 추가.

  • Life Cycle Code
    <div id="app">
            <h2>{}</h2>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 'Life Cycle Hooks.'
                },
                beforeCreate() {
                    console.log('beforeCreate!!!');
                },
                created() {
                    console.log('created!!!');
                },
                mounted() {
                    console.log('mounted!!!');
                },
                updated() {
                    console.log('updated!!!');
                },
            });
        </script>

바인딩 된 후 데이터가 업데이트 된다면 updated 후만 실행된다.

Vue에서의 this

vue에서 this 키워드를 사용하면 vue객체의 인스턴스에 접근하겠다는 뜻이다.

보간법(Interpolation)

문자열

  • 데이터 바인딩의 가장 기본 형태는 "Mustache" 구문(이중 중괄호)을 사용한 텍스트 보간.
  • {{ 속성명 }}
  • v-once 디렉티브를 이용. 데이터 변경 시 업데이트 되지 않는 일회성 보간 수행
  • 예시 Code
    <div id="app">				
    	<span> 메시지 : {} </span>
    	<span v-once> 이후 변경 X : {} </span>
      <h2>{{ msg }}</h2>
      <h2 v-once>{{ msg }}</h2>
    </div>
    <script>
      new Vue({
          el: '#app',
          data(){
              return {
                  msg: 'Hello Vuejs'
              };
          }
      });
    </script>

v-text, v-html

v-text == innerText → 문자열 그대로 가져온다

v-html == innerHtml → 서식이 적용된 상태로 가져온다

  • 예시 Code
    <div id="app">
          <h2>{{ msg }}</h2>
          <h2 v-text="'v-text : ' + msg"></h2>
          <h2 v-html="'v-html : ' + msg"></h2>
        </div>
        <script>
          new Vue({
            el: '#app',
            data() {
              return {
                msg: '<font color="red">Hello SSAFY</font>',
              };
            },
          });
        </script>

JavaScript 표현식 모두 사용 가능

Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원한다.

  • 변수선언, 조건문은 사용불가(삼항연산자 사용)
  • 예시 Code
    {}
    {}
    {}
    <div v-bind:id-"'list-' + id"></div>
  • 예시 Code2
    <!-- Vue 객체를 마운트할 대상 엘리먼트 -->
    <div id="app">
      <div>{}</div>
      <div>{}</div>
      <div>{}</div>
      <div>{{ changeMsg('Good') }}</div>
      <div v-text="message + ' Vue~'"></div>
      <div v-text="num > 10 ? num * num : num + 100"></div>
      <div v-text="message.split('').reverse().join('')"></div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          num: 10,
          message: 'Hello',
        },
        methods: {
          changeMsg: function (mg) {
            return (this.msg = mg);
          },
        },
      });
    </script>

디렉티브(Directives)

디렉티브 : v-접두사가 있는 특수 속성

속성 : 단일 JavaScript의 표현식 ( 단, v-for 제외)

역할 : 표현식의 값이 변경 될 때 사이드 이펙트를 반응적 DOM에 적용.

종류

v-model

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

참고 : https://kr.vuejs.org/v2/guide/forms.html

  • 예시 Code
    <!-- Vue 객체를 마운트할 대상 엘리먼트 -->
    <div id="app">
      <!--text, textarea-->
      <input type="text" v-model="msg" />
      <div>{}</div>
      <hr />
      <h2>textarea v-model</h2>
      <textarea rows="5" v-model="msg2"></textarea>
      <p style="white-space: pre-line">{}</p>
      <hr />
      <!--checkbox-->
      <h2>checkbox</h2>
      <input type="checkbox" id="wm" value="수박" v-model="fruits" />
      <label for="wm">수박</label>
      <input type="checkbox" id="bnn" value="바나나" v-model="fruits" />
      <label for="bnn">바나나</label>
      <input type="checkbox" id="apple" value="사과" v-model="fruits" />
      <label for="apple">사과</label>
      <p>선택한 과일 : {}</p>
      <hr />
      <!--radio-->
      <h2>radio</h2>
      <input type="radio" id="male" value="남자" v-model="gender" />
      <label for="male">남</label>
      <input type="radio" id="female" value="여자" v-model="gender" />
      <label for="female">여</label>
      <p>선택한 성별 : {}</p>
      <hr />
      <!--하나 선택-->
      <h2>select</h2>
      <select v-model="area">
        <option value="서울">서울</option>
        <option value="대전">대전</option>
        <option value="광주">광주</option>
        <option value="구미">구미</option>
      </select>
      <p>공부하는 지역: {}</p>
      <hr />
      <!--여러개 선택-->
      <h2>select multiple</h2>
      <select v-model="areas" multiple>
        <option v-for="city in cities" v-bind:value="city.value">{}</option>
      </select>
      <p>희망지역 : {}</p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          msg: 'Hello Vue~!',
          msg2: '',
          fruits: [],
          gender: '',
          area: '서울',
          cities: [
            { vtext: '서울', value: 'seoul' },
            { vtext: '구미', value: 'gumi' },
            { vtext: '광주', value: 'gwangju' },
            { vtext: '대전', value: 'daejeon' },
          ],
          areas: [],
        },
      });
    </script>
    1. v-model과 연결된 msg가 변경
    1. 인스턴스 내부 msg 변경
    1. 인스턴스와 연결된 div에 표현 변경

v-bind

인스턴스와 엘리먼트의 속성과 바인딩

v-bind는 약어 " : " 로 축약

  • 예시 Code
    <div id="app">
      <!-- 속성을 바인딩 합니다. -->
      <div v-bind:id="idValue">v-bind 지정 연습</div>
      <button v-bind:[key]="btnId">버튼</button>
    
      <!-- 약어를 이용한 바인딩. -->
      <div :id="idValue">v-bind 지정 연습</div>
      <button :[key]="btnId">버튼</button><br />
    
      <a v-bind:href="link1">싸피</a>
      <a :href="link2">네이버</a>
    
      <span :title="titleStr">{{ str }}</span>
      <img :src="imgName" alt="" /><br />
      <ul>
        <li v-for="(area, index) in areas" :class="{'zone-text-color' : area.isZone}">
          {{ index + 1 }}.{{ area. city}}
        </li>
      </ul>
      <p :class="[textc, backc]">안녕하세요 싸피 여러분~~~~~</p>
      <div v-bind:aaa="msg">사용자 정의</div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          msg: 'user define',
          idValue: 'test-id',
          key: 'id',
          btnId: 'btn1',
          link1: 'http://www.ssafy.com',
          link2: 'http://www.naver.com',
          titleStr: '마우스를 올리면 보이는 타이틀 문자열',
          str: '일반 문자열',
          imgName: 'cookie.png',
          areas: [
            { city: '광주', isZone: false },
            { city: '구미', isZone: true },
            { city: '대전', isZone: false },
            { city: '서울', isZone: false },
          ],
          textc: 'tcolor',
          backc: 'bcolor',
        },
      });
    </script>

v-for

반복문.

:key = idx와 함께 사용하자

v-if와 함께 사용하지 말자

  • 예시코드
    <div id="app">
            <h2>객체배열 - 내용출력</h2>
            <ul>
                <li v-for="region in ssafy">
                    지역 : {}, {}개반
                </li>
            </ul>
            <h2>객체배열 - 위치,내용 출력</h2>
            <ul>
                <li v-for="region, index in ssafy">
                    번호 : {}, 지역 : {}, {}개반
                </li>
            </ul>
            <h2>객체배열 - 위치,내용 출력</h2>
            <ul>
                <li v-for="(region, index) in ssafy">
                    번호 : {}, 지역 : {}, {}개반
                </li>
            </ul>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    ssafy: [{
                            name: "광주",
                            count: 2
                        },
                        {
                            name: "구미",
                            count: 2
                        },
                        {
                            name: "대전",
                            count: 2
                        },
                        {
                            name: "서울",
                            count: 6
                        }
                    ]
                }
            })
        </script>

v-show

렌더링. display:none과 같은 맥락

  • 예시 Code
    <div id="app">
      <div v-show="isShow">{}</div>
    </div>
    <script>
      /*
            거짓의 값을 나타내는 것
            : 0, false, '', null, undefined, NaN
        */
      new Vue({
        el: '#app',
        data: {
          isShow: true,
          msg: '보이나요?',
        },
      });
    </script>

v-if와 v-show의 차이점

화면이 보였다 안보였다 자주 바뀌는 부분에서는 v-show

template

여러개의 태그들을 묶어서 처리할 때 사용

v-if, v-for, component등과 함께 사용

  • 예시 Code
    <h2>template 태그 사용하기</h2>
    <div id="app">
        <label>반수 : </label>
        <input type="number" v-model.number="count">
        <template v-if="count % 2 == 0">
            <h4>여러개의 태그를 묶어서 처리해야 한다면??</h4>
            <h4>template 태그를 사용해 보자</h4>
            <h4>만약에 template가 없다면?? 각태그마다 v-if?</h4>
        </template>
        <template v-for="(region, index) in ssafy" v-if="region.count === count">
            <h3>지역 : {} ({}개반)</h3>
        </template>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                count: 0,
                show: false,
                ssafy: [{
                        name: "광주",
                        count: 2
                    },
                    {
                        name: "구미",
                        count: 2
                    },
                    {
                        name: "대전",
                        count: 3
                    },
                    {
                        name: "서울",
                        count: 6
                    }
                ]
            }
        })
    </script>

Vue Method

Vue Instance 생성과 관련된 data 및 method의 정의 가능

method안에서 data를 this.dataName으로 접근

Vue Filter

Filter를 이용하여 표현식에 새로운 결과 형식 적용

중괄호 보간법또는 v-bind에 사용가능

  • 예시 Code
    <div id="app">
      <div>
        금액 : <input type="text" v-model="msg1" /><br />
        전화번호 : <input type="text" v-model="msg2" />
      </div>
      <div>
        <h3>{{ msg1 | price }}</h3>
        <h3>{{ msg2 | mobile }}</h3>
      </div>
    </div>
    <script>
      Vue.filter('price', (value) => {
        if (!value) return value;
        return value.toString().replace(/\B(?=(\d)+(?!\d))/g, ',');
      });
      Vue.filter('mobile', (value) => {
        if (!value || !(value.length === 10 || value.length === 11)) return value;
        return value.replace(/^(\d)(\d)(\d)/g, '$1-$2-$3');
      });
      new Vue({
        el: '#app',
        data: {
          msg1: '',
          msg2: '',
        },
      });
    </script>

computed

  • cache를 호출할때 이용한다.
  • methods로 함수 3번 호출할 때 1번만 호출 가능
  • 예시 Code
    methods: {
          reversedMsg: function () {
            console.log('꺼꾸로 찍기');
            return this.message.split('').reverse().join('');
          },
        },
    computed: {
          reversedMsg: function () {
            console.log('꺼꾸로 찍기');
            return this.message.split('').reverse().join('');
          },
        },

v-on == @

v-on : 이벤트 호출

ex) v-on:click == @click

이벤트 막기

  1. e.preventDefault()
  1. @click.prevent

접근자 프로퍼티(acessor property)

- 객체 안에 값을 설정(set), 추출(get)을 함수로 정의해준다.

- 설정된 값을 사용시 함수가 아닌 일반 프로퍼티 처럼 사용한다.

  • 예시코드
    let data2 = {
            get insa() {
              return `$님 하이`;
            },
            set insa(name) {
              this._name = name;
            },
          };

입력창 접근하기

ref에 값을 주면 refs에서 관리하기 시작한다.

$refs로 엘리먼트의 값에 접근이 가능하다.

엘리먼트를 직접 활용해야 할때 사용하면 된다.

  • 예시코드
    아이디 : <input type="text" v-model="id" ref="id" />
    
    console.dir(this.$refs.id);
    console.log(this.$refs.id.value);

반응형

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

< Vuex >  (0) 2021.01.06
< Vue / Cli >  (0) 2021.01.06
< ES6 - Destructuring / LocalStorage >  (0) 2021.01.06
< Vue 정리 2 >  (0) 2021.01.06