[Vue3] Vue(2)

❗❗  데브코스 42일차 (09.28)

Vue2일차가 시작 되었다.

공식문서 기준으로 이론을 설명하고, 실습을 진행하다보니

시간이 다소 많이 소요되었다.

문법은 다루지 않을 예정이여서 Vue만의 독특한 방식 몇 개를 소개를 하겠다.

 

✅ HTML 클래스 바인딩

Vue는 HTML 태그내에서 여러가지 문법을 사용할 수 있다. if, for 등등 또한 변수 및 객체를 전달하여

클래스를 동적으로 전환할 수 있다.

//예시코드
<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
<script>
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
</script>

//결과값
<div class="static active"></div>

v-bind:class 또는 줄여서 :class의 문법 형태로 사용할 수 있다.

//배열 구문
<div :class="[activeClass, errorClass]"></div>

<scritp>
  data() {
    return {
      activeClass: 'active',
      errorClass: 'text-danger'
    }
  }
</script>

//결과값
<div class="active text-danger"></div>

 

✅이벤트 핸들링

Vue에서 이벤트 핸들링은 "v-on" 디렉티브로 사용한다. 줄여서 "@" 기호로 DOM 이벤트를 듣고 트리거 될 때와

JavaScript를 실행할 때 사용한다.

//사용예시
<div>
  <button @click="counter += 1">Add 1</button>
  <p> {{ counter }} </p>
</div>

<script>
 data() {
    return {
      counter: 1
    }
  }
</script>

클릭 이벤트가 발생될 때 마다, count값이 증가되고, 반응성으로 인해 DOM화면에서 실시간으로 바뀌는 것을 확인할 수 있다.

//메소드 이벤트 핸들러
<div>
  //메소드 한개 정의 시
  <button @click="greet">Greet</button>
  //메소드 여러개 정의 시
  <button @click="greet(), test()">Greet</button>
</div>

<script>
 data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    greet() {
      alert('Hello')
    },
    test(){
      console.log('test')
    }
  }
</script>

//키 수식어 이용예시
<!-- 엔터키 입력시 -->
<input @keyup.enter="submit" />
<!-- 알트 + 엔터 -->
<input @keyup.alt.enter="clear" />
<!-- 컨트롤 + 클릭 -->
<div @click.ctrl="doSomething">Do something</div>

 

👨‍💻 체감상 아직까지는 크게 React와 달라보이는 것이 없는 것 같다.

 

📖 학습한 내용

• Vue(2)
  
  • 클래스와 스타일 바인딩
  • 조건부 렌더링
  • 리스트 렌더링
  • 이벤트 핸들링