VUE model

2022-01-19

v-model 디렉티브를 사용하면 어떤 입력값에 대한 내용을 실시간으로 표시하는 양방향 데이터를 구현할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03_vue_model</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="main">
        <p>{{message}}</p>
        <input type="text" v-model:value="message">
    </div>
    <script>
        let main = new Vue({
            el : "#main",
            data : {
                message : '아래 입력상자에 값을 넣으세요'
            }
        });
        /*
        [v-bind vs v-model]
        v-bind : 단방향 데이터 바인딩
        v-model : 양방향 데이터 바인딩

        <input type="text" v-bind:value="sDate"> // sDate 값을 HTML의 input 영역에서 어트리뷰트로 보내고 종료
        <input type="text" v-model:value="sMsg"> // sMsg 값을 지정된 위치의 내용과 연동이 가능
        */
    </script>
</body>
</html>

REFERENCE
뷰(Vue.js) 프로그래밍 과정 _ 하이미디어 아카데미