분홍분홍 코딩 프로젝트
[Vue.js]Vue 용어 정리 본문
v-model:
사용자의 입력을 받는 UI 요소들에 v-model이라는 속성을 사용하면 입력 값이 자동으로 뷰 데이터 속성에 연결시킨다.
input, textarea, select 같은 애들을 쓸 떄 활용된다.
기능을 잘 보면 v-on 과 v-bind 의 기능이 합쳐졌다는걸 알 수 있다.
작은 기능이지만 이걸 보고 뷰를 선택하길 잘 했다는 생각이 들었다.
리액트 쓸 때 input의 value 값을 받아오려면 inputHandle이라는 함수를 만들어서 e.target.value로 value를 가져와 state에 연결하는 방식으로 했었는데 .. 좋네 :)
HTML 입력 요소의 종류에 따라 v-model 속성이 각각 다음과 같이 구성된다
(1) input 태그에는 value / input
(2) checkbox 태그에는 checked / change
(3) select 태그에는 value / change
v-on:
이벤트 핸들링을 담당하는 놈.
v-on:이벤트명 의 형태로 이벤트를 다룰 수 있다.
<body>
<div id="app">
<button v-on:click="count += 1">increase</button>
<div>{{count}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
count: 0,
},
});
</script>
</body>버튼을 클릭 할 떄마다 count에 1을 더해주는 예제이다.
클릭 이벤트를 등록하고 따옴표안에는 원하는 기능의 코드를 넣는다.
더 간단한 표현이 있다.
@click="increaseCount" // count 1 증가 시키는 콜백함수v-on:click이나 @click 요거나 똑같다.
v-bind:
.attr()과 비슷한 기능을 수행하며
태그의 속성을 동적으로 변경할 때 사용한다.
'옛 포스트 > Vue.js' 카테고리의 다른 글
| [Vue.js]axios get 403 forbidden error 해결 (0) | 2022.02.17 |
|---|---|
| [Vue.js] CORS 에러를 만나다. (0) | 2022.02.12 |
| [Vue.js]Vue의 매력, 양방향 바인딩 (0) | 2022.02.11 |
| [Vue.js]부동산 쇼핑몰 (0) | 2022.02.10 |
| [Vue.js]기본 용어 정리 (0) | 2022.02.08 |
'옛 포스트/Vue.js' Related Articles
more
