Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
public:computer:vuejs [2021/08/24 21:03] – alex | public:computer:vuejs [2023/01/03 09:57] (current) – [Install Vue.js] alex | ||
---|---|---|---|
Line 21: | Line 21: | ||
* https:// | * https:// | ||
</ | </ | ||
+ | |||
+ | * [[https:// | ||
+ | |||
+ | ==== Install Vue.js ==== | ||
+ | - Vue CLI 설치 <sxh bash> | ||
+ | $ npm install -g @vue/cli | ||
+ | # or | ||
+ | $ yarn global add @vue/cli | ||
+ | # or | ||
+ | $ yarn dlx @vue/clie | ||
+ | |||
+ | $ vue --version | ||
+ | $ npm list -g --depth=0 | ||
+ | </ | ||
+ | - Vue CLI 삭제 <sxh bash> | ||
+ | $ npm uninstall -g vue-cli | ||
+ | </ | ||
+ | - vue 프로젝트 생성 <sxh bash> | ||
+ | $ vue create < | ||
+ | |||
+ | $ cd < | ||
+ | $ npm run serve | ||
+ | </ | ||
+ | - vuetify 패키지 추가 <sxh bash> | ||
+ | $ vue add vuetify | ||
+ | </ | ||
+ | - vue-router 설치 <sxh bash> | ||
+ | $ vue add router | ||
+ | </ | ||
+ | - vuex 설치 <sxh bash> | ||
+ | $ vue add vuex | ||
+ | </ | ||
+ | - axios 설치 <sxh bash> | ||
+ | $ vue add axios | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== Getting Started ==== | ||
< | < | ||
Line 656: | Line 694: | ||
^ 내비게이션 가드의 매개변수 | ^ 내비게이션 가드의 매개변수 | ||
+ | ^ 매개 변수 | ||
+ | | to | 이동 후의 라우트 객체 | ||
+ | | from | 이동 전의 라우트 객체 | ||
+ | | next | 내비게이션 해결 전용 콜백 함수 | ||
^ 라우트 단위 가드 | ^ 라우트 단위 가드 | ||
+ | ^ 메서드 이름 | ||
+ | | beforeEnter | ||
^ 전역 가드 | ^ 전역 가드 | ||
+ | ^ 메서드 이름 | ||
+ | | beforeEach | ||
+ | | beforeResolve | ||
+ | | afterEach | ||
^ 컴포넌트 가드 | ^ 컴포넌트 가드 | ||
+ | ^ 메서드 이름 | ||
+ | | beforeRoutEnter | ||
+ | | beforeRouteUpdate | ||
+ | | beforeRouteLeave | ||
* 내비게이션 해결 흐름 | * 내비게이션 해결 흐름 | ||
Line 677: | Line 728: | ||
- DOM 변경이 트리거 됨 | - DOM 변경이 트리거 됨 | ||
- beforeRouteEnter의 next로 전달된 콜백 호출 | - beforeRouteEnter의 next로 전달된 콜백 호출 | ||
+ | |||
+ | * 페이지 이동 효과 적용 | ||
+ | * 간단한 트랜지션 | ||
+ | * 비동기 처리를 포함한 트랜지션 | ||
+ | * 자주 사용하는 기능과 옵션 | ||
+ | * 이동 전에 컴포넌트 읽어 들이기 | ||
+ | * 비동기로 컴포넌트 읽어 들이기 | ||
+ | * 라우트 접근 제한 | ||
+ | * 스크롤 동작 조작 | ||
+ | |||
+ | |||
+ | ===== 컴포넌트 데이터 전달 ===== | ||
+ | |||
+ | ==== Props 속성을 이용한 Parent to Child 컴포넌트 데이터 전달 ==== | ||
+ | > Parent는 v-bind, Child는 props를 이용 | ||
+ | |||
+ | < | ||
+ | <col sm=" | ||
+ | <sxh javascript title: parent-component.vue; | ||
+ | < | ||
+ | <div> 하위 컴포넌트에 데이터 값을 알려줍니다. | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | import ChildComponent from " | ||
+ | |||
+ | export default { | ||
+ | name: " | ||
+ | components: { ChildComponent }, | ||
+ | data: function () { | ||
+ | return { | ||
+ | parentVaule: | ||
+ | }; | ||
+ | }, | ||
+ | }; | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | <col sm=" | ||
+ | <sxh javascript title: child-component.vue; | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | export default { | ||
+ | name: " | ||
+ | props: [" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== Child to Parent 컴포넌트 데이터 전달 ==== | ||
+ | > Child에서 $emit, Parent에서 v-on을 이용 | ||
+ | |||
+ | < | ||
+ | <col sm=" | ||
+ | <sxh javascript title: child-component.vue; | ||
+ | < | ||
+ | <button @click=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | export default { | ||
+ | name: " | ||
+ | methods: { | ||
+ | updateParentValue() { | ||
+ | this.$emit(" | ||
+ | }, | ||
+ | }, | ||
+ | }; | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | <col sm=" | ||
+ | <sxh javascript title: parent-component.vue; | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | import ChildComponent from " | ||
+ | |||
+ | export default { | ||
+ | name: " | ||
+ | components: { ChildComponent }, | ||
+ | data: function () { | ||
+ | return { | ||
+ | parentVaule: | ||
+ | }; | ||
+ | }, | ||
+ | methods: { | ||
+ | updateParentValue() { | ||
+ | this.parentVaule++; | ||
+ | console.log(this.parentVaule) // 21, 22, 22, 누를때마다 증가하는 것 확인 가능 | ||
+ | }, | ||
+ | }, | ||
+ | }; | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== 기타(Sibling, | ||
+ | > EventBus를 이용, Vuex 이용. | ||
+ | |||
+ | < | ||
+ | <col sm=" | ||
+ | </ | ||
+ | <col sm=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | * [[https:// | ||
===== References ===== | ===== References ===== | ||
Line 692: | Line 866: | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[http:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | |||
+ | |||
+ | |||