vue.js

노드, npm 버전 확인하기설치하기npm install -g @vue/cl후 브라우저에서 http://localhost:8080/ 입력하면열림. 여기서 개발자 도구 열기는 같다

1. 싱글파일 컴포넌트로 개발 시작하기 2. vue 컴포넌트 파일 등록하기

vue create formcd vue formnpm run seveApp.vue 내용 모두 지우기scf로 기본 형식 자동 불러오기(난 안먹힘...)

vetur 설치이건 이 강의 보면서...webpack 만드는게 나을거같아서 강의처럼 만들기 \+++ TodoHeader.vue 만들기 일단 이렇게 만든다음에컴포넌트들 등록index.htmlsetItem 공식 문서todoInput.vue

todoList

AS-ISTO-BEApp.vue에서 아래 코드 추가,TodoList.vue에서 위 코드 삭제TodoList.vue에서 아래 코드 추가App.vue에서 아래 코드로 수정TodoImput.vue에서 아래 코드 지우기App.vue에서 아래 태그로 수정해서 추가하기

TodoInput.vue추가 및 수정Modal.vueTodoInput.vueModal.vue

Es6를 지원하지 않는 브라우저가 있으므로 tanspiling이 필요ㄸ새로운 변수 선언 방식블록 단위{ }로 변수의 범위가 제한되었음const : 한번 선언한값에 대해서 변경할 수 없음let :한번 선언한 값에 대해서 다시 선언할 수 없음기존 자바스크립트(ES5)

객체의 속성을 메서드로 사용할 때 function 예약어를 생략하고 생성 가능객체의 속성명과 값 명이 동일할 때 아래와 같이 축약 가능실습

vue-advanced 폴더 생성 > terminal 열고 vue init webpack-simple vue-news 입력하면 폴더 생성됨 > vue create vue-cli3 입력해서 아래와 같이 생성위에가 3버전아래가 2버전위에서 만든거 다 지우고 터미널에서vue

터미널 > cd vue-news > npm i vue-router@3.5.3. --save※ 만약 여기서 router 설치가 안 될 경우, server가 켜져있는지 확인! 서버가 켜져있으면 라우터 설치가 안된다.

axios란? : ajax와 비슷한 기능cd vue-news > npm i axios --saveaxios에서 this로 접근이 안 되는 이유vue 라이프사이클NewsView.vuesrc > api 폴더 만들고 index.js 파일 만들기NewsView.vueNewsV

TodoFooter.vue