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/12/07 16:01] – 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 702: | Line 740: | ||
===== 컴포넌트 데이터 전달 ===== | ===== 컴포넌트 데이터 전달 ===== | ||
+ | |||
+ | ==== Props 속성을 이용한 Parent to Child 컴포넌트 데이터 전달 ==== | ||
+ | > Parent는 v-bind, Child는 props를 이용 | ||
< | < | ||
<col sm=" | <col sm=" | ||
- | <sxh javascript title: parent-component.vue> | + | <sxh javascript title: parent-component.vue; highlight: |
< | < | ||
- | <div> | + | < |
- | < | + | < |
</ | </ | ||
- | </ | + | </ |
< | < | ||
Line 718: | Line 759: | ||
name: " | name: " | ||
components: { ChildComponent }, | components: { ChildComponent }, | ||
+ | data: function () { | ||
+ | return { | ||
+ | parentVaule: | ||
+ | }; | ||
+ | }, | ||
}; | }; | ||
</ | </ | ||
Line 723: | Line 769: | ||
</ | </ | ||
<col sm=" | <col sm=" | ||
- | <sxh javascript title: child-component.vue> | + | <sxh javascript title: child-component.vue; highlight: [2,8]> |
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | export default { | ||
+ | name: " | ||
+ | props: [" | ||
+ | </script> | ||
</ | </ | ||
</ | </ | ||
</ | </ | ||
- | * [[https:// | ||
+ | ==== 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 745: | Line 866: | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[http:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | |||
+ | |||
+ | |||