데이터 바인딩
binding은 묶는다라는 의미를 갖고있다. 즉 데이터를 묶는다라고 이해하면 편한다.
<template>
<div>
<div>{{ htmlString }}</div>
<div v-html=""></div>
</div>
</template>● 문자열 바인딩은 {{}} ← 중괄호 2개를 넣어줘야 한다. 그 사이에 데이터의 키명을 넣어주면 된다.
● html바인딩은 디렉티브를 통해 넣는다. v-html이 html 바인딩에서 추가되는 속성이다.
<template>
<div>
<div>{{ htmlString }}</div>
<div v-html=""></div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
htmlString: '<p style="color:red;">빨간색 문자</p>'
}
},v-html을 작성해 해당하는 키 값을 넣어주면 된다.
양방향 데이터 바인딩
양방향 데이터 바인딩? 화면의 input 값에서 입력 창이 바뀌면
data안에 있는 userId에도 값이 바뀐다. 변경할 때마다 값이 바뀐다.
v-model은 양방향 데이터 바인딩이다.
<template>
<div>
<input type="text" v-model="userId" />
<button @click="myFunction">클릭</button>
<button @click="changeData">변경</button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
userId: 'seungwon.go'
}
},
setup() {},
created() {},
mounted() {},
unmounted() {},
methods: {
myFunction() {
console.log(this.userId)
},
changeData() {
this.userId = 'Jeremy'
}
}
}
</script>구현하는 함수는 무조건 method에 적는다.
funtion키를 굳이 안적어도 된다. myfunction이 key이다. function뒤에 전달할 매개변수가 없으면 (); 생략가능하다.
myfunction함수는 어디에 등록하냐?
data라는 것은 화면상에 쓸 데이터를 모두 정리한다고 했다.
this 키워드가 오브젝트 안에 정리된 함수에서 특정 키값을 접근할 때는 반드시 this라는 키워드를 이용해서 접근할 수 있다. 그때의 this는 오브젝트 전체를 가르킨다.
속성 바인딩
<template>
<div>
<input type="test" v-model="userId" readonly/>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
userId: ''
}
},
setup() {},
created() {},
mounted() {},
unmounted() {},
methods: {}
}
</script>readonly? 사용자가 값을 못 바꾸게 하는 거
여기서는 양방향 데이터가 굳이 필요없다.
why? 값이 바뀌면 안되니까.
클래스 바인딩
클래스 바인딩 안에 object만 선언가능하다. 클래스 안에는 여러 개의 속성을 넣을 수가 있다.
키 값에는 class 명
value 값에는 true/false로 적어야한다.
만일 class명에 한 단어 이상일때 " "로 감싸준다.
이벤트
● 선언할 때 @로 받느냐, v-on:으로 받느냐 차이
● key 이벤트의 경우 현재 사용자가 enter냐 ,tab키냐 , left 키냐 등등을 체크 가능
● event에 stop이라고 하면 even.stopPropagation()호출, prevent역시
● 함수로 event를 넘겨 줄때는 $event를 사용해서 넘겨주면 된다.
.