Template
템플릿이란 Vue로 화면을 조작하기 위해 제공되는 문법이다. 크게 데이터 바인딩과 디렉티브 두 가지로 나눌 수 있다.
Data Binding
Vue 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 가장 기본적인 방식이며 콧수염 문법인 "{{ }}"을 활용하여 인스턴스의 data, computed, props 속성을 연결할 수 있다. 간단한 표현식 또한 표시할 수 있다.
<div>{{ str }}</div>
<div>{{ number + 1 }}</div>
<div>{{ message.split('').reverse().join('') }}</div>
Directive
Directive는 Vue의 화면 요소를 더 쉽게 조작하기 위한 문법이다.
일반적으로 id, class 등 표준 속성을 제외하고 v- 접두사가 붙은 속성을 모두 일컫는다.
주로 사용하는 속성들은 v-bind, v-on, v-if, v-else, v-show 등이 있다.
v-bind
v-bind는 인스턴스의 data, computed, props 속성값들을 바인딩시켜준다.
html을 읽다가 v-bind를 만나면 Vue 인스턴스의 data나 computed, props 등의 속성을 검색해서 해당 속성을 찾는다.
해당 값을 사용할 속성의 앞에 v-bind를 적어주고 콜론(:)으로 이어준다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.text-blue {
color: blue;
font-weight: 700;
font-size: 24px;
}
</style>
</head>
<body>
<div id="app">
<p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
num: 10,
uuid: 'abc1234',
name: 'text-blue',
}
})
</script>
</body>p의 id는 data의 uuid를 바인딩하고, class에는 name 속성을 바인딩시켰다.
렌더링 된 화면에서는 잘 바뀐 것을 확인할 수 있다.
v-on
v-on은 DOM 이벤트를 수신한다. 전달 인자는 이벤트를 받을 이름이다.
v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때, JavaScript를 실행할 수 있다.
<body>
<div id="app">
<button v-on:click="handleClick">click</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
methods: {
handleClick() {
console.log('clicked!');
}
}
})
</script>
</body>button의 click 이벤트에 handleClick이라는 메서드를 할당시켜 주었다.
이제 버튼을 클릭하게 되면 이벤트에 할당된 메서드가 실행된다.
이벤트 수식어
이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 대신, 이벤트 수식어를 사용하여 간단하게 작업할 수 있다.
예를 들어, form의 경우 submit 이벤트가 발생하면 페이지가 새로고침된다. 이를 방지하기 위해 이벤트 발생 시, event.preventDefault()를 호출하였지만 Vue에서는 이벤트 수식어를 사용해 아래처럼 작성하여 방지할 수 있다.
<form v-on:submit.prevent="onSubmit"></form>수식어는 점으로 표시된 접미사로 아래와 같은 것들이 있다.
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
v-if, v-else, v-show
v-if와 v-else는 JavaScript의 if-else문과 유사하다.
if(isActive) return '<div>active!</div>'
else return '<div>inactive!</div>'만약 isActive라는 변수에 따라 다른 요소를 보여줘야 한다면 위와 같이 작성할 수 있을 것이다.
하지만 Vue에서는 v-if와 v-else로 아래와 같이 작성할 수 있다.
<div v-if="isActive">active!</div>
<div v-else>inactive!</div>이렇게 사용할 때는 JavaScript처럼 if문과 else문이 붙어있어야 한다.
v-show는 v-if와 유사하지만 조금 다르다.
<div v-show="isActive">active!</div>둘 모두 조건에 부합할 때 보인다는 점에서는 동일하지만, v-if의 경우에는 값에 따라 DOM에 렌더링 여부가 갈리지만, v-show의 경우에는 display: none처리를 한 것과 같아진다.
즉, 자주 변경될 값은 v-show를 사용하고, 값에 따라 분기할 필요가 있을 때에는 v-if를 사용하는 것이 좋다.
REF
https://v2.ko.vuejs.org/v2/guide/syntax.html
https://v2.ko.vuejs.org/v2/guide/events.html
https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/
'Study' 카테고리의 다른 글
| [Vue.js] Vue.js Style - CSS scoped vs CSS module (0) | 2023.05.26 |
|---|---|
| [Vue.js] Single File Component: SFC (0) | 2023.05.25 |
| [Vue.js] Vue (MVVM, Props와 Event, v-model) (0) | 2023.05.24 |
| [Vue.js] Vue의 Instance와 속성 (0) | 2023.05.24 |
| [Vue.js] Vue에서의 Virtual DOM (0) | 2023.05.24 |
