템플릿 문법

<template>
	<div>
		<h1>보간법</h1>
		<p>{{ message }}</p>
		<p v-once>{{ message }}</p>
		<button v-on:click="message = message + '!'">click!</button>
		<hr />
		<h2>HTML</h2>
		<p v-html="rawHtml"></p>
		<hr />
		<h2>속성바인딩</h2>
		<div v-bind:title="dynamicTitle">마우스를 올려보실래요</div>
		<input type="text" value="aAa" v-bind:disabled="isInputDisabled" />
		<input v-bind="attrs" />
		<h2>Javascript</h2>
		{{ message.split('').reverse().join('') }}<br />
		{{ isInputDisabled ? '예' : '아니요' }}
	</div>
</template>

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

export default {
	setup() {
		const message = ref('치과와 기공소를 위한');
		const rawHtml = ref('<strong>안녕하세요</strong>');
		const dynamicTitle = ref('안녕하세요 >3<');
		const isInputDisabled = ref(false);
		const attrs = ref({
			type: 'text',
			value: '123456',
			disabled: true,
		});

		return {
			message,
			rawHtml,
			dynamicTitle,
			isInputDisabled,
			attrs,
		};
	},
};
</script>

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