vue1(ref/디렉티브)

react의 useState개념?

html을 변화시킬때 사용

변수선언하고, .value 로 이벤트 걸기

 

비슷한 개념으로 reactive!

=> string이나 number가 아닌 object, array의 경우 사용한다.

이 경우에는 .value가 아닌 .id 로  이벤트 걸어주면 된다.

 

디렉티브는 vue에서 제공하는 특수 속성!

v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 한다.

 

 

v-on

click 이벤트 걸기 -> (Vue 인스턴스에서 메소드르 호출하는 이벤트 리스너 추가 가능)

<button v-on:click="function1">

<button @click="function1">

다음과 같이 입력하면 -> 버튼을 클릭하면 function1이 발생

 

v-bind

데이터 바인딩 ->

<div id='app-2'>
	<input type="text" v-bind:value="text">

	<input type="text" :value="text">
</div>
......

const app2 = new Vue({
	el: '#app-2',
	data: {
   	     text: '오키도키'
	}
})

→ 이 요소의 value 속성을 Vue 인스턴스의 text 속성으로 최신 상태를 유지!

 

콘솔 열고 app2.text = 'NEW!' 라고 메세지를 입력하면 value속성이 업데이트 된다!

 

 

v-model

양식에 대한 입력과 앱 상태를 양방향으로 바인딩!

 

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

const app = new Vue({
	el: "#app",
	data: {
    		message:'안녕!'
    }
})