템플릿 문법
화면을 조작하는 방법을 의미하며, 크게 데이터 바인딩과 디렉티브로 나뉘어져 있다.
데이터 바인딩
뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법을 말한다.
ex) 콧수염 괄호(Mustache Tag): {{ msg }}
Vue 디렉티브
# v-if
일반적으로 HTML 태그의 속성으로 정의하며 Vue 인스턴스의 데이터에 따라 DOM 엘리먼트를 보여줄지 결정한다.
Vue 인스턴스의 데이터(상태, 계산된 속성) 이름을 속성 값으로 설정하면 참, 거짓을 판별하여 DOM에 보여줄지말지 계산한다.(조건 비교의 반단 결과가 거짓이면 DOM에 추가되지 않는다.
# v-show
자바스크립트 표현식 또는 인스턴스의 상태 값을 통해 조건 비교를 전달 받아 화면에 보여줄지 말지를 결정한다.
조건 비교의 판단 결과가 거짓이어도 DOM에 추가된다.
# v-model
HTML 폼과 Vue 컴포넌트에 사용할 수 있는특수 디렉티브를 의미한다.
컴포넌트에 v-model을 작성했을 때 해당 컴포넌트의 value의 속성 값으로 설정된다.
# v-on
이벤트가 발생할 때 Vue 메소드를 실행시키는 이벤트 핸들러이다.v-on 대신 @로 사용할 수 있다.
# v-for
자바스크립트 배열과 객체를 템플릿에 반복해서 출력할 때 유일하게 사용할 수 있는 디렉토리이다.
속성 값으로 단일 자바스크립트 표현식을 받는다.
computed
data의 바뀌는 값을 정의할 때 사용한다.
validation이나 단순한 값 연산에 적합하다.
<p v-bind:class="{ warning: isError }">Hello</p><body>
<div id = "app">
<p v-bind:clalss = "errorTextColor">HELLLO</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data: {
isError:false
},
computed: {
errorTextColor: function(){
// computed에서 데이터에 접근을 하려면 this.isError와 같이 this를 반드시 이용해야 한다.
return this.isError ? 'warning' : null;
}
}
});
</script>isError가 true일 때 warning이 출력, false일 때 미출력
watch
데이터의 변화에 따라 특정 로직을 설정할 수 있는 Vue의 속성이다.
무거운 로직, 데이터 요청에 적합하다.
EX) number 값에 따라 console을 출력
> 웬만하면, computed를 사용하는게 좋고 watch보다는 computed가 대부분의 경우에 적합하다.
참고:
Web- vuejs.org, https://joshua1988.github.io/web-development/,
도서- Vue.js 첫걸음
'FRONT-END > Vue.js' 카테고리의 다른 글
| [LEVEL 2] Node.js와 NPM (0) | 2021.06.04 |
|---|---|
| 사용자 입력 폼 만들기 (0) | 2021.06.03 |
| 싱글 파일 컴포넌트 (0) | 2021.06.03 |
| 프로젝트 생성 도구 - Vue CLI (0) | 2021.06.03 |
| HTTP 통신 라이브러리 (0) | 2021.05.31 |