- Vue.js
- 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크
- MVVM(Model-View-ViewModel) 패턴의 ViewModel에 해당하여, UI코드와 데이터제어 로직을 분리 view <======= ViewModel ======⇒ Model
- SPA(Single Page Application)를 구축하는데 이용 가능 [Ajax같은 스타일]
- Vue.js 장점
- 배우기 쉬움
- React, Angular 에 비해 가볍고 성능이 빠름
- React(Virtual DOM), Angular(데이터 바인딩)의 장점을 가지고 있음
- 컴포넌트 기반 프레임워크로 레고 블록과 같이 컴포넌트 조합으로 뷰를 구성하고 코드를 재활용
🙄 Virtual DOM
- 화면에 변화가 있을 때 실시간으로 DOM Tree를 수정하지 않고 변경 사항이 반영된 Virtual DOM을 이용해 메모리에서 처리하고 한번만 DOM을 수정함
- 결과적으로 브라우저는 한번만 렌더링을 하게 됨으로 불필요한 렌더링 횟수를 줄일 수 있음
🙄 양방향 바인딩
- {{}} (문자열 바인딩), v-html(html코드 바인딩)은 단방향 / v-model을 쓰면 양방향
- 자바스크립트에 저장된 데이터가 html에 가고, html에서 바꾸면 자바스크립트에 저장된 데이터도 함께 바뀌는 것
-
기초 코드
-
const {createApp} = Vue: Vue 라이브러리를 creatApp에 저장
-
data(){return{}}: 담을 data를 정의
-
.mount(): 연결할 id명 또는 class명 기입
<head> <script src="https://unpkg.com/vue@3"></script> </head> <body> <div id="app">{{ message }}</div> <button @click="sum++">숫자세기 : {{ sum }}</button> <!--script에서 sum 초기값을 0으로 정의 후 클릭 때마다 ++ 적용--> <script> const {createApp} = Vue createApp({ data() { //담을 data return { message: '안녕 Vue', sum: 0 } } }).mount('#app') </script> </body>
-
-
methods
-
click 등 이벤트 발생 시 실행할 함수 정의
<!--html 부분--> <button @click="change">변경</button> <!--script 부분--> methods: { change: function(){ // 클릭 시 change라는 함수 실행 this.message = "바이 뷰!" } }
-
-
mounted(){}
-
Vue의 기본 함수, 초기 화면이 렌더링 되고 실행되는 함수
methods : { ~~ }, mounted(){ console.log(`숫자 초기값은 ${this.count} 입니다`) }
-
-
@click.prevent
-
e.preventDefault()가 작동함
-
stopPropagation()와 동일. 이벤트 전파를 차단함
<a href="http://vuejs.org" @click.prevent="notify">e.preventDefault()가 작동하는 링크</a>
-
-
HTML의 vue 태그
@click: click 시 실행
:title: 마우스를 갖다대면 풍선 도움말이 뜸
:class=”{}”: 클래스명을 정의 :class="{red:true}" == .red
:style="{}”: style 속성값을 정의 :style="{border}" == style='border:정의한값’
v-if: ex)v-if="show && list.length” v-else-if, v-else
v-for: vue의 반복문 ex)v-for="item of list”
v-model: input값을 받아오는 vue 축약어
ex) @input="데이터명 = $event.target.value”
tistory로 이전! https://sweet-rain-kim.tistory.com/