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:20] – 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 699: | Line 737: | ||
* 라우트 접근 제한 | * 라우트 접근 제한 | ||
* 스크롤 동작 조작 | * 스크롤 동작 조작 | ||
+ | |||
+ | |||
+ | ===== 컴포넌트 데이터 전달 ===== | ||
+ | |||
+ | ==== 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 714: | Line 866: | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[http:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | |||
+ | |||
+ | |||