Vue 기본, 비동기

▶기술 순서

1. Angular

2. React

3. Vue : Front-Ent Framework

 

▶뷰의 핵심 ->단방향 데이터

원래는 양방향 데이터였음 -> form에 있는 값이 서버로 갔다가 다시 돌아와서 뿌려주는 것

뷰는 데이터만 받으면 됨(서버와는 상관X) -> 단방향 데이터

결과페이지 - 서버에서 온 데이터를 화면단에서 받아서 뿌려야함

 

▶Vue의 정의

Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.

 

▶Vue - 화면을 구역에 맞게 부품처럼 나눠놓은 것(계층구조)

▶v-if, v-show

(주관식)

visible : false일 경우

v-if에서 랜더링되는 결과를 써라 -> <!-- -->

v-show에서 랜더링되는 결과를 써라 -> <h1 style="display: none;">

 

v-if : 아주 복잡하고 오래 걸리는 로직을 처리할때는 이 부분의 내용이 보이지 않을뿐더러 내용조차 처리하지 않는다...false일 경우

v-show : 결과값이 true, false 건 상관없이 처리는 처리대로 다한다. 다만 visible 값만 none으로 바꾼다...false일 경우

★v-if를 권장!!

 

▶MVVM 패턴

M - Model

V - View

VM - ViewModel (=Controller) -> 데이터와 뷰를 연결해주는 다리 역할

 

▶화면단

<script>

new Vue ({

   el: '#app',

   //정적인 데이타 처리

   data: { },

   //동적인 데이타 처리

   data() {

       return {

       }

   },

   methods: {

      plus: function() {

 

      }

   }

})

</script>

 

▶Vue 디렉티브

v-model

v-if="", v-else  |  v-show

v-on:click

v-text

v-html

v-for="a in aaa"

{{}} : 머쉬타시 표현법

v-bind

 

 

▶computed와 methoeds 비교

1. computed : 함수명으로 못 쓰고 property로 표현해야함,

데이터의 값이 변경되면 캐시에 입력됨.

연산 값이 전과 동일한 경우에는 캐시에서 뽑아서 출력함. 따라서 computed가 동작하지 않는다.

데이터가 달라지면 computed가 동작함

=> 연산의 경우에는 computed를 쓰는게 좋음 

2. methods : 함수명으로 써야함

계속적으로 연산이 됨

 

▶Vue의 인스턴스 라이프 사이클

뷰 객체가 생성될 때 : created() 동작 -> Vue의 속성이 생성

랜더링이 될 때 -> mounted() 동작(제일 중요★★★★★★) -> 데이터를 el영역에 마운팅할 수 있음

데이터가 바뀔 때 -> beforeUpdate(), updated() 동작

 

라이프사이클 함수에서는 화살표 함수를 쓰면 안 됨!!

setInterval(() => { 

 

}, 2000);

▶단방향, 양방향 차이

- 단방향 데이타 바인딩 : Data에서 화면단으로 데이터가 이동

밑에서 데이터를 가져오는 것(기본)

- 양방향 데이타 바인딩 : form에 입력된 값이 데이터를 덮어 쓸 때

위에서 밑으로 박히는 것 + 밑에서 데이터를 가져오는 것(기본)

 

▶templete은 랜더링 표시 안됨 - 요소 검사 element로 안나옴

3.3 사용자 정의 디렉티브

-> 과목평가에 나올 수도 있으므로 공부