본문으로 바로가기
v-on
- 사용방법 : v-on:이벤트이름="메소드이름"
ex)
<button v-on:click="increment">증가</button>
<button v-on:click="decrement">감소</button>
- v-on 을 조금 더 편하게 쓰기 위해 @ 라는 alias 를 사용한다 
ex)
<button @click="increment">증가</button>
<button @click="decrement">감소</button>

v-bind
- 머스태쉬 태그 {{}} 를 이용해 HTML 태그 안의 내용을 vue 인스턴스 안의 데이터값으로 설정 할 수 있었다.
ex)
...
<div id="app">
  <h1>Hello, {{ name }}</h1>
</div>
...
<script>
var app = new Vue({
  el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
  // data 는 해당 뷰에서 사용할 정보를 지닙니다
  data: {
    name: 'shaking'
  }   
});
</script>

하지만, HTML 태그의 속성 값을 데이터값을 사용해야할땐 머스태쉬 태그를 사용할 수 없다.
ex)
//<img src="링크"/>
<img src={{ image }}/> //에러
<img src="{{ image }}"/> //에러

에러 메세지 :
[Vue warn]: src=”{{image}}”: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use.

- 따라서, HTML 태그 속성 값을 데이터 바인딩 하고 싶을 때 v-bind 를 사용한다.
- 사용 방법 : v-bind:태그속성="바인딩할데이터명"
ex)
<img v-bind:src="image"/>
- 또한 v-bindv-on 처럼 간단하게 사용가능하다. 간단하게 사용하는 방법은 다음과 같이 v-bind 를 제외해서 사용하면 된다. ex)
<img :src="image"/>

v-model
- 데이터 → 뷰 의 형태로 바인딩이 되어있어서, 데이터의 값이 변하면 바로 바로 업데이트가 됨. 이렇게 한방향으로 변경될 때 단방향 바인딩이라고 함
ex)
<div id="app">Hello, {{ msg }}</div>

<script>
var vm = new Vue({ 
  el: '#app',
  data: {
    name: 'world'
  }
});
</script>
- 뷰 ⇄ 데이터 형태로 바인딩하여 데이터가 양 방향으로 흐르게 해주는 것으로. 데이터에 있는 값이 뷰에 나타나고, 이 뷰의 값이 바뀌면 데이터의 값도 같이 바뀐다.
- 이렇게 양방향 바인딩을 할 때는 v-model 을 사용한다.
ex)
<div id="app">
   Hello, {{ name }} 
   <input type="text" v-model="name"/> 
</div>

<script>
var vm = new Vue({ 
  el: '#app', 
  data: {
    name: 'world'
  }
});
</script>


참고사이트 : https://velopert.com/3136




댓글을 달아 주세요