VueJS

솔·2022년 5월 3일

vuejs

VueJS

목록 보기

1/5

Vue.js

Evan You에 의해 만들어 짐.
사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 Progressive Framework.

Vue.js 특징

접근성
유연성
고성능

MVVM Pattern

Model + View + ViewModel.
Model : 순수 자바스크립트 객체.
View : 웹페이지의 DOM.
ViewModel : Vue의 역할
기존에는 자바스크립트로 View에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 library 이용.
Vue는 view와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함.

Vue 속성

el : Vue가 적용될 요소 지정.
data : Vue에서 사용되는 정보 저장. 객체 또는 함수 형태
template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
methods : 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가.
created : 뷰 인스턴스가 생성되자마자 실행할 로직 정의.

Vue Instance의 유효 범위.

Vue Instance를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용.
el 속성과 밀접한 관계가 있다.

template - 보간법 (interpolation)

문자열

데이터 바인딩의 가장 기본 형태는 "Mustache" 구문(이중 중괄호)을 사용한 텍스트 보간.
{{속성명}}
v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행.
v-once

<div id = "app">
  <div>{{message}}</div>
  <div v-once>{{message}}</div>
</div>
<script>
  new Vue({
  	el: '#app',
  	data: {
  		message: 'Hello Vue!'
  	}
  });
</script>

원시 HTML

이중 중괄호는 HTML이 아닌 일반 텍스트로 데이터를 해석
실제 HTML을 출력하려면 v-html 디렉티브를 사용

JavaScript 표현식 사용.

Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원.

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

<div id="app">
  <div>{{message + ' Vue~'}}</div>
  <div>{{num > 10 ? num * num : num + 100}}</div>
  <div>{{message.split("").reverse().join('')}}</div>
  <div v-text = "message + ' Vue~'"></div>
  <div v-text = "num > 10 ? num * num : num + 100"></div>
  <div v-text = "message.split("").reverse().join('')"></div>
</div>
<script>
  new Vue(){
  	el: '#app',
  	data:{
  		num: 5,
  		message: 'Hello'
  	}
  });
</script>

template - Directive

디렉티브

디렉티브는 v-접두사가 있는 특수 속성.
디렉티브 속성 값은 단일 JavaScript 표현식이 된다.(v-for 제외)
디렉티브의 역할은 표현식의 값이 변경될 때, 사이드 이펙트를 반응적으로 DOM에 적용.
v-model : 양방향 바인딩 처리를 위해서 사용(form의 input, textarea)
test07
v-bind : 엘리먼트의 속성과 바인딩 처리를 위해서 사용.
약어로 ":"로 사용 가능.
test08
v-show : 조건에 따라 엘리먼트를 화면에 렌더링, Style의 display를 변경.
test09
v-if, v-else-if, v-else : 조건에 따라 엘리먼트를 화면에 렌더링.
test10
v-for : 배열이나 객체의 반복에 사용.
<tag v-for="name in regions">
test12~14
template :
여러 개의 태그들을 묶어서 처리해야 할 경우 template을 사용.
v-if, v-for, component 등과 많이 사용.
test15
v-cloak :
Vue Instance가 준비될 때까지 mustache 바인딩을 숨기는데 사용.
[v-clock]{display:none}과 같은 CSS규칙과 함께 사용.
Vue Instance가 준비되면 v-cloak는 제거됨.
test16