본문 바로가기

전체 글474

폼 입력 - 바인딩 단방향 데이터 바인딩은 바인딩된 데이터를 수정하여도 실제적으로 데이터가 변경되지 않는다. 양방향 데이터 바인딩은 바인딩된 데이터가 수정되면 실제 데이터도 변경되고 그 데이터를 가져오는 곳에서도 자동으로 갱신된다. @input: input 태그에 데이터가 입력되면 이벤트 발생 v-model을 이용하여 간편하게 위와 같은 이벤트를 발생할 수 있다. 하지만 한글을 입력할때에는 바로 적용이 안된다. 따라서 한글을 이용할 때에는 @input을 이용하여 사용하는 것이 좋을것 같다. 코드 예제 {{ msg }} @input: input 태그에 데이터가 입력되면 이벤트 발생 핸들러 메소드를 사용하지 않고 양방향 데이터 바인딩 v-modle을 이용하여 간략화 checkbox 예제 {{ checked }} 브라우저 확인 2021. 8. 2.
이벤트 핸들링 - 키 수식어 사용자가 특정 키(키 조합)를 입력하였을때 이벤트가 발생하도록 설정 예제 코드(App.vue) 키를 입력하였을때 이벤트 발생: Entaer 키를 입력하였을때 이벤트 발생: a 키를 입력하였을때 이벤트 발생: 키조합을(ctrl + a) 입력하였을때 이벤트 발생: 브라우저 확인 2021. 8. 2.
이벤트 핸들링 - 이벤트 수식어 공식 참고 문서 https://v3.ko.vuejs.org/guide/events.html#%E1%84%8B%E1%85%B5%E1%84%87%E1%85%A6%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%8E%E1%85%A5%E1%86%BC%E1%84%8E%E1%85%B1 이벤트 핸들링 | Vue.js 이벤트 핸들링 이벤트 청취 v-on디렉티브는 @기호로, DOM 이벤트를 듣고 트리거 될 때와 JavaScript를 실행할 때 사용합니다. v-on:click="methodName" 나 줄여서 @click="methodName"으로 사용합니다. 예시: Add 1 Th v3.ko.vuejs.org Html 의 기본 기능을 사용하지 않도록 하는 명령어 method에서 사용하는 명령어: event... 2021. 7. 31.
이벤트 핸들링 공식 참고 문서 https://v3.ko.vuejs.org/guide/events.html 이벤트 핸들링 | Vue.js 이벤트 핸들링 이벤트 청취 v-on디렉티브는 @기호로, DOM 이벤트를 듣고 트리거 될 때와 JavaScript를 실행할 때 사용합니다. v-on:click="methodName" 나 줄여서 @click="methodName"으로 사용합니다. 예시: Add 1 Th v3.ko.vuejs.org 이벤트 핸들러: 어떠한 동작을 하였을때 실행시킬 함수를 정의하여 사용 버튼을 클릭하였을때 사용자가 정의한 핸들러를 호출하는 예제 코드를 작성하였다. 1. 버튼을 클릭하였을 때 이벤트 데이터를 가져오는 핸들러 2. 버튼을 클릭하였을 때 입력한 매개변수 데이터를 가져오는 핸들러 3. 버튼을 클릭하였.. 2021. 7. 29.
리스트 렌더링 공식 참고 문서 https://v3.ko.vuejs.org/guide/list.html 리스트 렌더링을 수행하는 여러 방법이 있다. 1. 배열 데이터를 만들어서 사용하는 방법 2. computed 속성을 이용하여 미리 구현된 데이터를 계산하여 리스트를 만드는 방법 (index값을 이용할 수 있다.) 3. shortid 패키지를 이용하여 2번과 같이 리스트를 구현하는 방법 리스트 렌더링을 하기위한 패키지 설치 명령어: npm i -D shortid 스크립트 부분에 import를 해준다 브라우저 확인 2021. 7. 28.
조건부 렌더링 공식 참고 문서 https://v3.ko.vuejs.org/guide/conditional.html 조건부 렌더링 | Vue.js 조건부 렌더링 v-if v-if 디렉티브는 조건에 따라 블록을 렌더링할 때 사용합니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. Vue is awesome! 1 v-else와 함께 “else 블록”을 추 v3.ko.vuejs.org v-if: 조건이 참 일때 Html 태그를 렌더링 할 때 사용한다. 개발자 도구에서 코드를 확인해도 보이지 않는다. v-show: v-if와 마찬가지로 조건이 참일 때 Html 태그를 보여준다. 개발자 도구에서 코드를 확인할 수 있다. -> display: none으로 설정 되어 있다. 초기에는 v-if를 사용하였다가 사.. 2021. 7. 28.

티스토리툴바