Vue Template
Vue의 Template 문법이란, Vue로 화면을 조작하는 방법을 의미합니다. Template 문법은 크게 1. Data Binding, 2.Directive 으로 나뉩니다.
Data Binding : Vue Instance에서 정의한 속성들을 화면에 표시하는 방법입니다. Instance의 속성을 연결할 수 있습니다.
기본 구조 : {{data}}
Directive : Vue로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 Directive 형태로 제공하고 있습니다.
기본 구조 : v- (ex. v-bind, v-if, v-else, v-show, v-on, v-model 등)
!-- seen의 진위 값에 따라 p 태그가 화면에 표시 또는 미표시 -->
<p v-if="seen">Now you see me</p>
<!-- 화면에 a 태그를 표시하는 시점에 뷰 인스턴스의 url 값을 href에 대입 -->
<a v-bind:href="url"></a>
<!-- 버튼에 클릭 이벤트가 발생했을 때 doSomething이라는 메서드를 실행 -->
<button v-on:click="doSomething"></button>아래는 Databinding과 Directive를 활용한 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-bind:id="uuid" v-bind:class="name">{{num}}</p>
<!-- <p id="abc1234" class="text-blue">{{num}}</p> -->
<p>{{doubleNum}}</p>
<div v-if="loading">
Loading..
</div>
<div v-else>
User has been logged in
</div>
<div v-show="loading">
Loading..
</div>
<p>Message is : {{message}}</p>
<input v-model="message" placeholder="edit me"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
num: 10,
uuid: 'abc1234',
name: 'text-blue',
loading: false,
message: ""
},
computed: {
doubleNum: function(){
return this.num*2 ;
}
}
})
</script>
</body>
</html>반응형
'Framework > Vue.js' 카테고리의 다른 글
| [Vue.js] Vuex와 State (0) | 2023.04.09 |
|---|---|
| [Vue.js] Vue.js 기본 - Vue Router, Axios (0) | 2022.07.25 |
| [Vue.js] Vue.js 기본 - Component 통신 (1) | 2022.07.24 |
| [Vue.js] Vue.js 기본 - Vue, MVVM 패턴, Instance, Component (0) | 2022.07.24 |