Web/Vue.js5

• Vue.js 시작하기 - 배운내용 정리 안녕하세요. https://www.inflearn.com/course/Age-of-Vuejs/dashboard Vue.js 시작하기 - Age of Vue.js - 인프런 Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워�� www.inflearn.com 인프런에 올라와있는 캡틴판교님의 Vue.js 시작하기를 마무리하면서 마지막 내용정리를 하겠습니다. 강좌를 들으면서 노트한 내용들은 깃헙에 올려두었습니다. Vue.js, React.js 왜 기존의 javascript 를 놔두고 이것을 사용할까 라는 생각이 들었습니다. 가장 큰 이유는 Reactivity 라고 .. Web/Vue.js 2020. 7. 30.

• $emit 자식컴포넌트에서 부모컴포넌트로 보내는 신호 $emit // User.vue (부모) // UserEdit.vue (자식) // 오류가 발생한다. 위와 같은 오류 발생 시에는 그 값을 자식컴포넌트 내에서 가공한 이후에 그 가공된 값을 텍스트필드에 넣어주어야한다. 자식컴포넌트 내에 User라는 오브젝트를 만들어주고, create를 이용해서 받아온 props를 이 컴포넌트가 생성될 때 UserEdit 컴포넌트 내에있는 User 오브젝트에 그 값들을 넣어서 사용해보겠습니다. 부모 컴포넌트 내에서 자식컴포넌트로 props 를 통해서 name 이라는 값을 전달했다. 이 name을 자식컴포넌트 내에서는 자기의 데이터를 user라는 오브젝트 내에 집어넣었고, user.name 이라는 값을 텍스트 필드에 연결하였습니다... Web/Vue.js 2019. 9. 18.

• 

  부모-자식 간에 데이터 전달 Props 컴포넌트들 간에 데이터를 주고받을 수 있는 방법에 대해 알아보겠습니다. User 컴포넌트 이름: {{ name }} // {{ name }} 을 data() {} 에서 가져온다. 이름 변경 // v-btn은 vuetify 문법, @click 시 methods의 changeName() 호출 부모(User.vue)가 가지고 있는 정보를 {{ name }} 을 자식(UserDetail.vue, UserEdit.vue)에게 전달해주는 것을 Props 부모 컴포넌트에서 자식 컴포넌트로 어떤 정보를 넘겨줄 때 사용합니다. Props 부모(User.vue)에게서 전달하고자 하는 값을 왼쪽에서 자식에게 선언되는 Props 의 변수명이 선언되고, 그 변수에 어떤 값을 넣어줄거냐? 라는 값이 오른쪽에 적히게 된다. 부모 .. Web/Vue.js 2019. 9. 13.

• 

  CLI 와 파일에 대한 설명, Vuetify 설치, 컴포넌트 생성 및 사용 node_modules 안에는 많은 폴더들이 들어있다. 2.x 대 버전에서는 원래는 npm instlal 이라는 명령어를 통해서 node_module을 설치해야 한다. 자바스크립트 프레임워크는 여러가지 부품을 가지고 조립을 한다라고 생각하면 되고, node_modules는 그 부품들을 모아놓은 곳이라고 생각하면 된다. node_modules 를 설치할게 무엇이고, 버전정보를 적어두는 곳이 package.json 이라고 생각하면 된다. 어떤 프로젝트는 A라는 모듈이 필요하고, ~버전을 사용중이다 라는 걸 정의해주고 npm run serve를 통해서 로컬 호스트 8080 포트에 프로젝트를 올릴 수 있따. public 폴더 index.html : 기본이 되는 .html src : 폴더 안에 컴포넌트들과 vue.. Web/Vue.js 2019. 9. 12.

• 

  설치하기 설치하기 Vue (사전에 node.js 가 설치되어있어야 된다.) > npm install -g @vue/cli // vue cli 설치하기 > vue --version 으로 설치되었는지 확인이 가능하다. Vuetify를 작업하기 위한 폴더를 생성하고, Visual Studio Code로 폴더를 지정하고, 터미널에서 개발 환경에 대한 디테일한 것들을 선택할 수 있다. 스페이스로 선택하고, 다음으로 넘어갈 땐 Enter 타이핑 > vue create [Name] > Manually select features > > ESLint with error prevention only > Lint on save > In package.json > n 위 처럼 명령을 작성하면 설치가 시작된다. 설치가 완료되면 사진과.. Web/Vue.js 2019. 9. 12.