13. (VueJs) [Vue 3] - v-model 사용해 데이터 양방향 바인딩 수행 실시

---

[개발 환경 설정]

​

개발 툴 : VS CODE

개발 언어 : Vue Js

 

---

[소스 코드]

​

<!--
[App.vue 설명]
1. App.vue 는 Vue 애플리케이션의 최상위 컴포넌트입니다

2. template : 
   - 화면 상에 표시할 요소 작성 실시
   - 컴포넌트의 모든 마크업 구조와 디스플레이 로직 작성

3. script : 
   - import 구문을 사용해 template에서 사용할 컴포넌트 불러온다
   - export default 구문에서 해당 App 컴포넌트가 main.js 파일에서 불러와지도록 내용 작성 실시
   - export default 구문에서 모듈의 함수, 객체, 변수 등을 다른 모듈에서 가져다 사용 할 수 있도록 내보냅니다

4. style : 
   - 스타일 지정 실시

5. {{ message }} : 데이터 바인딩 시 사용

6. data : 컴포넌트 생성 시 초기 데이터 설정 (리턴 값 지정)

7. methods : 메소드 정의 실시   

8. v-model : 데이터 양방향 바인드를 실시합니다 (ex: input text 수정 시 <h1> 태그 값도 동시 변경)
-->





<!-- [애플리케이션 공통 템플릿 (뷰) 지정] -->
<template>


  <!-- [App.vue 데이터 바인딩 지정] -->
  <div id="logContainer">
    <h1>{{ log }}</h1>

    <input type="text" v-model = "log">
  </div>

</template>

 

---

[결과 출력]

​

---