본문 바로가기

Vue/vue 기초 공부하기

Vue/vue 기초 공부하기 2020. 3. 21. vue-router API 이해해보기 Vue router 라이브러리를 사용하기 전에 Vue router가 어떤것인지에 대한 개념에 대한 공부가되었다. import Vue from "vue"; import App from "./App.vue"; const Login = { template: "Login Page" }; const routes = { "/": App, "/login": Login }; new Vue({ el: "#app", computed: { VueComponent() { return ( routes[window.location.pathname] || { //url 경로를 반환 template: "Page not found " } ); //path경로에 해당하는것을 routes에서 찾고 반환 } }, render(h) { re..
Vue/vue 기초 공부하기 2020. 3. 8. MVVM 모델의 ViewModel에 다해 알아보기 Model - View - ViewModel (MVVM) Object.defineProperty(viewModel, 'model', { get() { return model;}, set(value){ model = value; h1.innerHTML = model; } }); 해당 함수를 활용하면 model의 값이 바뀔때마다 바로 view도 변하게 된다
Vue/vue 기초 공부하기 2020. 2. 22. Vue로 틱택토만들기(Vuex) https://github.com/loy124/Vue/tree/master/틱택토Vuex loy124/Vue Vue 공부. Contribute to loy124/Vue development by creating an account on GitHub. github.com store을 활용해서 데이터를 모두 vuex store에 저장하고 root파트인 TicTacToe.vue에서 해당 데이터를 불러오는 방식이다 store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); //Vue.use 를 사용할때마다 $axios등 기능들이 추가되는 방식 //mutation의 이름들을 변수로 빼고 export 한다 //오타확률을 줄이기위해 이렇게 변수로 ..
Vue/vue 기초 공부하기 2020. 2. 22. Vue로 틱택토 만들기(EventBus 활용) https://loy124.tistory.com/185 Vue로 틱택토 만들기( $root.data를 활용) https://github.com/loy124/Vue/tree/master/틱택토 loy124/Vue Vue 공부. Contribute to loy124/Vue development by creating an account on GitHub. github.com 일일히 props에 데이터를 넘겨주는 방식에 굉장.. loy124.tistory.com 위 코드와 거의 유사하나 EventBus를 활용하여 중앙 통제 함수를 만들어서 활용한다 EventBus는 함수를 중앙통제 관리하고 Vuex는 데이터를 중앙통제 관리하는점이 차이라고 한다 빈 껍데기인 EventBus.js를 만들어준다 import Vue ..
Vue/vue 기초 공부하기 2020. 2. 22. Vue로 틱택토 만들기( $root.data를 활용) https://github.com/loy124/Vue/tree/master/틱택토 loy124/Vue Vue 공부. Contribute to loy124/Vue development by creating an account on GitHub. github.com 일일히 props에 데이터를 넘겨주는 방식에 굉장한 불편함이 따르기때문에 props로 값을 넘겨주는 방식 + Vue 자체에서 $root 를 활용하여 최상단의 데이터값을 가져올수 있는 방식이 활용되었다 root쪽 Tictactoe.vue :table-data (v-bind:table-data) 를 활용하여 tableData의 값을 자식 컴퍼넌트 table-component에 넘겨준다 {{ turn }}님의 턴입니다. {{ winner }}님의 승리..
Vue/vue 기초 공부하기 2020. 1. 26. 로또 번호 생성 프로그램 만들기 (props, component 활용) https://github.com/loy124/Vue/tree/master/로또 loy124/Vue Vue 공부. Contribute to loy124/Vue development by creating an account on GitHub. github.com props는 부모컴포넌트에서 자식 컴포넌트에 값을 전달할때 사용한다 v-bind:number(어트리뷰트)를 넘겨준다 자식컴포넌트에 넘겨주면 props: ['number'] 혹은 props:{ number : Number(자료형 설정, Boolean 등등) } LottoGenerator.vue 당첨 숫자 보너스 한번 더! 뷰쪽을 담당하는 LottoBall.vue {{ number }}
Vue/vue 기초 공부하기 2020. 1. 19. Vue 가위바위보 게임 만들기 (vue-LifeCylce 활용) https://github.com/loy124/Vue/tree/master/가위바위보 loy124/Vue Vue 공부. Contribute to loy124/Vue development by creating an account on GitHub. github.com 바위 가위 보 {{ result }} {{ score }}점
Vue/vue 기초 공부하기 2020. 1. 12. 반응속도 측정 게임 만들기(v-if, v-show, computed 활용) https://github.com/loy124/Vue/tree/master/반응속도체크 loy124/Vue Vue 공부. Contribute to loy124/Vue development by creating an account on GitHub. github.com computed를 사용하는 이유 : data에 있는 간단한 데이터를 가공해서 사용할때 computed를 활용한다.( 값이 캐싱이되서 사용한다, 새로 불러낼 필요없이 캐싱된 average를 활용해서 시간 단축에 도움이 된다. 즉 성능 최적화) v-show : false 일경우 display none true 일경우 display 된다 레이아웃 구성을 할때 생각을 하고 사용하면 된다 v-if인 경우는 아에 태그 자체가 존재하지 않게된다 v-sh..

티스토리툴바