<template>
<div></div>
</template>
<script>
export default {
components: {}, // 다른 컴포넌트 사용 시 컴포넌트를 import하고, 배열로 저장
data() {
// HTML과 JS 코드에서 사용할 데이터 변수 선언
return {
sampleData: '',
};
},
setup() {}, // Composition API
created() {}, // 컴포넌트가 생성되면 실행
mounted() {}, // template에 정의된 HTML 코드가 렌더링된 후 실행
unmounted() {}, // unmount가 완료된 후 실행
methods: {}, // 컴포넌트 내에서 사용할 메소드 정의
};
</script>
{{}}
이중 괄호를 이용해서 데이터를 바인딩
v-html
디렉티브 사용
v-model
을 이용해서 양방향 데이터 바인딩
v-model
은 내부적으로 value 속성을 사용
v-model.number
을 통해서 문자가 아닌 숫자로 바로 처리
v-model
을 사용
내부적으로 v-model
은 select의 value 속성을 사용
v-model
은 내부적으로 체크박스의 checked
속성을 사용
<template>
<div>Hello , {{title}}</div>
<div v-html="htmlString"></div>
<input type="text" v-model="valueModel">
<input type="text" v-model.number="numberModel">
<textarea v-model="message"></textarea>
<div>
<select v-model="city">
<option value="01">서울</option>
<option value="02">부산</option>
<option value="03">대구</option>
</select>
</div>
<div>
<input type="checkbox" value="서울" v-model="checked">서울
<input type="checkbox" value="부산" v-model="checked">부산
<input type="checkbox" value="대구" v-model="checked">대구
</div>
<div>
<input type="radio" :value="radio1" v-model="picked">서울
<input type="radio" :value="radio2" v-model="picked">부산
<input type="radio" :value="radio3" v-model="picked">대구
</div>
</template>
<script>
export default {
data() {
return {
title:'world',
htmlString : '<p style="color:red">htmlString</p>',
valueModel : 'South Korea',
numberModel : 3,
message : "여러 줄을 입력할 수 있는 textarea입니다.!",
city:"04",
checked : [],
picked:'',
radio1:'서울',
radio2:'부산',
radio3:'대구',
};
},
};
</script>