[Vue.js] Vue.js 이론 요약

@notepad_jj2

츄르사려고 코딩하는 코집사입니다.

---

1. Event Bus

- 메소드들을 서로 호출할 수 있도록 도와줌

- $emit으로 보내고, $on으로 받는다.

 

2. CORS(Cross-Origin Resource Sharing)

- 브라우저와 서버가 상호작용하여 교차 출처 요청을 허용하는 것이 안전한지 여부를 결정하는 방법을 정의

- 그래서, CORS 해결을 위해 크로스 도메인을 @CrossOrigin으로 해결한다.

 

3. Vue Instance Life Cycle

- created : 서버에 데이터를 요청하여 받아오는 로직 수행

- mounted : 화면 요소를 제어하는 로직 수행

- updated : 데이터 변경 후 화면 요소 제어와 로직 수행

- destroyed

 

4. package.json

- npm init 명령어를 실행하여 프로젝트를 관리할 수 있는 파일을 생성하는데, 이 때 만들어지는 파일명

 

5. 자바스크립트 백틱

- '' 이것을 사용하거나, 변수 사용 시 ${}를 사용한다.

 

6. v-bindclass="{}"

- css 클래스 바인딩

 

7. 단방향 바인딩

- 단방향 바인딩은 데이터의 흐름이 모델 -> 화면

- v-bind

 

8. 양방향 바인딩

- 양방향 바인딩은 모델 -> 화면, 화면 -> 모델

- v-model

 

9. Vuejs의 지시자

- v-

 

10. {{}}와 비슷한 지시어

- v-text

<div>메세지 : {{message}}</div>

<div v-text="'메세지:'+message"></div>

 

11. 1의 경우에는 <!-- --> 처리가 되고, 2번은 <div style="display:none">2</div>이 된다.

<div v-if="msg==='yes'">1</div>
<div v-show="msg==='yes'">2</div>

 

12. v-model.trim

- 양쪽 공백을 제거하면서 양방향 통신을 하고 싶을 때 사용하는 코드

 

13. v-bind

- 단방향 바인딩

- 축약 표현식은 :

 

14. v-on

- 축약 표현식은 @

 

15. v-cloak

- {{msg}}를 화면에 보이지 않게 하기 위해 사용하는 지시어

- <div v-cloak></div>

 

16. computed

- 특정 데이터 속성의 값이 변화 되었는지를 감지하고 그 값의 결과를 메모리에 기억하고 있다가 사용시에 보여주는 속성으로 복잡한 계산식에 적합한 것

 

17. watch

- Vue 인스턴스의 데이터 변경을 관찰하고 이에 반응하는 보다 일반적인 속성

 

18. submit.prevent

- submit 이벤트를 막으려고 할 때 사용하는 코드

- <form v-on:submit.prevent="onSubmit"></form>

 

19. @keyup.enter

- keyup 이벤트 설정

- 엔터키가 눌렸을때만 동작

 

20. value

- v-model 지시어를 input, textarea, select, 다중 체크박스 등 속성과 연결

 

21. 전역 컴포넌트와 지역 컴포넌트

- 전역은 모든 인스턴스에서 사용 가능하고, 지역은 선언된 인스턴스에서만 사용 가능

 

22. props

- 컴포넌트간 통신에서 부모컴포넌트에서 자식으로 정보를 전달할 때 사용하는 속성

- 부모 -> 자식

 

23. 이벤트버스

- 컴포넌트간 통신에서 비부모 자식간의 통신을 위해 사용하는 방식

- 즉, 동일 레벨의 컴포넌트에서 통신을 위해 사용

- 보내는 컴포넌트 .$emit()

- 받는 컴포넌트 .$on()

 

24. import, export

- 자바스크립트의 재사용을 위해 ES6부터 제공하는 모듈 시스템을 사용하려고 할 때 사용하는 키워드

 

25. Promise

- es6부터 비동기처리를 효율적으로 하기 위해 제공되는 것

 

26. hash

- Vue-router를 이용하여 프로젝트 구성 시 별도의 설정을 하지 않으면 URL에 #주소의 형태로 보인다. 이 때 default mode

 

27. router-link

- Vue-router를 이용하여 컴포넌트간 이동시 페이지 새로고침 없이 이동할 수 있게 제공되는 태그명

 

28. router-link 태그에서 이동할 경로를 표기하는 속성명

- to

- <router-link to="/">HOME</router-link>

 

29. router-view

- 해당하는 라우터의 경로와 일치하는 컴포넌트의 내용을 보이기 위해 사용되는 태그

 

30. $route

- 현재 사용되는 라우트의 정보를 얻을 때 사용하는 객체명

 

31. $router

- 등록된 모든 라우트의 정보를 가져올 수 있는 객체명

 

32. $router.push()

- 라우터 이동

- query 정보 -> query

- param 정보 -> params

 

33. redirect: '/home'

- '/'로 요청 들어오면 path 경로가 '/home'인 라우터 경로로 redirect

 

34. NPM

- 새로운 모듈을 설치하고 관리하는 툴로 Node 설치 시 같이 설치되는 것

 

35. init

- 새로운 package나 project를 생성할 때 사용하는 npm 명령어

 

36. 바벨

- es6를 지원하지 않는 브라우저에서도 동작하게 하기 위해 사용하는 도구

 

37. v-for

- v-for에서는 여러 데이터를 출력할 때 i in sums를 사용

 

38. Vue 컴포넌트 3개 요소

- template, script, style

 

39. 이벤트 처리 및 이벤트 수식어
- v-on 디렉티브를 이용하여 처리할 수 있다.
- v-on:click="~~", click 대신 keyCode 등 키보드 입력 이벤트 속성도 들어갈 수 있음.
- v-on 대신 @로 사용할 수 있다.

- 이벤트 수식어 @click.이벤트명 이렇게 사용한다.
- capture : 우선순위를 무시하고 가장 먼저 발동한다.
- self : 오로지 자기 자신만 호출 가능
- prevent : 태그의 기능을 막음
- once : 해당 이벤트를 오직 한번만 실행한다.

 

40. v-model.lazy

- 키 스트로크가 끝나거나 다른 행동 시 값 변경

- 즉, change 이벤트 이후에 동기화