키 수식어2 18. Vue - 폼 입력 바인딩(V-model) 1. Form Input Binding a) 단방향 데이터 바인딩 - 단방향 데이터 바인딩이란, 이름 그대로 데이터가 일방통행한다는 뜻이다. - 다음 예제코드를 통해서 알아보자. {{ msg }} - 위의 코드에서 확인할 수 있듯이, 개발자가 설정한대로 문자열이 생성된다. - 양방향이라면 유저가 원하는 대로도 설정할 수 있어야 되는 것이다. b) 양방향 데이터 바인딩 {{ msg }} - 위의 코드를 해설하자면 다음과 같다. - @input 이벤트를 사용하여 어떤 값이 입력란에 입력되면 이벤트 핸들러가 동작한다. - 핸들러에서는 입력된 값을 event객체를 통해 받아온 뒤에 msg 데이터를 갱신한다. (갱신 = 반응성) - 위의 과정을 통해서 사용자가 입력한 값이 h1태그에 출력되도록 만들었다. - 이것.. 2021. 5. 20. 17. Vue - 이벤트 키 수식어 1. 키 수식어란? 먼저 다음 예제코드를 살펴보자. 위의 예제코드를 실행하게 되면 다음과 같은 결과가 콘솔에 출력된다. 키보드 이벤트를 콘솔에 출력하도록 만든 코드이다. 위의 사진은 a를 입력하고 엔터키를 눌렀을때 콘솔에 출력되는 결과이다. 이처럼, 키보드 조작에 의해 입력된 값을 이벤트 객체를 통해 확인할 수 있다. 이 과정을 이벤트 수식어를 통해 쉽게 구현할 수 있는데, 이를 키 수식어라고 부른다. 2. 키 수식어 사용방법 키 수식어는 반드시 케밥 케이스를 사용해야 한다. 이 부분을 유념하자. a) 특정 키 수식어 등록 위의 코드는 엔터키를 눌렀을 때만 핸들러가 동작하도록 만든 키 수식어다. 코드에서 볼 수 있듯이, @keydown 뒤에 점(.)과 함께 원하는 키를 등록할 수 있다. b) 다수의 키 .. 2021. 5. 20. 이전 1 다음
