본문 바로가기

Vue/vue 기초 공부하기

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/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}}
Vue/vue 기초 공부하기 2020. 1. 5. vue 구구단 만들기, ref 활용하기 Vue 나 React는 그동안 있던 View 부분과 Data를 따로 관리해서 일치시켜주는게 아닌 Data를 기준으로 View를 그려나간다. 버튼이 눌릴때마다 first, second, value, result 값 4가지가 변동되게 만들었으며 input에 커서를 주기위해서는 data 관리라고 판단하기는 어려워서 $refs를 활용해 직접 접근해서 제어해준다. ($refs를 남발하면 좋지 않으며 특히 데이터관리에 $refs를 활용하면 view부분과 데이터의 일치성이 사라진다) {{first}} 곱하기 {{second}}는? 입력 {{result}}
Vue/vue 기초 공부하기 2020. 1. 5. v-if v-else에 대해 공부하기 v- if와 v-else는 근접해야하며 v - 로 표시되는 형태 안에는 조건및 자바스크립트 문법이 사용가능하다 간단한 if else문을 v-형태를 사용해서 바로바로 적용 가능하다 스크립트부분 el: element 줄임말로 el, data, methods 는 지정된 예약어로써 변경이 불가능하나 그 안에 들어가는 것들은 모두 변수및 함수이기때문에 변경이 가능하다. 좋아요 눌렀음 like
Vue/vue 기초 공부하기 2019. 12. 22. Vue 컴포넌트 만들기 Vue.component를 활용해 컴포넌트를 생성한다( #app안에 new Vue가 포함되어 있어야 한다). v-for을 활용해 groceryList 안에 item을 반복문으로 뿌려주고 component를 props로 지정해준다(프롭스는 부모쪽에서 자식쪽에 값을 넘겨줄때 사용한다) 부모 컴포넌트에는 data GroceryList 데이터를 선언해준다. 해당 데이터들을 todo에 바인딩 해준다.(부모쪽의 데이터를 자식쪽에 데이터를 넘겨준다) 각 key값을 item.id를 지정해준다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 4..
Vue/vue 기초 공부하기 2019. 12. 21. Vue 기초(cdn 활용및 v-bind, v-if, v-for, v-on, v-model 사용하기 ) v-if : 조건문, 말그대로 if문을 활용해 사용한다 true일때 보여지고 false일때 보이지 않게 하는등으로 활용할 수 있다. v-for : 반복문, 배열안의 데이터들을 v-for을 활용해서 한번에 뿌려줄수 있다. v-on : 이벤트리스너를 추가한다 v-on:click 은 클릭 이벤트를 추가한다. v-model: 앱의 상태를 양방향으로 바인딩한다. input을 통해 입력시 바로 p 태그에 나타낸다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60..

티스토리툴바