5_템플릿 문법

vue는 템플릿 문법을 통해서 DOM에 접근하여 인스턴트 데이터에 선언적으로 바인딩 할 수 있다.

 

1. 텍스트 보간법

<template>
	<div>
		<p>문자열 : {{ message }}</p> // 이중 중괄호로 사용
	</div>
</template>

<script>
import { ref } from 'vue';

export default {
	setup() {
		const message = ref('안녕하세요'); // message의 변하는 텍스트를 바인딩 가능함
		return {
			message,
		};
	},
};
</script>

<style lang="scss" scoped></style>

 

-데이터가 변하지 않는 일회성 데이터의 경우 v-once사용.

<p v-once>문자열: {{ message }} </p>

 

 

2. v-html

데이터가 아닌 html을 출력할 때 사용. xss취약점이 될 수 있으니 신뢰 가능한 콘텐츠에서만 사용하도록 하고 사용자가 제공한 컨텐츠에서는 사용하지 않는다.

(https://en.wikipedia.org/wiki/Cross-site_scripting)

<h2>텍스트: {{ rawHtml }}</h2>
<h2>v-html: <span v-html="rawHtml"></span></h2>

 

 

3. 속성바인딩 (v-bind) : 직접 html 속성에도 바인딩 가능함.

<template>

<div>

<div v-bind:title="dynamicTitle">마우스를 올려보세요</div>

</div>

</template>

<script>

import { ref } from 'vue';

export default {

setup() {

const dynamicTitle = ref('안녕하세요!!');

return {

dynamicTitle,

}

}

};

</script>

 

- true, false 와 같이 boolean 형태로도 바인딩 가능

<template>

<div>

<input type="text" value="홍길동" v-bind:disabled ="isInputDisabled">

</div>

</template>

<script>

import { ref } from 'vue';

export default {

setup() {

const isInputDisabled = ref(true);

return {

isInputDisabled,

}

}

};

</script>

true 일 때 input 창이 disabled 처리되고 false 이면 입력 가능한 상태로 보여짐.

 

 

-v-bind 는 자주 사용되므로 단축 버전이 있음

<div :title="dynamicTitle">마우스를 올려보세요.</div>
<input type="text" :disabled="isInputDisabled" />

 

-v-bind 는 다중 속성 바인딩도 가능함.

<template>

<div>

<input type="text" value="홍길동" v-bind="attr">

</div>

</template>

<script>

import { ref } from 'vue';

export default {

setup() {

const attr = ref({

id: 'password-id',

type: 'password',

placeholder: '비밀번호를 입력해주세요'

});

return {

attr,

}

}

};

</script>

 

 

4. 자바스크립트 표현식도 바인딩 가능

{{ isInputDisabled ? '예' : '아니오' }}
{{ message.split('').reverse().join('') }}
<input type="text" :placeholder="`입력해주세요 ${isInputDisabled}`" />
<div>{{ toDay() }}</div> // 함수 호출도 가능함.