내맘대로

https://github.com/vuejs/awesome-vue#components--libraries awesome-vue 에서 외부 컴포넌트 라이브러리들이 모여있음. table, modal 등이 필요하다면,한번 쓱 살펴보고 npm 에서 다운받아서 사용해보아요

vue에서도 부모-자식 형태의 컴포넌트 생성이 가능하다. 긴 말 없다. 바로 예시 코드를 보자. Parent.vue 부모 vue 컴포넌트의 코드는 낯이 익은 코드다. (http://iam-song.tistory.com/46?category=703225 참고) 부모에서는 자식 컴포넌트를 가져왔고,components에 사용할 컴포넌트라 선언을 하고 template에도 선언해 주었다. Child.vue {{mention}} Child.vue 코드도 그닥 다를 것이 없다. 그.런.데.!. 부모의 data 값을 자식에게 어떻게 넘겨줄 것인가? 여기서 부터가 다른점! - 부모의 데이터 자식에게 전달하기 경험 상, 부모 코드 부터 보는 것 보다 자식 코드 부터 보는게 이해하기 편했어서...자식 코드부터 보잣! Chi..

vue 생성 관련 내부 요소를 살펴보았으니,vue component의 라이프 사이클을 휘리릭 정리해보자. 가장 정확하고 잘 설명된 곳 : https://kr.vuejs.org/v2/guide/instance.html#인스턴스-라이프사이클-훅 라이프사이클은 간단히 다음과 같은 순서다. created(vue 객체 생성) > mounted(vue 객체를 dom에 붙인 시점) > destroyed(vue 객체 삭제) created와 destoyed는 이해하겠는데,mounted 시점을 이해하기가 어려웠다. 하여 예시 코드를 보며 살펴보자. 다음과 같이 vue 컴포넌트를 생성하고,각 라이프사이클의 시점에 log를 찍도록 해보았다. * 참고this.$el : vue 컴포넌트의 dom 객체.this._isMounted..

vue의 template 문법의 경우 doc에 설명된 내용을 보고 따라해도 이해하기 쉬울 정도로 간단하다. 심지어 ☆★한글★☆doc url : https://kr.vuejs.org/v2/guide/syntax.html 그래서 vue 선언 시의 script 코드의 내부에 어떤 객체가 있는가아-에 대해 간단하게 정리해보았다. (다른 요소들도 있지만 개발하면서 기본적으로 사용했던 요소들) 기본적으로 vue 선언 시 다음과 같은 형태로 선언하게 되는데.. 1) name name은 그냥 vue 객체의 이름을 의미한다. 이 값은 필수 값이 아닌 선택적인 값 2) components 현재의 컴포넌트에서 다른 컴포넌트를 사용하고자 할 때 사용하고자 하는 컴포넌트를 정의하는 곳 보통 다음과 같이 선언하여 사용한다. 현 ..

지난 글에서 vue-cli를 활용하여 Vue.js 기반의 프로젝트를 생성해보았다. 지난 글 : http://iam-song.tistory.com/45?category=703225 생성된 프로젝트의 구조를 한번 휘리릭 보면 - build : 웹팩으로 빌드하기 위해 필요한 파일 모음 dir- config : 각 환경 별 환경 변수 선언된 파일 모음 dir- node_modules : npm i 으로 설치된 외부 라이브러리 dir- src : 프로젝트 개발을 위한 메인 dir - asset : 이미지 등 css 관련 dir - components : 각 화면에 대한 component 선언 dir - router : 앱 라우터 선언 dir - main.js : Application의 실행을 위한 js 파일 - ..

Vue.js는 2017년 한 해 동안 가장 많이 발전한 프레임워크다. 물론 아직 Angular와 React 보다 못 미친다는 글을 보긴 했지만, Vue.js는 많은 발전을 했고 개발자들에게도 긍정적인 반응을 보이는 가볍고 배우기 쉬운 프레임워크다. (한번 보면 좋을 링크 https://d2.naver.com/helloworld/3259111) 그러면 왜 Vue.js가 좋다는건가?? document가 정말 잘 정리가 되어 있다.그리고 api 문서에 한글 번역(https://kr.vuejs.org/v2/guide/installation.html)이 지원된다. > 이것은 정말 엄청난 이점!!!!!!! 근데 업데이트된 문서들은 한글 번역이 미지원인듯??ㅠㅠ간편하며 배우기 쉽고 가볍다. Vue.js가 얼마나 간단..