반응형 분류 전체보기137 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. Conditional Rendering(v-if, v-show) Conditional Rendering [v-if] [v-else] [v-else-if] [v-show] The number is zero The number is negative The number is positive Not a number conditionally render multiple elements vishwa codevolution vue div로 감싸져있는 h2요소들이 있다. 해당 코는 콘솔에서 확인해보면 콘솔에서도 마찬가지로 div안에 h2 요소들이 있는 것을 확인할 수 있다. 하지만 div대신 template으로 감싸게 된다면 콘솔에 찍히는 모양이 다르다. vishwa codevolution vue dom에 대한 추가된 사항이 없이 h2요소만 찍히게 되는 것을 확인할 수 있다. [v.. 2023. 1. 5. 이전 1 ··· 12 13 14 15 16 17 18 ··· 35 다음 728x90 반응형
