VuejsStudy

https://velog.io/@ywoosang/Node.js-%EC%84%A4%EC%B9%98https://askubuntu.com/questions/1088662/npm-depends-node-gyp-0-10-9-but-it-is-not-going

template에다가는 HTML, CSS 하던 것 처럼 짜면 된다.JS 데이터를 HTML에 꽂아 넣는 문법을 Data Binding이라 한다.script 부분에 data() 라는 곳에 잘 넣어두면 데이터를 보관하면서 꺼내 쓸 수 있다.데이터는 object 자료형으로 저

이렇게 되면 Home이 3번 반복된다.갖고있는 데이터로 집어넣고 싶다면 ??menus라는 데이터에 정의된 데이터를 순서대로 출력할 수 있다.vue 반복문은 array/object 집어넣기가 가능하고 해당 자료안의 데이터 개수만큼 반복된다.위에서 "작명" 이라고 한ㄷ 부

v-on:click 을 사용하면, vue 버전의 click 이벤트 핸들러 실행이 가능하다.vue에서 함수를 만들 때, data를 사용하려면 this.(data명) 임에 주의한다.이처럼 하면 동일한 기능을 수행할 수 있다.isModalOpen 과 같은 State를 담는다

어떤 data를 갖고 있는 .js 파일이 있다고 가정해보자.export default를 사용하면 해당 변수가 export 가능해진다.다른 .js or App.vue 파일을 보면 import 해서 사용할 수 있다.이런 식으로 여러개 export 할 수 도 있다.{ }를

HTML이 복잡해 보이면 Coponent를 만들어 쓴다.VUE파일을 만든다.<열고 엔터치면 vue template이 완성된다.작성한다.vue 파일 import 해오고 등록 후 쓰면된다.HTML을 한 단어로 줄이고 싶으면 Vue 파일을 만들어서 HTML 쑤셔넣고 i

props를 사용했을 때, 부모의 데이터를 자식이 사용했다.그런데, click과 같은 이벤트에서 ready-only 데이터를 변경할 수 없었다.부모의 데이터를 바꾸고 싶으면 커스텀 이벤트를 사용한다.자식에서 해당 이벤트를 발생 시키고 싶을 때, emit을 이용해 부모에

이는 인풋을 모두 적고 다른 영역을 찍었을 때 발생하는 이벤트input 하나하나가 들어갈 때마다 발생하는 이벤트v-model 쓰면 위 이벤트를 쓰지 않고도 data에 값을 박아줄 수 있다.input type에는 select, textarea, checkbox 여러 위젯

input에 문자입력하면 경고문을 띄우고 싶다 ? wathcerdata를 감시하는 함수다.watch : { 감시할데이터이름() {} }month라는 데이터가 변할 떄 마다 코드가 실행된다.a는 month라는 data일 것이다.만약 뒤 (a, b)를 붙였으면 b는 이전

array.sort(function() {})문자 정렬array.sort(function(a, b) { return a - b })숫자 정렬method를 지정하고, onclick과 같은 곳에서 지정하면 된다.\[...data]는 copy 본을 담는 것이다. sort하는

컴포넌트들은 웹페이지에 표시되기까지 일련의 Step을 거치는데 그 Step을 라이프사이클이라고한다.create step : data만 존재하는 단계mount step : <template>에 있던 것을 실제 HTML로 바꿔준다.컴포넌트 생성 step : index

vue3 버전과 호환되는 라우터라우터 라이브러리 만든 사람이 만들어놓은 form이다.createRouter : 라우터 생성 함수component 대신에 router-view로 지정해서 보여줄 수 도 있다.props는 여기다 그대로 하면된다. 이전에 <ListPag

dist 폴더 안에 파일이 생긴다 ㄷㄷbuild 시 파을 사이즈를 존나 압축한다고 한다;Github Pages에 배포 !

위 처럼 import 해서 사용 가능하다.props 두번 하면 된다.부모에 있는 손자 뻘 컴포넌트로 데이터 바인딩이 가능하다는 뜻이다.해당 string 중간에 변수를 넣고 싶으면 \`\` 이후 $기호로 넣어주면된다.

서버에서 데이터를 가져와서 HTML로 보여준다.더 보기 버튼을 만들어서 가져와보자 ! 이를 위해서 ajax를 알아야한다.Get, POSTPOST : 서버로 데이터 보낼 때GET : 서버에서 데이터 가져올 때Ajax : GET, POST 시 새로고침 발생, ajax는 새

App.vuestep 변수를 추가ContainerPage.vuestep 마다 다른 화면 보여주게하면된다.

부모 Component -> 자식 Component로 데이터를 보내는 문법props를 안써도 직관적으로 코드를 짤 수 있다.Container PageFilterBox Pagetag 안에서 데이터 바인딩 시에만 사용 가능하다.부모가 자식의 데이터를 활용할 때에도 유용하다

데이터 주고 받기 어렵다는 것을 이전 챕터들을 하면서 깨달았다..하위 컴포넌트로 전송은 props상위 컴포넌트 전송은 custom event or mitt이게 뭐하는 짓인가컴포넌트들이 데이터를 공유할 수 있는 javascript fileData를 몰아 넣는다.그렇다고

웹사이트를 앱으로 발행project build 시, manifest.json, service-worker.js 생성된다.service-worker.js 가 하는 일인터넷 없어도 동작하도록 해준다.precache-manifest 라는 걸 보면 하드에 어떤걸 저장할지를 알