Differences

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

--- public:computer:vuejs [2021/12/07 16:01] – alex
+++ public:computer:vuejs [2023/01/03 09:57] (current) – [Install Vue.js] alex
@@ Line 21: / Line 21: @@
   * https://vuejs.org/js/vue.js
 </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>
@@ Line 702: / Line 740: @@
 ===== 컴포넌트 데이터 전달 =====
+==== Props 속성을 이용한 Parent to Child 컴포넌트 데이터 전달 ====
+> Parent는 v-bind, Child는 props를 이용
 <grid>
 <col sm="6">
-<sxh javascript title: parent-component.vue>
+<sxh javascript title: parent-component.vue; highlight:[3,13-16]>
 <template>
-  <div>
+  <div> 하위 컴포넌트에 데이터 값을 알려줍니다.
-    <ChildComponent />
+    <ChildComponent v-bind:childVaule="parentVaule" />
   </div>
 </template>
 <script>
@@ Line 718: / Line 759: @@
   name: "ParentComponent",
   components: { ChildComponent },
+  data: function () {
+    return {
+      parentVaule: 20,
+    };
+  },
 };
 </script>
@@ Line 723: / Line 769: @@
 </col>
 <col sm="6">
-<sxh javascript title: child-component.vue>
+<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>
-  * [[https://developerjournal.tistory.com/4|[Vue.js 시작하기] - 컴포넌트 데이터 전달 방법]]
+==== 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 =====
@@ Line 745: / Line 866: @@
   * [[https://vuejs.org/v2/style-guide/|Vue.js Ver2 스타일 가이드]]
   * [[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 만들기]]