공부용

0. axios Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다. 쉽게 말해서 백엔드 데이터를 프론트에 가져온다.. 라는것으로 정의할 수 있다! 1. 설치 npm install --save axios 2. 코드 ./src/view/axios.vue 번호 제목 작성자 날짜 {{board.id}} {{board.title}} {{board.writer}} {{board.writeDate}} button button을 누르면 foo라는 함수..

0. 믹스인 Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다. mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”됩니다. // 관련 url https://kr.vuejs.org/v2/guide/mixins.html 믹스인 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 1. 준비 1.1. ../assets/mixins.js export const mixins = { data () { return { counter : 10 } }, methods: { addCounter() { this.counter++; }, subCounte..

0. vuex vuex는 vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리이다. 상태가 예측 가능한 방식으로만 변경될 수 있도록 하는 규칙과 함께 응용 프로그램의 모든 구성 요소에 대한 중앙 집중식 저장소 역할 // 공식 url https://vuex.vuejs.org/ What is Vuex? | Vuex What is Vuex? NOTE This is the docs for Vuex 4, which works with Vue 3. If you're looking for docs for Vuex 3, which works with Vue 2, please check it out here. Vuex is a state management pattern + library for Vue.js a..

0. 시작하기 부모에서 자식으로 데이터를 주는 props와 자식에서 부모에게 데이터를 주는 emit을 한번 사용해보려고 한다. 1. props // src/components/props.vue child counter : {{ counter }} + - props에서 부모에게서 받는 counter를 사용한다고 등록한다. // src/view/props.vue parent counter : {{ counter }} + - script 단에서 components 폴더에 있는 props.vue 파일을 import 시킨 후, components 에서 props를 사용한다고 등록한다. 그후 template에서 props라는 태그를 적어준 뒤 v-bind로 counter를 전달한다. parent counter의 +..

0. 시작 router로 v-if와 v-on을 볼 새로울 페이지를 만든다 (이전까지 했으므로 과정은 생략한다) 1. v-for에서 썻던 template를 가져온다 // ./src/view/vif.vue //3. 사용 2. v-if와 v-on btn html 태그안에 v-if를 넣어서 사용할 수 있다. v-on 은 보통 어떠한 액션들을 취했을때 실행시킬수 있다. 여기서는 func라는 기능이고, 이걸 methods: {} 안에 넣어서 실행시켰다. 만약 show변수가 true라면 테이블이 보여질것이고 show변수가 false라면 테이블은 보이지 않을 것이다. // 출처 : https://uxgjs.tistory.com/119 Vue.js의 이벤트 사용 방법 정리 Vue.js에서 이벤트를 다루는 방법에 대해서 ..

// 참고 url : https://mkil.tistory.com/518 Vue.js개념 총정리(4)_템플릿문법,데이터바인딩,데이터변화감지 1.템플릿 문법이란 뷰의 템플릿은 HTML, CSS 등의 마크업속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결해 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성을 말한다. 여기서 템플 mkil.tistory.com 0. 템플릿 문법 데이터 및 로직들을 연결해 브라우저에서 볼 수 있는 형태의 html 변환 크게 데이터바인딩과 디렉티브로 나뉜다. 0.1 데이터 바인딩 문법 설명 {{}} 뷰 인스터의 데이터를 html 태그에 연결하는 텍스트 삽입 방식 v-bind 아이디, 클래스, 스타일 등의 html 속성 값에 뷰 데이터값 연결 0.2 디렉티브 이름 설..

0. router? 클라이언트 요청에 따라 해당하는 컴포넌트를 불러와 입힐수 있다. https://router.vuejs.org/installation.html Installation | Vue Router Installation Direct Download / CDN https://unpkg.com/vue-router@4 Unpkg.com provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like https://unpkg.com/vue-router@4.0. router.vuejs.org 1. 설치 np..

개발도구 : Visual Studio Code 0. Node.js 설치 https://nodejs.org/ko/download/ 1. 원하는 위치에 Vue 프로젝트를 생성할 폴더를 만든다. 2. vsc에서 폴더를 선택하여 실행한다. 3. " ctrl + ` " 눌러 터미널창을 실행한다. 4. vue cli 설치 터미널에 입력하여 vue-cli를 설치한다 npm install -g @vue/cli 5. 프로젝트 생성 cd 명령어로 프로젝트 생성할 위치로 이동 vue create 명령어로 프로젝트 생성 cd project/vue vue create vue-project * 혹시 아래와 같은 에러가 난다면 https://seoulsense.net/m/51 여기를 참고하면 된다. powershell은 시작창에서..

22년 1월 회사에 입사하였다. 업무 프로젝트상 vue.js 를 사용한다고 하여서 공부를 하기로 했다. 가볍게(?) 크게 사용되는것들 기억에 필요한것들을 기억하고자 기록에 남긴다.