Vue12 1-5. 이벤트 클릭 이벤트button @click="increaseCounter">Add 1button> change 이벤트 select name="" id="" v-on:change="changeCity($event)" v-model="selectedCity" > ===도시선택=== {{ city.title }} {{ dong.dongTitle }} dong.cityCode === this.selectedCity )" > {{ dong.dongTitle }} keyup (ent.. 2024. 9. 10. 1-4. 데이터 바인딩 문자열 단방향 바인딩 HTML String 단방향 바인딩 데이터 양방향 바인딩 (input, select)v-model input SELECT CHECKBOX RADIO v-bind: HTML 태그 attribute 바인딩 v-for : 반복문 사용 class 속성 바인딩div v-bind:class="{ 'text-red': hasError, active: isActive }"> style 바인딩 2024. 9. 9. 1-3. 라우터 1. src/main.js - 라우터 사용 등록 2. src/router/index.js - 라우팅 설정 등록 3. App.vue - 라우팅 페이지 설정 4. 해당 라우팅 url 전달시 보여줄 페이지 컴포넌트 생성 2024. 9. 9. 1-2. 설치, 프로젝트 생성 및 구조 이해하기 설치, 프로젝트 생성 및 구조 이해하기 Vue가 설치되어 있는지 확인vue --version Vue/Vue CLI 설치npm install -g vue // -g 옵션은 폴더 내에서만이 아니라, 컴퓨터 전체에서 사용하다록 글로벌로 설치하겠다는 옵션임npm install -g @vue/cli // Vue 버전 업데이트npm update -g @vue/cli Vue 개발 편의성 올려주는 추천 확장 프로그램 프로젝트 정보package.json main.js - npm run serve시 제일 먼저 실행되는 파일위 main.js 파일에서 createApp(App).mount('#app')은 App.vue 파일의 html을 index.html 에서 id가 app인 위치 아래 마운팅하겠다는 의미이다... 2024. 9. 9. 이전 1 2 3 다음
