Template Syntax
- 보간법 :
머스태쉬 구문(중괄호 2개를 겹쳐 씀)안에 데이터를 텍스트 형태로 렌더링함
<span>{{ message }}</span> //message 안에 데이터를 동적으로 할당
- 바인딩 :
v-bind 디렉티브를 사용해 HTML 태그에 적는 속성들을 동적으로 바인딩할 수 있다.
<div v-bind:id="dynamicId"></div> // dynamicId로 선언해 둔 값이 id 값으로 저장됨
Dynamic Data Binding
데이터를 동적으로 바꿔가며 HTML 속성을 조작하거나 활용할 수 있다.
- 단방향 바인딩 : 동적인 데이터를 화면 상에 반영되도록 하는 바인딩.
- 양방향 바인딩 : 동적인 데이터를 화면 상에 반영되도록 하고, 화면 상에 입력된 값이 데이터를 바꿀 수도 있음.
<input v-model="message" />
Event Handling
v-on 디렉티브를 사용하여 DOM 이벤트를 듣고, 그에 대한 반응으로 메소드를 실행하는 기능
// 이벤트 리스너 추가
<button v-on:click="handleClick">Click me</button>
//////////////////////////////////////////////////
// 자바스크립트 파트에서 메소드 정의
methods: {
handleClick() {
alert('Button clicked!');
}
}Event Handling
폼 입력 바인딩은 v-model을 사용하여 입력 폼 요소와 애플리케이션 데이터 사이의 양방향 바인딩을 생성
// 텍스트 입력
<input v-model="username" placeholder="Enter your name">
// 체크박스
<input type="checkbox" v-model="checked">
// 라디오 버튼
<input type="radio" v-model="picked" value="One">
<input type="radio" v-model="picked" value="Two">
// 셀렉트 박스
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
</select>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37/dist/vue.global.prod.min.js"></script>
<script>
// Vue 애플리케이션을 생성하고 관리합니다.
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const username = ref(''); // 텍스트 입력 값이 여기에 들어감
const checked = ref(false); // 체크박스 true/false 값이 여기에 들어감
const picked = ref(''); // 라디오버튼 선택 값이 여기에 들어감
const selected = ref(''); // 셀렉트박스 선택 값이 여기에 들어감
// setup 함수에서 반환하는 객체는 템플릿에서 사용됩니다.
return { username, checked, picked, selected };
},
});
// Vue 인스턴스를 #app 요소에 마운트합니다.
app.mount('#app');
</script>
</body>
</html>