개발블로그

@click 클릭되는 이벤트 함수를 발생한다. 1 2 3 4 5 6 7 8 9 10 클릭 new vue({ el: '#app', methods: { handleClick: () => { alert('클릭') } } }) Colored by Color Scripter cs @change 값이 변했을 때 이벤트 함수 발생 1 2 3 4 5 6 7 8 9 10 11 12 13 new Vue ({ el: '#app', data: { message: 'Hello Vue.js' }, methods: { handleInput: () => { this.message = event.target.vlaue // 할당 전에 어떤 처리하기 } } }) Colored by Color Scripter cs

참고 : https://axios-http.com/kr/docs/intro Axios란node.js와 브라우저를 위한 promise 기반 HTTP 클라이언트이다.특징브라우저를 위해 XMLHttpRequests 생성node.js를 위해 http 요청 생성Promise API를 지원요청 및 응답 인터셉트요청 및 응답 데이터 변환요청 취소JSON 데이터 자동 변환XSRF를 막기 위한 클라이언트 사이드 지원

참고 :https://simplevue.gitbook.io/intro/16.-vuex Vuex란 글로벌하게 state를 관리할 수 있도록 도와주는 상태 관리 라이브러리 = 이걸 store라고 명칭한다. Vuex가 필요한 이유 형제끼리 state 교환이 불가능하다. 두 컴포넌트를 감싸고 있는 부모 컴포넌트로 state를 올려서 사용한다. props의 깊이가 길어질 경우 state를 부모로 올렸더라고 해당 데이터를 원하는 컴포넌트의 깊이가 깊어질수록 props를 내려주는것이 힘들고 복잡해진다. 액션에 따라 동시에 바뀌는 컴포넌트들 버튼이 클릭되었을 때 여러 컴포넌트들에 동시에 영향을 주는 경우가 있다면, vuex를 사용하는 것이 좋다. Store 기본 양식 1 2 3 4 5 6 7 8 9 10 11 12 1..

ES6란ECMAScript 6ES6의 새로운 기능const and letArrow functions(화살표 함수)Template Literals(템플릿 리터럴)Default parameters(기본 매개 변수)Array and object destructing(배열 및 객체 비구조화)Import and export(가져오기 및 내보내기)Promises(프로미스)Rest parameter and Spread poerator(나머지 매개 변수 및 확산 연산자)Classes(클래스)ES6 문법const and letconst변수 선언을위한 ES6의 새로운 키워드var보다 강력하다.사용되면 변수를 다시 할당할 수 없다.객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수이다.선택자를 대상으로 하는데 매우 유용..

Lifecycle Hooks Lifecycle Hooks | Vue.js vuejs.orgcreated최초(아무것도 없는 상태), data 가져오기mounted그림틀, 그래프updated바뀐걸 감지해서 변화destroyed결과물

화면에 노출되는 html 영역이다. 안에 단 하나의 태그만 존재해야한다. 잘못된 예시 test vue1 test vue2 올바른 예시 test vue

vue-cli 설치cli란 vue의 개발 환경을 설정해주는 도구이다.( 먼저 npm을 설치해준 다음에 한다. )npm install -g @vue/cli이렇게 적어주면 vue-cli의 최신버전이 깔린다.만약 버전을 지정해서 설치하고싶다면 아래와 같이 적어주면 된다.npm install -g @vue/cli@{내가 설치하고 싶은 버전}설치 옵션은 사람마다 다르니 잘골라서 선택한다.npm run serve코드가 실행된다.※ 서비스 종료는 Ctrl - c로 종료시킬 수 있다.Buildvue 파일을 html과 javascript코드로 변환해야 Nginx에서 서비스가 가능하다.npm run build/dist 폴더가 생성된다.※ 생성된 dist폴더의 파일만으로 Nginx에서 서비스 할 수 있다.→ *.vue파일은..

HTML 구성요소 태그 ( tag ) 모든 태그는 시작태그 종료태그로 구성됐다 예외 - , 요소 ( elemdnt ) 실제 화면에 출력되는 텍스트 부근 태그 사이에 존재 안녕하세요 위에 태그 안에 있는 '안녕하세요'가 실제 화면에 노출 속성 ( attrboute ) 태그의 속성을 부여함 여러 속성이 존재할 수 있음 띄어쓰기로 구별함 Hi 값 ( value ) 속성에 할당되는 값을 나타냄 문자는 ""로 감싸서 표시 숫자는 그냥 표시 숫자로 감싸도 상관없음 Hi 태그 주로 제목이나 포인트를 주고싶을 때 사용 폰트 굵기와 사이즈가 정해져있다. ※ 스타일을 주면 바뀐다. heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 hrading 1 태그 문단을 나눌..