개발(라이브러리,프레임워크)79 vue CLI/ Webpack vue CLI 도구 vue CLI는 vue.js 애플리케이션을 빠르게 개발할 수 있는 관련된 긴능을 모두 제공하는 vue.js 개발도구이자 시스템 > 웹팩이라는 모듈번들러를 사용함 vue.config cli서비스는 모두 캡슐화 되어있기 때문에 내부 웹팩에 대해 설정파일을 직접 설정 못함 > 그래서 웹팩 설정을 위해 vue.config.j라는 파일을 프로젝트 내부에 작성함 vue-CLI npm i -g @vue/cli@3.2.1cli 최신버전 설치 3.2.1설치할거임 (현재 가장최신은 4.5.x이다.) vue create vue-news 2.xx설치할때 vue init webpack-simple vue-news요래썼었음 default 선택 npm run serve로 실행해 보기 3.xx와 2.xx의 차이점.. 2020. 5. 19. Router란? Router www.website/ user user를 vue router 가 캐치를 함 user 이름이 있는지 찾고 user 에 매칭 시켜놓은 user component를 찾음 여러가지 조합으로 이루어져 있는 user component 를전달 router 를 그것을 화면에 뿌려줌 라우터가 주소를 받아서 주소에 맞는 컴포넌트 찾아서 값을 뿌려줘야하는데 그 값을 선언해 줘야 한다. router.js Vue.use(Router); export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/main', name: 'main', component: Main, children: [ { path: 'happy.. 2020. 5. 17. event bus & Mixin event bus 형제끼리 통신 event bus > 이벤트를 버스를 태워서 보냄 빈 이벤트 이벤트 객체를 만들어서 이벤트 객체 통해서 컴포넌트간의 데이터를 전달하는 것 ex1> bus.js import Vue from 'vue'; export default new Vue(); //빈 이벤트 객체 특정 vue import bus from './utils/bus.js'; .... created(){ bus.$emit('start:spinner'); } App.vue import bus from './utils/bus.js'; //// ////// data(){ return { lodingStatus: false, }; }, methods: { startSpinner(){ this.loadingStatus .. 2020. 5. 16. Props & $emit Props 부모 > 자식으로 전달해주는 프로퍼티 v-bind 사용 // v-bind 생략 nameOfChild="name" 변수명 선언 = 넣어줄 값 => name 은 data() 에서 선언을 해주어야 한다. > 부모 컴포넌트가 가지고 있는 name 값을 nameOfChild 에 넣어줄게 자식 컴포넌트에서는 값을 받아야하는데 > 그것이 props로 사용된다. props 는 array 형태로 사용됨 //부모.vue props:['nameOfChild'], 자식에서 이 형태로 받음 > string object 등 어떤값도 전달 가능 //부모.vue {{ nameOfChild.name }} {{ nameOfChild.familyName }} 순간적으로 어떤 값을 받아와야하는지 모를때 > props 가 어떤 형.. 2020. 5. 15. 이전 1 ··· 15 16 17 18 19 20 다음 반응형
