삽질개발코딩

이번엔 이벤트 핸들링 기능 중 하나인 key 시리즈에 대하여 설명하겠다. key 시리즈도 너무나 단순하고 간단해서 크게 설명할 것이 없으니 간단하게 코드 사용과 결과를 설명하고 주의점 및 해결방안을 설명하겠다. 1. keyup 입력결과 : {{this.result}} 설명할게 크게 없다. key를 눌렀다가 떼면 keyHandle() 함수가 실행되어 변수 result에 입력값을 넣어 데이터 바인딩 한 코드이다. 2. keydown 입력결과 : {{this.result}} 이번엔 key를 눌렀을 시 동작하는 함수이다. 하지만 실행결과를 보면 입력칸엔 keydown을 입력했지만 결과는 마지막 글자가 빠져서 나왔다. 이 부분은 맨 하단 주의점 설명 시 언급하겠다. 3. keypress 입력결과 : {{this...

이번엔 input에 숫자만 넣는 방법에 대하여 알아보자 보통 전화번호 입력, 계좌번호 입력 등 숫자만 사용되는 항목을 작성할때 사용된다. 숫자만 입력되게 만드려면 많은 방법이 있지만 쉽고 간편해서 특히 자주 사용되는 2가지가 있다. 1. Input 태그에 입력하는 방법 말 그대로 input 태그를 건드려 작성하는 방법이다. 태그를 건드리는 방법도 크게 두가지로 나눠지게 되는데 각각의 장단점을 알려주겠다. 입력결과 : {{this.result}} 우선 첫번째로 input의 type을 number로 바꾸는 방법이다. 장점 : 간단함 단점 : maxlength를 사용할 수 없음 장점은 type만 바꿔주면 되는거니 정말 간단하다. 하지만 maxlength를 사용할 수 없다는 것이 제일 큰 단점이다. 예를들어, ..

오늘은 화면 구성에 기본적으로 많이 쓰이는 input 사용법에 대해서 알아보자. input은 말 그래도 입력칸을 의미한다. 글자, 숫자, 특수기호 등 키보드로 입력할 수 있는 모든것들을 넣을 수 있다. 코드 App.vue 입력결과 : {{input}} 설명 코드만 봐도 느끼겠지만 정말 간단해서 설명할게 없다. input 태그를 만들고 입력한 값을 저장할 수 있도록 v-model을 이용하여 미리 만들어 놓은 input 변수 안에 넣고 입력결과를 데이터 바인딩 한 것이다. 결과

오늘도 화면 구성 시 가장 기본적으로 쓰이는 이벤트에 관해 알아볼 것이다. 이벤트 핸들링은 특정 이벤트가 실행될때 함수 혹은 별도의 동작을 실행시키는 기능이다. 대표적으로 @click 이벤트와 @change 이벤트가 제일 많이 쓰이므로 사용법과 예제를 알아보고 추후 다른 이벤트 핸들링도 다뤄보도록 하겠다. 1. v-on:click(@click) 코드 App.vue 클릭 클릭 결과 : {{result}} 설명 '@click'은 말 그대로 버튼을 클릭 했을 시 함수를 호출하는 기능이다. ■ 'v-on:click'은 간소화시켜 '@click'으로 사용해도 무관하다 클릭 클릭 버튼을 클릭했을 시 하단 methods 부분의 click() 함수를 호출한다는 뜻이다. click()함수가 호출되면 변수 result에 ..