vue.js__데이터 바인딩(데이터 연결시키기)

Data Binding

: 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을 이용한 데이터 바인딩

<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의 값이 바뀜