public:computer:vuejs

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
public:computer:vuejs [2021/08/24 21:03] – alexpublic:computer:vuejs [2023/01/03 09:57] (current) – [Install Vue.js] alex
Line 21: Line 21:
   * https://vuejs.org/js/vue.js   * https://vuejs.org/js/vue.js
 </alert> </alert>
 +
 +  * [[https://joycastle.tistory.com/3|Vite + vue3 시작하기]]
 +
 +==== 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   # npm 설치 리스트 확인
 +</shx>
 +  - Vue CLI 삭제 <sxh bash>
 +$ npm uninstall -g vue-cli
 +</sxh>
 +  - vue 프로젝트 생성 <sxh bash>
 +$ vue create <프로젝트 이름>
 +
 +$ cd <프로젝트 이름>
 +$ npm run serve
 +</sxh>
 +  - vuetify 패키지 추가 <sxh bash>
 +$ vue add vuetify
 +</sxh>
 +  - vue-router 설치 <sxh bash>
 +$ vue add router
 +</bash>
 +  - vuex 설치 <sxh bash>
 +$ vue add vuex
 +</sxh>
 +  - axios 설치 <sxh bash>
 +$ vue add axios
 +</sxh>
 +
 +
 +==== Getting Started ====
  
 <grid> <grid>
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를 이용
 +
 +<grid>
 +<col sm="6">
 +<sxh javascript title: parent-component.vue; highlight:[3,13-16]>
 +<template>
 +  <div> 하위 컴포넌트에 데이터 값을 알려줍니다. 
 +    <ChildComponent v-bind:childVaule="parentVaule" /> 
 +  </div> 
 +</template> 
 +
 +<script> 
 +import ChildComponent from "@/components/childComponent.vue"; 
 +
 +export default { 
 +  name: "ParentComponent", 
 +  components: { ChildComponent }, 
 +  data: function () { 
 +    return { 
 +      parentVaule: 20, 
 +    }; 
 +  }, 
 +}; 
 +</script>
 +</sxh>
 +</col>
 +<col sm="6">
 +<sxh javascript title: child-component.vue; highlight: [2,8]>
 +<template>
 +  <div>{{ this.childVaule }} : 상위 컴포넌트로부터 받아온 값</div>
 +</template>
 +
 +<script> 
 +export default { 
 +  name: "ChildComponent", 
 +  props: ["childVaule"], }; 
 +</script>
 +</sxh>
 +</col>
 +</grid>
 +
 +
 +==== Child to Parent 컴포넌트 데이터 전달 ====
 +> Child에서 $emit, Parent에서 v-on을 이용
 +
 +<grid>
 +<col sm="6">
 +<sxh javascript title: child-component.vue; highlight:[2,9-11]>
 +<template>
 +  <button @click="updateParentValue">클릭시 부모의 데이터 값이 증가합니다.</button> 
 +</template> 
 +
 +<script> 
 +export default { 
 +  name: "ChildComponent", 
 +  methods: { 
 +    updateParentValue() { 
 +      this.$emit("childEvent"); 
 +    }, 
 +  },
 +}; 
 +</script>
 +</sxh>
 +</col>
 +<col sm="6">
 +<sxh javascript title: parent-component.vue; highlight:[3,19-22]>
 +<template> 
 +  <div> 
 +    <ChildComponent v-on:childEvent="updateParentValue" /> 
 +  </div> 
 +</template> 
 +
 +<script> 
 +import ChildComponent from "@/components/childComponent.vue"; 
 +
 +export default { 
 +  name: "ParentComponent", 
 +  components: { ChildComponent }, 
 +  data: function () { 
 +    return { 
 +      parentVaule: 20, 
 +    }; 
 +  }, 
 +  methods: { 
 +    updateParentValue() { 
 +      this.parentVaule++; 
 +      console.log(this.parentVaule) // 21, 22, 22, 누를때마다 증가하는 것 확인 가능 
 +    }, 
 +  }, 
 +}; 
 +</script>
 +</sxh>
 +</col>
 +</grid>
 +
 +
 +==== 기타(Sibling, 손자) 컴포넌트 데이터 전달 ====
 +> EventBus를 이용, Vuex 이용.
 +
 +<grid>
 +<col sm="6">
 +</col>
 +<col sm="6">
 +</col>
 +</grid>
 +
 +
 +
 +  * [[https://developerjournal.tistory.com/4|[Vue.js 시작하기] - 컴포넌트 데이터 전달 방법]]
  
 ===== References ===== ===== References =====
Line 692: Line 866:
   * [[https://vuejs.org/v2/style-guide/|Vue.js Ver2 스타일 가이드]]   * [[https://vuejs.org/v2/style-guide/|Vue.js Ver2 스타일 가이드]]
   * [[https://developer.mozilla.org/|MDN 웹문서]]   * [[https://developer.mozilla.org/|MDN 웹문서]]
 +  * [[https://ux.stories.pe.kr/149|개발하면서 경험으로 알게 된 Vuex에서 Store활용 방법]]
 +  * [[https://joshua1988.github.io/vue-camp/ts/vuex.html#actions-%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%8B%E1%85%B4|뷰엑스 타입 정의 방법]]
 +  * [[https://kamang-it.tistory.com/entry/Vue-06%EB%B0%98%EB%B3%B5%EB%AC%B8|[Vue-06]반복문(v-for)]]
 +  * [[https://jess2.xyz/vue/data-undefined-error/|[Vue.js] ❗️TypeError: Cannot read property of undefined]]
 +  * [[https://developerjournal.tistory.com/4|[Vue.js 시작하기] - 컴포넌트 데이터 전달 방법]]
 +  * [[https://question0.tistory.com/26|[NodeJs/VueJs] ref 속성을 이용하여 자식 엘리먼트에 접근해보자]]
 +  * [[http://ccambo.github.io/Dev/Vue/6.How-to-use-vue-property-decorator/|VUE-PROPERTY-DECORATOR 정리]]
 +  * [[https://codingcoding.tistory.com/1254|vue-property-decorator 첫 걸음 (vue js nuxt 대응)]]
 +  * [[https://overface.tistory.com/619|[Vue warn]: Error in v-on handler: ReferenceError is not defined]]
 +  * [[https://changjoopark.medium.com/visual-studio-code%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-vue-js-%EC%95%B1-%EB%94%94%EB%B2%84%EA%B9%85%ED%95%98%EA%B8%B0-6a402fefafe|Visual Studio Code를 이용한 Vue.js 앱 디버깅하기]]
 +  * [[https://dollvin.tistory.com/61|Front-end 간단한 게시판 구현 ( VueJs + Vuetify )]]
 +  * [[https://osc131.tistory.com/122|[vue] vuetify 사용 설정]]
 +  * [[https://github.com/gymcoding/vuetify-admin-template|Vuetify Admin Template 만들기]]
 +
 +
 +
  
  • public/computer/vuejs.1629806638.txt.gz
  • Last modified: 2021/08/24 21:03
  • by alex