[ 목차 ]
728x90
반응형
- 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(데이터 바인딩)의 장점을 가지고 있음
- 컴포넌트 기반 프레임워크로 레고 블록과 같이 컴포넌트 조합으로 뷰를 구성하고 코드를 재활용
- Vue.js
- 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크
- MVVM(Model-View-ViewModel) 패턴의 ViewModel에 해당하여, UI코드와 데이터제어 로직을 분리 view <======= ViewModel ======⇒ Model
- SPA(Single Page Application)를 구축하는데 이용 가능 [Ajax같은 스타일]
✔ 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 = "바이 뷰!" } }
<!--html 부분-->
<button @click="change">변경</button>
<!--script 부분-->
methods: {
change: function(){ // 클릭 시 change라는 함수 실행
this.message = "바이 뷰!"
}
}- mounted(){}
- Vue의 기본 함수, 초기 화면이 렌더링 되고 실행되는 함수
- methods : { ~~ }, mounted(){ console.log(`숫자 초기값은 ${this.count} 입니다`) }
methods : { ~~ },
mounted(){
console.log(`숫자 초기값은 ${this.count} 입니다`)
}- @click.prevent
- e.preventDefault()가 작동함
- stopPropagation()와 동일. 이벤트 전파를 차단함
- <a href="http://vuejs.org" @click.prevent="notify">e.preventDefault()가 작동하는 링크</a>
<a href="http://vuejs.org" @click.prevent="notify">e.preventDefault()가 작동하는 링크</a>- HTML의 vue 태그:title: 마우스를 갖다대면 풍선 도움말이 뜸:style="{}”: style 속성값을 정의 :style="{border}" == style='border:정의한값’v-for: vue의 반복문 ex)v-for="item of list”ex) @input="데이터명 = $event.target.value”
- v-model: input값을 받아오는 vue 축약어
- v-if: ex)v-if="show && list.length” v-else-if, v-else
- :class=”{}”: 클래스명을 정의 :class="{red:true}" == .red
- @click: click 시 실행
반응형
'Frontend > Vue' 카테고리의 다른 글
| Vue 기본 예제2 (0) | 2023.03.02 |
|---|---|
| Vue 기본 예제 (0) | 2023.03.01 |
