Vue 이벤트 - day3
Vue 이벤트 Vue에서 이벤트를 다루는 방법에 대하여 알아보겠습니다. Vue에서는 이벤트를 인라인 이벤트 처리방법과 이벤트 메서드 헨들링 방법이 존재합니다. 1. 인라인 이벤트 Vue의 이벤트의 경우에는 v-on디렉티브를 통해 이벤트를 처리할 수 있습니다. 가장 많이 사용되는 Click이벤트를 구현하여 보겠습니다. 굳 굳 클릭 이벤트의 경우 버튼을 클릭시 변수good의 값이 +1 되는 이벤트를 작성한 코드입니다. 위와 같이 인라인 이벤트의 경우 클릭이벤트에서 원하는 코드를 입력하여 직접 실행하도록 합니다. 하지만 인라인 이벤트의 경우 한계점이 존재합니다. 어떠한 한계점이 존재할까요? 그렇습니다. 이벤트의 코드가 변경되거나 로직이 복잡해졌을 경우입니다. 위에 문제점을 해결 하기 위해 우리는 vue에서는 ..
Vue 디렉티브 - day2
Vue 디렉티브 디렉티브란 ? HTML 안에서 v-접두사를 사용하는 속성들을 의미합니다. 화면의 요서를 더 쉽게 조작하기 위하여 사용하는 기능들을 의미합니다. 1. v-text 해당 HTML 태그에 text를 표시 할 경우 사용됩니다. innerText와 동일한 기능을 수행합니다. 2. v-if 지정한 뷰데이터 값에 따라 해당 HTML 을 표시하거나 표시하지 않습니다. JAVASCRIPT의 if구문과 같은 방법 사용 가능 flag 값이 1 일 경우 표시 하겠습니다 flag 값이 2 일 경우 표시 하겠습니다 그 외의 값 일 경우 표시하게습니다. 해당 코드를 실행 시킬시 flag값에따라 표시되는 text가 다르다는 것을 확인 할 수 있습니다. 3. v-for 지정한 뷰 데이터 개수만큼 해당 HTML을 반복출..
Vue 환경 설정 - day1
개발 환경 설정 1. Visual Studio Code : 코드 편집 툴 1) 설치 사용 가능한 코드 편집 프로그램을 설치 하여줍니다. [비쥬얼 스튜디오] : https://code.visualstudio.com/ 추가 확장 프로그램 Auto close Tag : 자동 태그 닫기 Live Server : 코딩을 실시간으로 확인-적용시켜 작업하기 편리 Prettier : 코드 자동 정렬 ESLint : 소스코드를 분석해 문법 에러 vscode-icons : VSCode 내 파일의 아이콘을 설정하여 무슨 파일인지 한번에 파악가능 Vetur : 문법 강조, vue.js 파일 코드의 하이라이팅 지원 Vue VSCode Snippets : 코드 조작 지원, vue.js 파일 초기 구성 생성 2. Node.js N..