728x90
반응형
뷰의 템플릿 문법
뷰로 화면을 조작하는 방법으로 크게 데이터 바인딩과 디렉티브로 나뉜다.
데이터 바인딩
뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법으로 가장 기본적인 방식은 콧수염 괄호(Mustache Tag)이다.
<div>{{ message }}</div>new Vue({
data: {
message : 'Vue.js'
}
}){{ message }} 공간에 뷰 인스턴스의 data 값이 바인딩 되어 'Vue.js' 텍스트가 출력된다.
디렉티브
뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법(v-접두사)으로 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공한다.
<div>
Hello <span v-if="show">Vue.js</span>
</div>new Vue({
data: {
show: false
}
})data 속성의 show값이 false이기 때문에 'Vue.js' 텍스트는 출력되지 않는다.
종류
v-text: 뷰 인스턴스의data속성 값 출력v-html: 뷰 인스턴스의data속성 값으로 선언된 HTML태그 구현v-show: 해당 디렉티브가 선언된 태그의 화면 표시 제어v-if: 조건문을 사용하여 조건에 따라 해당 디렉티브가 선언된 태그의 화면 표시 제어. false일 경우 해당 태그 자체를 제거v-else: if-else 과 동일v-else-if: if-else if 과 동일v-pre: HTML의pre태그와 동일하게 해당 디렉티브가 선언된 태그 내 다른 태그들을 무시v-cloak: Vue.js에서 렌더링 되기 이전에 브라우저에서 감추는 기능. 해당 디렉티브 사용 시display:none스타일 적용 필요v-once: 초기 실행 시 값을 지정하고 그 이후엔 변하지 않도록 하는 기능v-bind: 뷰 인스턴스의data속성 값을 HTML태그의 속성 값으로 사용v-for: HTML에서 for-loop를 구현하기 위해 사용v-model: 기존데이터 -> 뷰바인딩에서뷰 <-> 데이터양방향 바인딩 처리를 하기 위해 사용v-on: 뷰의 이벤트 처리
Computed
템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성으로 해당 속성의 대상으로 지정한 data 속성이 변경될 때 이를 감지하고 자동으로 다시 연산해주는 장점이 있다.
예제
// data-binding.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<p>{{ doubleNum }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10
},
computed: {
doubleNum: function() {
return this.num * 2;
}
}
});
</script>
</body>
</html>결과 확인
Methods
특정 기능 별로 묶을 수 있는 자바스크립트 함수를 의미하며 뷰 템플릿의 버튼 이벤트 처리부터 HTTP 통신까지 다양한 성격의 코드로 구성된다.
예제
// methods.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <button v-on:이벤트타입="메서드 이름"></button> -->
<!-- <input v-on:이벤트타입.event modifier="메서드 이름"> -->
<button v-on:click="logText">click me</button>
<input type="text" v-on:keyup.enter="logText">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
logText: function() {
console.log('clicked');
}
}
});
</script>
</body>
</html>결과 확인
참고
Form Input Bindings — Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
728x90
반응형
'Dev > Vue.js' 카테고리의 다른 글
| [Vue.js] Vue CLI (0) | 2020.09.09 |
|---|---|
| [Vue.js] 템플릿 문법 - 실전 (0) | 2020.09.08 |
| [Vue.js] HTTP 통신 라이브러리 - axios (0) | 2020.09.08 |
| [Vue.js] 라우터 (0) | 2020.09.08 |
| [Vue.js] 컴포넌트 통신 방법 - 응용 (0) | 2020.09.08 |
댓글