도전!개발자 일기

1에이어서 시작. 1에서 만든 todo-app에 체크를 하면, text에 줄이 그어지게 만들기 1. checkbox에 체크를 하면, App.vue에있는 checked : false가 true로 바뀌어야한다. 체크할때마다 바뀌니까 onchane로 toggle //Todo.vue {{todo.text}} 2. toggle 메소드에서 값을 부모한테 보내야하기때문에 $emit사용 $emit('원하는이름', { 보낼값}) checked값은 e.target.checked로 가져올수있다 //Todo.vue methods :{ togglechx(e){ this.$emit('toggle-checkbox',{ id: this.todo.id, checked : e.target.checked }) } } 3.부모(App.vu..

Vue 2022. 7. 19. 15:04

새로운 프로젝트를 만들고, vue create todo npm run serve하여, 띄워주기. App.vue의 기본내용을 지우고 시작. style은 부트스트랩을 사용할 예정 [ 부트스트랩 ] https://getbootstrap.com/ > cdn (cdd only)복사 > public 폴더의 index.html에 title위에 붙여넣으면 끝 App.vue에 기본 todo모양만들기 class로 부트스트랩 style사용 //App.vue Todo App Buy a car input에 글을 작성하면, check box부분이 추가되므로, 이부분을 컴포넌트로 만들어보자. components폴더에 Todo.vue생성 //Todo.vue Buy a car App.vue에 import + 컴포넌트 등록 후 사용 A..

Vue 2022. 7. 19. 13:37

뷰 인스턴스가 처음 만들어지고(created), 죽을때(destroyed)까지를 라이프 사이클이라고 한다. Create beforeCreate 와 created의 차이는 동일하게 함수를 만들고, console.log(this.name)을 출력했을 때 beforeCreate 는 undefined가 뜨고, created는 name이 잘 출력된다. 그 이유는 beforeCreate 는 인스턴스가 생성되기 전이라 this로 데이터에 접근이 불가능하다. Mount beforeMount 와 Mounted mount는 가상돔이 만들어져 조작가능한 상태와 관련이 있는데 beforeMount 와 Mounted에 alert(beforeMount)/ alert(Mounted)를 넣고 새로고침을 하면, beforeMount이..

Vue 2022. 7. 17. 18:40

슬롯이란? 기본 컴포넌트가 있을 때, 추가적으로 html 태그를 작성할 수 있게 해준다. 예) KossieCoder에 추가적인 html 태그 넣기 현재 태그를 넣고싶은 부분에 slot 추가 그리고, 렌더링되는 부분 현재 코지코더는 Home과 About에서 렌더링 되고있는데 About에 작성해봄 코지코더 태그안에 넣고싶은 html태그들을 넣어준다. slot을 여러개 넣고싶을때 = 여러곳에 태그를 추가하고싶다면 slot에 name을 준다. (구역을 보기쉽게 header,body,footer로 나눠보았다.) 그리고 렌더링되는 About.vue로 가서 코지코더 태그에 v-slot으로 해당name을주면, 그 slot자리에 작성한 태그들이 들어간다. 결과 name이 있는 slot은 v-slot =name을써주면되고..

Vue 2022. 7. 15. 13:17

기본 props보내기는 부모 > 자식으로 내려가는 방향인데 이번엔 거꾸로 자식 > 부모에게 보내는 법을 알아보자. Home.vue에 기본 form과 input으로 이렇게 만들고 시작. v-model로 data의 name과 바인딩. //Home.vue This is Home page Name Submit 이 input의 스타일을 바꿔보면 Name Submit 이 스타일을 자주 사용할것이면, 컴포넌트로 만들어 빼주는게 좋다 components파일에 InputField.vue 생성 Home.vue에 작성한 form 안쪽부분을 잘라왔다. //InputField.vue Name Submit 그리고 Home.vue에 이 컴포넌트를 사용해보자. import > components 등록 > 렌더링 //Home.vue ..

Vue 2022. 7. 15. 11:38

현재 Home 페이지와 About 페이지 둘다 title이 있는데, 각각의 페이지에 내용이 다르고 싶을때 기본 틀, 스타일.. 다 동일한테 값만 바꾸고 싶을 때 props 사용 Home About [ props 사용법 ] 1. title부분이 변수니까 중괄호 써주기 {{title}} 2. script에 props 작성 3. 해당컴포넌트가 렌더링되는 부분에서 받기 + 원하는 내용추가(리액트와 동일하게 ) 이렇게도 가능하지만, 가독성을 높이고 + 타입을 미리 정의할 수 있다 title부분에 string타입만 받을것이고, 필수로 값을 넣어줘야해서 required true 추가. type을 string으로 해놓고, 다른 타입을 넣게되면 console에서 에러를 확인할 수 있다. [기본값설정] default를 작..

Vue 2022. 7. 15. 10:44

이전에 컴포넌트를 만들때, Vue.component하고 안에 템플릿 넣고... 이런방식으로 작성했었다. 하지만 vue 파일로 작성하면 조금 다르다. Home.vue을 다시 작성해보면 세가지구역으로 먼저 나누고(템플릿, 스크립트, 스타일) 작성하면 된다. style에 scoped를 주지않으면, 전체에 적용된다. kossie coder 데이터와 스타일을 넣어보면 This is Home page {{ name }} data는 이전과 같이 함수로 가져온다. (obj는 주소를 참조하기때문에) 전체 페이지부분이라 view폴더에 작성하였고, 더 작은단위들은 component폴더에 정리. 예제) 컴포넌트를 하나만들고, 연결해보자. 컴포넌트폴더에 KossieCoder.vue생성 //src/components/Kossie..

Vue 2022. 7. 13. 16:07

뷰 컴포넌트는 인스턴스이며, 그러므로 사용하던 옵션들을 모두 그대로 사용할 수 있고 html엘리먼트를 확장하여 재사용이 가능하다. https://kr.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org [컴포넌트 만들기] 컴포넌트는 전역/지역 두가지 방식으로 만들 수 있다. - 전역 등록 1. 인스턴스가 만들어지기전, 바깥에 Vue.component로 컴포넌트를 생성한다. Vue.component(tagName, options) 2. data나 methods는 기존작성과 동일, html부분을 template를 사용해 작성한다. (template도 jsx문법처럼 하나의 태그에 넣어줘야한다/ 줄바꿈..

Vue 2022. 7. 13. 14:11