Vue.js 17일차

created() mounted() updated() 사용하여 훅을 건다. 

 

리액티브하게 쓴 것이 바뀔 때까지 논 리액티브한 것은 바뀌지 않는다. 

리액티브하게 쓰려면 data안에 넣어줘야함. 내부적으로 값의 변환을 원할 때에만 hook에 걸어둠

 

data

reactive data(반응형 데이터) : data가 바뀌면 view가 바뀐다. view가 바뀌면 data가 바뀐다.

 

:속성이름 = 변수이름 -> 변수값이 들어간다.

속성이름= 변수이름 -> 변수이름 자체가 들어간다.

 

쌍방간의 데이터 전달을 위해서 

method

@이밴트핸들러 = 메써드이름

@이밴트핸들러 = 메써드호출()

 

@click

@change

@input

 

핸들러 함수

인자값 없이 이름만 쓰면 아래처럼 첫번째 인자로 이벤트 객체가 넘겨진다.

@change = "onChange" -> onChange($event)

 

 

v-model

쌍방향 데이터 동기화

뷰 <-> 모델

<input v-model = "textVal" />

data(){

return {textVal : ''}

 

}

 

v-bind

랜덤 이미지 open-api : https://placeimg.com/100/100/tech

v-bind:속성은 :속성으로 간략화가 가능하고

v-html은 html을 직접 넣는다.

 

v-bind:class

클래스이름 : 조건값

:class={classname: isactvie, classname: isactvie, ...}

조건이 true이면 클래스가 활성화되는 것이다.  또한, 다수의 조합이 가능하다.

 

event

첫번째 인자로 이벤트 객체가 넘어건다.

인자와 같이 이벤트 객체를 넘기려면 $event $를 붙여줘야 넘어간다.

 

component

https://v3.ko.vuejs.org/guide/component-props.html#prop-%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%B8

 

props: App에서 comp로 데이터를 전송한다.

emit: comp에서 App으로 데이터를 전송한다.

 

v-for

리스트 렌더링

문서바로가기

 

for in 문법 -> for item in items