Directive

v-로 시작하는 함수들을 driective라고 한다.
directive 속성 값은 단일 자바스크립트 표현식이어야 함.
일부 directive는 뒤에 : 로 표시되는 인자를 사용할 수 있다.

Modifiers

. 으로 표시되는 특수 접미사로, directive가 특별한 방식으로 바인딩 되어야 함을 나타냄

<form @submit.prevent="onSubmit"> ... </form>
// submit이란 이벤트가 발생되면 event.preventDefault()를 실행

v-bind

• Attribute Bindings
  HTML의 속성 값을 Vue의 상태 속성 값과 동기화 함.

<img v-bind:src="src">
<a v-bind:href="url">move to url </a>

<img:src="src">처럼 : 으로 축약 가능

• Class and Style Bindings
  [] (소문자만) 로 감싸서 directive argument에 자바스크립트 표현식을 사용할 수 있음.
  자바스크립트 표현식에 따라 동적으로 평가된 값이 최종 argument 값으로 사용됨.

만약 다음처럼 속성이 많이 필요한 경우?

<button :style="`font-size: ${size}px; color ....`">여러가지도 되나요?</button>

많은 속성을 입력하다보면 오류도 나기 쉬울 것이고 작성하기 불편함.

<button :class="classObj">여러가지도 되나요?</button>


 const hasInfo = ref(true)
        // ref는 반응 객체의 속성으로 액세스되거나 변경될 때 자동으로 래핑 해제
        const classObj = ref({
          font-size : 50px,
          color: red
        })

이런 식으로 객체로 만들어서 전달하면 간편하게 쓸 수 있다.

Event Handling

• inline handlers

 <button @click="count++">Add 1</button>

• Method Handlers

<button @click="myFunc">Hello</button>