본문으로 바로가기

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