Vue개념-3

v-if 속성 같은 경우는 computed 속성을 통해 대체가능(?) 지금까지 진도로는
즉 v-if="~~~.length > 0"
에서 밑에 computed 라는 객체 속성에 메서드를 주고 이 리턴값을 this.~~~.length > 0 으로 하면
v-if="메서드 명"
computed 는 자주 사용되는 옵션
v-bind는 : 로 바꿀 수 있음

html, css 까지 데이터의 구조로 이해하는 것이 중요함
클래스와 스타일 바인딩에서 snake case 나 dash case 를 사용하면 작은 따옴표로 감싸주는 것이 중요함.
여러개의 객체 데이터를 연결할 때는 배열을 사용할 수 있음

v-model 디렉티브를 사용할 때 주의할 점
-한글 입력시 한박자가 늦게 동작함 why? 자모 조합으로 결과 반영되기 때문(한글 입력할 때는)
<!--
  :value="msg"
    @input="msg = $event.target.value" /> 이 부분을 통해 양방향 데이터 바인딩 e라고 써주면 안됨 event라고 써줘야함 
-->

이런식으로 써줘야함 v-model 말고 수동으로 양방향 데이터 바인딩 만들어야함

@change => 포커스 or 탭 or 엔터키 눌렀을 때 값이 갱신됨
=>lazy 양방향은 이렇게 v-model 수식어

trim는 trim()메서드 사용

컴포넌트는 재활용도 높음
props를 통해 부모 자식간에 데이터 통신을 할 수 있음

하나의 컴포넌트는 template 이라는 구조 안에 작성을 하게된다.
컴포넌트의 루트 요소(최상위 요소)

<MyBtn class="heropy"> <= 이걸 html에서 확인해보면 없어진 걸 볼 수 있는데 이는 컴포넌트의 최상위 요소 중 어느 요소에 넣을지 몰라서 사라진 것임
요소가 하나만 있다면 적용이 됨 두개 이상이면 사라짐

하나의 컴포넌트를 만들 때는 하나인지 두개 이상인지 전제로 하고 코딩해야함

inheritAttrs: false <= 속성의 상속을 받지않겠다라는 뜻