dev_0hoon

- ES6의 여러가지 문법 중 Vue.js 코딩을 간편하게 해주는 문법 학습- const & let, Arrow Function, Enhanced Object Literals, Modules 학습ES6 ?- ECMAScript 2015와 동일한 용어- 2015년은 ES5(2009년) 이래로 진행한 첫 메이저 업데이트가 승인된 해- 최신 Front-End Framework인 Reack, Angular, Vue에서 권고하는 언어 형식- ES5에 비해 문법이 간결해져서 익숙해지면 코딩을 훨씬 편하게 할 수 있음 Babel- 구 버전 브라우저 중에서는 ES6의 기능을 지원하지 않는 브라우저가 있으므로 transpiling이 필요- ES6의 문법을 각 브라우저의 호환가능한 ES5로 변환하는 컴파일러transpil..

https://vuejs.org/examples/#modal Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org vue에서는 공식적으로 지원하는 모달이 있다. 뷰에서는 애니메이션과 트랜지션을 라이브러리단에서 지원한다. 그래서 간단히 class에 맞춰 넣기만 해도 사용할 수 있다. slot을 사용할 때에는 사용하려는 컴포넌트 태그로 감싸서 일반태그에 slot을 넣어주거나, template #namedm로 사용할 수 있다. add 경고! 경고! -->    Tr..

인스턴스가 처음 생성될 때 호출되는 라이프사이클 훅이다. 훅이라 함은 생성되는 시점에 created 안에 있는 내용이 한번 실행이 된다. 조회를 가져올 때에 구조가장 상단에서 app을 가져오고 insert 시에 emit을 보내 상단에서 재조회를 한다.update, remove 역시 똑같다.

vue init webpack-simple vue-todo 간단하게 프로젝트를 설치할 때에 init webpack-simple로 만들어주면 된다. 폴더가 만들어지면 폴더에 들어가npm install 해주면 된다.   헤더에 뷰포트를 넣어줘야 모바일 최적화 사이트로 만들 수 있따. https://www.favicon-generator.org/ Favicon & App Icon GeneratorUpload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.www.favicon-generator.org  파비콘

ID: PW: 로그인 위처럼 인풋에 v-model로 data와 연결해주면 인풋에 입력할 때마다 data가 변경된다. 이제 axios를 다운로드 하자https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코axios-http.com $ npm install axios 설치에는 npm말고도 다양한 방법이 있다. 콘솔창에 넣으면 package.json dependency에서 확인이 가능하다. 추가로 이번에 로..

일단 visual studio code에서 vbc를 쓰면 틀이 만들어 진다.vue vscode snippet을 설치하면 사용할 수 있다.  export default{} 내부에 vda를 치면 data() 함수가 자동으로 만들어진다.

.vue로 시작하는 파일의 구조이다. 바로 표출되는게 아닌 vue로 인해 가공이 된 후에 표출 되게 된다. 이처럼 vue 확장자 파일은 싱클파일컴포넌트라고 한다. vue2는 내용 vue3는 내용 vue2는 가장 상위가 div로 감싸져야 했는데 vue3는 div가 없어도 된다. 파일 명명 규칙 //싱글파일 컴포넌트의 경우 //기존 helloWorld로 읽힘 import 라이브러리 from '라이브러리이름'import 컴포넌트 from './파일위치'import HelloWorld from './components/HelloWorld.vue'1) vue 파일의 이름과 같이 HelloWorld로 대문자가 가장 앞에오며 카멜케이스를 사용한다.2) import 구문은 라이브러리와..

https://cli.vuejs.org/ Vue CLI cli.vuejs.org 공식 사이트 이다. npm install -g @vue/cli-init-g는 글로벌을 뜻한다고 함. global은 OS레벨로 설치가 된거기에 현재 폴더가 아닌 전체 컴퓨터 내에서 사용한다는 뜻이다. npm은 노드패키지매니저vue create vue3-app 설치가 되면cd vue3-app으로 이동npm run serve로 실행한다. 여기서 serve의 의미는 패키지 내의 package.json의 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, serv..