: html 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것
: script부분에서 만들어 선언해준 것을 template의 {{ }} 안에 담으면 보여진다.
v-bind
: id, class, style등의 html속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식.
🌱 데이터 바인딩을 도와주는 속성들
v-bind : 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용
- 단방향 (그냥 박아놓는거 placeholder처럼 근데 이제 value를 곁들인.)
ex) v-bind:href === :href
v-model : v-bind와 v-on의 조합
- 양방향 (값을 주고받게 해줌)
v-on : 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용 - 함수 연결할 때 밖에 안씀.
ex) v-on:click === @click
( href는 매개변수 자리에 넣어준 부분이 뒷 주소가 됨. ex) com/page1 )
v-bind 예제
...
<div id='test'>
<p vind:id='idA'>아이디 바인딩<p>
<p vind:class='classA'>클래스 바인딩<p>
<p vind:style='styleA'>스타일 바인딩<p>
👉 :id, :class, :style로 줄여쓰기 가능.
</div>
...
<script>
new Vue({
el: '#test',
data: {
idA: 10,
classA: 'container',
styleA: 'color:blue'
👉 id,class,style등을 변수로 담아 바꿔줘야 할 상황일 때.
(ex)클릭 이벤트 )
👉 id, class 부분은 console창에서 확인 가능하고, style은 바로 적용됨.
}
})
</script>
<input type="text" :value = "title" @input = "titleUpdate"
style = "padding: 20px; border: 1px pink solid">
...
<script>
methods : {
titleUpdate(e) {
console.log(e.target.value)
}
}
</script>
- input창에 데이터가 입력될 때 마다 titleUpdate의 값이 바뀜