Vue.js) 템플릿 문법

1. 템플릿 문법

Vue.js는 렌더링 된 DOM을 컴포넌트 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용합니다. 템플릿은 HTML 파서로 구문 분석할 수 있는 유효한 HTML 입니다. 템플릿 문법으로 다시 렌더링 될 때 최소한의 컴포넌트를 파악하여 DOM 조작을 최소화 할 수 있습니다.

 

2. 보간법(Interpolation)

• 문자열
  • 데이터 바인딩의 가장 기본형태는 Mustache(이중 중괄호 구문)기법을 사용한 문자열 보간법입니다.
  • v-once 디렉티브를 사용하면 해당 dom은 반응성을 가지지 않습니다.
  • 사용 예제       

<template>
    <h1 @click="add">
    {{ msg }} 
    </h1>
    <h1 v-once @click="add">
    {{ msg }} 
    </h1>    
</template>

<script>
export default {
	data() {
    	return {
        	msg: 'Hello world',
        };
    },
    methods: {
    	add() {
        	this.msg += '!';
        },
    },
};
</script>

 

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

<template>
	<h1 @click="add">
		{{ msg }}
	</h1>
	<h1 v-html="msg"></h1>
</template>

<script>
export default {
	data() {
		return {
			msg: '<div style="color: red">Hello!</div>',
		};
	},
};
</script>

• 속성
  
  • Mustaches(이중 중괄호 구문)는 HTML 속성에 사용할 수 없기 때문에 v-bind 디렉티브를 사용해야합니다.

<template>
	<h1 v-bind:[attr]="'active'" v-on:[event]="add">{{ msg }}</h1>
	<h1 class="msg">{{ msg }}</h1>
</template>

<script>
export default {
	data() {
		return {
			msg: 'active',
			attr: 'class',
			event: 'click',
		};
	},
	methods: {
		add() {
			this.msg += '!';
		},
	},
};
</script>

<style scoped>
.active {
	color: royalblue;
	font-size: 100px;
}
</style>

 

 

참고문서:

https://v2.ko.vuejs.org/v2/guide/