사용자 입력 핸들링
<body>
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reversMessage">메세지 뒤집기</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello! Vue.js!'
},
methods: {
reversMessage: function(){
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>- 사용자가 앱과 상호작용할 수 있게 하기 위해 'v-on' 디렉티브를 사용하여 Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가 할 수있음
- 이 방법은 직접적으로 DOM은 건드리지 않고 앱의 상태만을 업데이트함
- 모든 DOM 조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춤
<body>
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello! Vue.js!'
}
})
</script>
</body>- Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩 하는 'v-model'.디렉티브를 제공함
'Vue' 카테고리의 다른 글
| [시작하기] 컴포넌트를 사용한 작성방법 (0) | 2023.05.25 |
|---|---|
| [시작하기] 조건문과 반복문 (0) | 2023.05.25 |
| [시작하기] 선언적 렌더링 (0) | 2023.05.25 |
| 프로젝트 생성하기 (0) | 2023.05.22 |
| What is Vue.js? (0) | 2023.05.22 |