Vue 기본

• html, css → 뷰의 역할만 한다

Vue 주요 속성

• el
  • Vue 인스턴스를 바인딩 할 DOM 요소 지정
• data(Model)
  • Vue에서 관리할 JS 객체
  • DOM 요소와 바인딩 될 데이터
• template
  • 작성하지 않은 경우
    • el에 지정된 DOM 요소를 template으로 사용
  • 작성한 경우
    • el에 지정된 DOM을 template에 작성된 DOM요소로 대체

Vue의 라이프 사이클(중요)

1. Create
   • 뷰 인스턴스에 data 속성, methods 속성을 정의
   • beforeCreate, created
     • created : data 속성, methods 속성에 접근이 가능함, 뷰 인스턴스가 화면에 부착되기 전(mount), 서버로부터 데이터를 요청하기 가장 적합
2. Mount
   • DOM에 뷰 인스턴스를 연결
   • beforeMount, mounted
     • mounted : this.$el을 통해 바인딩 된 화면 요소에 접근 가능, 화면요소를 직접 제어하기 적합
3. Update
   • DOM과 바인딩된 데이터가 변경되어 re-reader
   • beforeUpdate, updated
     • beforeUpdate
       • 바인딩 된 데이터가 변경된 후 화면이 새로 렌더링 되기 전
       • 변경된 데이터에 접근 가능
       • 이 때, 데이터를 변경해도 업데이트가 발생하지 않음
     • updated
       • 바인딩 된 데이터를 변경할 경우 무한 Update 발생하므로 주의
4. Destory
   • 바인딩 해제 및 뷰 인스턴스 제거
   • beforeDestory, destroyed
     • beforeDestory
       • 바인딩 해제 및 뷰 인스턴스 제거 전
       • 뷰 인스턴스에 접근 가능
     • destroyed
       • 모든 바인딩을 해제 및 뷰 인스턴스 제거 후
       • 뷰 인스턴스 접근 불가능

---

new Vue({ option pattern 설정(el[dom]과 data[model]) });

create, update를 언제 사용해야 좋을지

Vuetify와 bootstrap

• 둘 다 디자인 부분에서 간편하지만, vuetify 같은 경우 커스터마이징을 할 수 있고 CDN만 작성한다면 쉽게 쓸 수 있다

template - Directive(디렉티브)

• 디렉티브는 v-접두사가 있는 특수 속성
• 디렉티브 속성 값은 단일 JS 표현식이 된다(v-for는 예외)
  • 위의 명령어가 쓰인 속성값에는 자바스크립트 영역이다
• 디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용
• v-once
  • 한 번만 뿌림(수정 되지 않음)
  • <h2 v-once>{{msg}}</h2>
• v-text
  • 텍스트 출력(innerText)
  • <div v-text="'메세지 : '+message"></div>
• v-html
  • HTML 태그+텍스트 출력(innerHTML)
  • <div v-html="'메세지 : '+message"></div>
• v-cloak
  • 로딩중과 유사(setTimeout)
• v-model
  • 양방향 바인딩 처리를 위해서 사용(form의 input, textarea)
  • <input type="text" v-model="msg" />
  • <div>{{msg}}</div>
• v-bind
  • 엘리먼트의 속성과 바인딩 처리를 위해서 사용
  • 약어(:)로 사용 가능
  v-bind 지정 연습

  버튼
  
  

  v-bind 지정 연습

  버튼
  
  
  카카오
  네이버
    new Vue({
      el: "#app",
      data: {
        idValue: "test-id",
        key: "id",
        btnId: "btn1",
        link1: "<<a href=http://www.kakao.com>http://www.kakao.com</a>>",
        link2: "<<a href=http://www.naver.com>http://www.naver.com</a>>",
      },
    });
  

• v-show
  • visibility와 동일
  • 조건에 따라 엘리먼트를 화면에 출력
  • 스타일에 따라 display를 변경
  • v-show=”false” 일 경우 display: none;
    • v-if=”false” 일 경우 엘리먼트 삭제
• v-if(v-else, v-else-if)
  • if, elseif, else와 동일

  <span v-if="age < 10">무료</span>
          <span v-else-if="age < 20">7000원</span>
          <span v-else-if="age < 65">10000원</span>
          <span v-else>3000원</span>
  

• v-for
  • for 문과 동일

  <!-- 범위 반복문, 배열 반복문 처리 -->
      <h2>v-for</h2>
      <div id="app">
        <h2>범위지정(4)</h2>
        <span v-for="i in 4"> {{i}} </span>
  
        <h2>문자열 배열</h2>
        <ul>
          <li v-for="name in regions">{{name}}</li>
        </ul>
  
        <h2>문자열 배열 - 위치</h2>
        <ul>
          <li v-for="(name, i) in regions">번호 : {{i}}, 지역 : {{name}}</li>
        </ul>
      </div>
      <script>
        new Vue({
          el: "#app",
          data: {
            regions: ["광주", "구미", "대전", "서울"],
          },
        });
      </script>
  

• v-on
  • onClick = @click
• mustache {{ }}
  • 속성명은 그대로 기입
  • 텍스트의 경우 작은(큰) 따옴표 내에 기입
• 태그 내 v-000 속성에 대한 속성값
  • mustache 없이 바인딩된 속성명 작성

fetch와 axios 비교

• axios는 기본 Content-Type가 application/json 이다
• axios는 요청 데이터를 자동으로 문자열로 변경해서 보냄
  • fetch에서 json 데이터를 넘겨 받고 사용할 때 json.stringfy를 했었지만 axios는 X
• axios의 경우 상태 코드가 200번이 아니라면 에러를 바로 반환한다.
  • .catch() 또는 try-catch로 처리가 가능하다
• CDN을 적용하면 사용 가능
• axios의 경우 응답으로 json 데이터를 받아옴(.json을하고 then을 할 필요가 없다)

데이터 바인딩

단방향 데이터 바인딩(데이터 변경 시 ⇒ 화면 변경)

1. {{}} mustache
2. v-text
3. v-html
4. v-bind : 속성 바인딩
   • v-bind:value=”js 영역이며, 뷰 인스턴스 속성들 접근 가능”
     • 문자열의 경우 작은따옴표, 큰 따옴표 사용
     • 데이터의 경우 그냥 데이터명 적으면 된다
   • v-bind 생략 가능 → :value=””
   • v-bind:class=””

양방향 데이터 바인딩(화면변경 시에도 데이터 변경)

• v-model
  • ex) input, textarea와 같은 입력 태그에서 사용한다.
  • 수식어
    • v-model.number
      • input은 type을 number로 지정해도 value값을 문자열로 반환
      • 수식어 사용 시 자동으로 숫자 타입으로 변환
    • v-model.trim
      • 자동으로 공백을 제거
    • v-model.lazy
      • 입력이 끝났을 때 한 번에 바인딩을 해줌(원래의 경우 한 글자씩 바인딩)

속성 바인딩

<a v-bind:href="'view.html?isbn='+book.isbn">
                    {{book.title}}
                  </a>

이벤트

// 
<span>cnt : {{count}}</span>
      <button @click="count++">클릭!!</button>