반응형 분류 전체보기130 v-model / form handling (vue.js) Form Handling 1. Capture user inputs {{ JSON.stringify(formValues, null, 2) }} Name 2. Inputs, Textareas {{ JSON.stringify(formValues, null, 2) }} Name Profile Summary 3. Single select dropdown control {{ JSON.stringify(formValues, null, 2) }} Country india vietnam singapore 3. Multi select control multiple옵션을 추가해주면 여러개 선택이 가능하다. ctrl, shift 키랑 같이 눌러주면 복수 선택되어진다. {{ JSON.stringify(formValues, nu.. 2023. 1. 5. Vue Router - Route, Router 차이 $router - Router인스턴스 - 전체에서 딱 하나만 존재함 - 전반적인 라우터 기능을 한다. - router-link요소 없이 페이지 이동 property, method 설명 app 라우터를 사용하는 router vue인스턴스 mode 라우터모드 currentRoute 현재 라우트에 대한 Route 객체 push(location) 페이지 이동 실행 (히스토리 새 엔트리에 추가됨) replace(location) 페이지 이동 실행(히스토리에 쌓이지 않음) go(n) 히스토리에서 n단계 이동 back() 히스토리에서 한 단계 돌아감 forward() 히스토리에서 한 단계 앞으로감 addRoute(routes) 라우터에서 동적으로 라우트 추가 $ Route - Route객체는 현재 활성화 된 라우트의.. 2023. 1. 5. Event handling(vue) methods add method = {{ add(2, 3, 4) }} add method = {{ add(10, 4, 6) }} multiply method = {{ multiply(baseValue) }} EVENT {{ name }} nameChange {{ count }} increase decrease 다중 이벤트 처리 - 한개의 이벤트는 함수형태로 적지 않아도 되지만 다중 이벤트의 경우는 함수형태로 적어줘야 한다. Test Toggle {{ name }} nameChange {{ count }} increase 1 increase 5 decrease 1 decrease 5 2023. 1. 5. v-for Directive 1. Array of strings {{ index }}, {{ name }} = 0, 가 1, 나 2, 다 2. Array of object {{ name.firstName }}, {{ name.lastname }} //화면 결과 원영, 강 봉구, 이 수연, 최 3. Array of arrays {{ actor.name }} {{ movie }} //화면 결과 actor: 송혜교 그세사 태양의후예 actor: 송중기 부자집막내아들 빈센조 5. Block of HTML elements value속성만: {{ value }} //화면 결과 value속성만: lili value속성만: 32 value속성만: developer 6. Object key value pairs value:{{ value }} ke.. 2023. 1. 5. 이전 1 ··· 10 11 12 13 14 15 16 ··· 33 다음 728x90 반응형
