본문 바로가기

Vue

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..
Vue/vue 기초 공부하기 2020. 1. 12. Vue 숫자 야구 게임 만들기 https://github.com/loy124/Vue/tree/master/숫자야구 loy124/Vue Vue 공부. Contribute to loy124/Vue development by creating an account on GitHub. github.com {{ result }} 입력 시도: {{ tries.length }} {{ t.try }} {{ t.result }}
Vue/webpack 기본 설정 2020. 1. 10. Vue-webpack 기초 설정하기 노드의 모듈을 만들었다 웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다 . entry 하나로 합칠 파일들을 모아놓는곳 나중에 app.js로 합쳐진다(output을 통해) //뷰를 설치했던것을 import로 가져온다 import Vue from 'vue'; import NumberBaseball from './NumberBaseball.vue'; new Vue(NumberBaseball).$mount('#root'); NumberBaseball.vue {{result}} 시도: {{}} numberBaseball.html dist에 있는 app.js를 만들기 위해서는 app파일을 생성해준다 이를 위해서 build를 위해 scripts test 부분을 "build": "w..
Vue/vue 기초 공부하기 2020. 1. 8. Vue component, props를 활용한 끝말잇기 만들기 컴포넌트는 인스턴스보다는 위에! 스크립트는 div#root보다는 아래에! 컴포넌트는 data: { } 이런방식으로 하는게 아닌 data(){ return{ } } 방식으로 함수를 만들어서 받아주어야 한다. `` 백틱을 활용해서 template를 선언 props를 활용할때에는 선언은 kebab-case( -를 활용한 방식) vue에서 사용할때는 자동으로 camelCase를 활용한다. 컴포넌트를 활용해서 만들었기 때문에 각각 데이터에 대한 간섭이 일어나지 않는다. props를 활용했기때문에 기초로 주어지는 값이 다르다.
Vue/vue 기초 공부하기 2020. 1. 6. Vue로 아주 간단한 사칙연산 계산기 만들기(기초) 변수의 연산 a = b = 덧셈 뺄셈 곱셈 나눗셈 나머지 {{result}}
Vue/vue 기초 공부하기 2020. 1. 5. vue 기초 - 끝말잇기 만들기 끝말잇기 {{word}} 입력 {{result}}

티스토리툴바