개인히스토리저장소

작성일자 : 2021.03.10

화살표 함수란?

ES6 에서 추가된 문법으로, function 키워드 대신 화살표를 사용하여 보다 간략하게 함수를 선언하는 방법

this 에 바인딩할 객체가 함수가 어떻게 호출되었는지에 따라 동적으로 결정되는 일반 함수에 비해, 화살표 함수는 this, arguments, super 등이 정적으로 결정되며 따라서 prototype 에서 활용하거나, 객체의 메소드, 생성자로는 적합하지않다.

ex)

SelectBox 선택한 항목의 innerText 조회

작성일자 : 2020.09.11

환경 : Vue 2

1. 상위 컴포넌트 -> 하위 컴포넌트

- Props 사용

상위 컴포넌트

- 따옴표를 빼고 변수 명 사용 가능

하위 컴포넌트

2. 하위 컴포넌트 -> 상위 컴포넌트

- Event Emit 사용

상위 컴포넌트

하위 컴포넌트

작성일자 : 2020.09.07

환경 : Vue 2, vue-router 3.4.3

1. vue-rotuer 설치

2. vue-router 설정

main.js

App.vue

3. 확인

/foo 직접 접근 시 

/bar 직접 접근 시

foo 링크 클릭 시

bar 링크 클릭 시

작성일자 : 2020.09.06

환경 : Vue 2

1. Component 생성

NewComponent.vue

<template>
    New Component    
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>

2. Component 등록

사용할 위치에 신규 Component 선언 

App.vue

<template>
    ...
</template>

<script>
// import 및 등록
import NewComponent from './components/NewComponent.vue'
export default {
  components: {
    NewComponent
  }
}
</script>

<style>
	...
</style>

import 할 때 컴포넌트 명칭은 꼭 파일명과 같지 않아도 된다.

3. Component 사용

<template>
  <div id="app">
  ...
    <!-- 컴포넌트 사용 -->
    <NewComponent/>
  
  ...
  </div>
</template>

<script>
import NewComponent from './components/NewComponent.vue'
export default {
  components: {
    NewComponent
  }
}
</script>

<style>
	...
</style>

컴포넌트를 사용할 때는 케밥 표기법으로도 사용이 가능하며, 공식 가이드에선 케밥 표기법을 권장한다.

import newComponent     ->      <new-component>

작성일자 : 2020.09.03

환경 : vue cli 4.5.4, npm 6.12.0

0. npm, vue cli 설치

npm 버전 확인 : npm --version

vue cli 설치 : npm i -g @vue/cli

vue cli 버전 확인 : vue cli --version

1.  Vue CLI 에서 아래 명령어 입력

현재 vue cli 4.5.4 에서는 vue 2 버전과 vue 3 버전을 선택하여 생성할 수 있다

vue 2 버전의 'vue2' 프로젝트 생성 완료

2. 확인

프로젝트 위치에서 yarn serve 입력 후, localhost:8080로 접근 시 index 페이지 확인 가능

프로젝트 위치에서 아래 명령어 입력 시 vue 버전 확인 가능

작성일자 : 2020.08.22

개발자 관리 도구 내 Console 에서 아래 코드 입력

client=new XMLHttpRequest();
client.open('POST', "POST_METHOD_URL", true);
client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");



// 파라미터가 없을 경우
client.send();		

// 파라미터가 있을 경우
// var param = 'id=1'  
// client.send(param);