일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 콜로라도
- 도로패임
- 육아휴직급여
- 청주시 지하철
- 샤오미
- 데이터시각화
- 액티언스포츠
- 감나무전지
- 국민을 위한 국민연금은 없다
- 코란도스포츠
- 대한민국선거
- 오프로드
- 아빠육아
- 준연동형비례대표
- 픽업트럭
- 미지아
- 저출산
- 2024년 합계출산율
- 싸이클
- 남자육아휴직
- 중고노트북
- 청주시 일반계 고등학교
- 40대아빠육아
- 인공지능
- 엔진오일
- 전동전기톱
- 가칭 동남고등학교
- 파리브레스트파리
- 자전거
- MTB
Archives
- Today
- Total
열심히 일한 당신 떠나라
코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 3일차 본문
3장 뷰 기본 문법 익히기
3.4 이벤트 다루기
v-on 디렉티브와 methods 옵션 속성으로 이벤트 연결하기
<script>
export default {
methods: {
clickHandler() {
alert('click');
},
onKeyupHandler(e) {
if (e.keyCode == 13) {
console.log('Enter!');
}
},
},
}
</script>
<template>
<button type="button" @click="clickHandler">클릭</button>
<input type="text" @keyup="($event) => onKeyupHandler($event)" />
</template>
<style></style>
v-on: 대신에 @를 사용하여 v-on:click을 @click으로 간단하게 작성할 수 있다.
반응성 시스템을 사용해 데이터 변화를 감지하고 업데이트하는 기능을 구현할 수 있다.
<script>
export default {
data() {
return {
number: 0,
};
},
methods: {
increasement() {
this.number++;
},
},
}
</script>
<template>
<h1>{{ number }}</h1>
<button type="button" @click="increasement">증가</button>
</template>
<style></style>
data()를 통해서 number 변수를 0으로 정의하고, methods에 증가 함수를 만들어 v-on:click 으로 이벤트를 연결.
3.5 폼 다루기
v-model 디렉티브로 폼 요소 다루기
한 줄 입력 요소의 값 가져오기, 여러 줄 입력 요소의 값 가져오기, 체크박스, 라디오 버튼, 콤보박스 요소
<script>
export default {
data() {
return {
uid: '',
upw: '',
};
},
methods: {
login() {
console.log('id: ${this.uid)}');
console.log('pw: ${this.upw}');
},
},
}
</script>
<template>
<form id="loginForm">
<label for="uid">아이디: <input type="text" id="uid" v-model="uid" /></label>
<label for="upw">비밀번호: <input type="password" id="upw" v-model="upw" /></label>
<button type="button" @click="login">로그인</button>
</form>
</template>
<style></style>
이벤트 다루기와 폼 다루기를 통해서 기본적인 뷰 문법에 조금씩 이해할 수 있었다.
'정보교육 > 프런트엔드' 카테고리의 다른 글
vue.js 프로젝트: 일정 관리가 포함된 홈페이지 만들기 (0) | 2024.06.23 |
---|---|
코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 5일차 (0) | 2024.06.22 |
코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 4일차 (0) | 2024.06.20 |
코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 2일차 (0) | 2024.06.18 |
코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 1일차 (0) | 2024.06.17 |