v-model

v-model은 vue.js에서 지원해주는 내용으로 vue data와 양방향 통신을 할수있게 도와준다.

특정 input tag나 기타 값에 v-model tag로 원하는 data 값을 연결 시켜주면 해당 값이 자동으로 반영된다.

v-model의 경우는 활용방법이 많으니 지속적으로 활용하면서 익혀야 한다.

 

기본적인 데이터 연결만 정리해도 이후에 나오는 프로젝트나 정리에서 추가적으로 설명

 

html

<div id="app">
   <p>{{ email }}</p>
   <input v-model="email" />
</div>

 

js

const app = new Vue({
  // vue 객체 생성
  el: '#app',
  data: {
    // 초기값 설정
    email: 'test@email.com'
  }
});

 

아래는 출력값

이후에 v-model로 연결되어있는 input tag의 값을 바꾸게 되면 자동적으로 위에 p tag값도 수정된다.