홍준혁

Vue.js-폼 입력 바인딩 본문

Vue.js

Vue.js-폼 입력 바인딩

홍준혁 [Hong-JunHyeok] 2020. 9. 14. 15:08
728x90

 

noonnu.cc/

 

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

위 사이트를 보면 입력을 하면 다른 곳에 그 내용이 표시되는 기능이 구현되어 있다.

이번 시간에 폼 입력 바인딩을 배우고 나면 저런 기능을 구현할 수 있는 능력이 생길 것이다.

 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-bind:value="text" /><br />
            {{ text }}
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    text: "Hello",
                },
                methods: {},
            });
        </script>
    </body>
</html>

 

기능 구현에 앞서, input value에 text값을 넣어주고 밑에 text값을 넣어주고 input에 값이 바뀌면 실시간으로 text값이 바뀌는 방식이다. 

 

이전 시간에 배운 키 이벤트를 사용해보면 쉽게 기능을 구현할 수 있다.

keyup이라는 이벤트는 키보드가 누르고 올라갈 때를 의미하는데 이것을 사용해보겠다.

 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input
                type="text"
                v-bind:value="text"
                v-on:keyup="handleChange"
            /><br />
            {{ text }}
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    text: "Hello",
                },
                methods: {
                    handleChange(event) {
                        console.log(event);
                    },
                },
            });
        </script>
    </body>
</html>

 

이런 식으로 하면 input에 입력을 할 때마다 console창에 이벤트가 뜰 것이다.

이때 우리는 이 이벤트를 가지고 이 이벤트의 값을 가져올 수 있는데 

그럴 때 console.log에서 event.target.value를 해보자 

그러면 결과는 

이런 결과가 나올 것이다.

input창에 변화가 있을 때마다 console창에서 변화한 내용이 무엇인지를 출력해주고 있는 것이다.

 

이제 text값에 event.target.value의 값을 업데이트시켜주면 되는 것이다.

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input
                type="text"
                v-bind:value="text"
                v-on:keyup="handleChange"
            /><br />
            {{ text }}
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    text: "",
                },
                methods: {
                    handleChange(event) {
                        this.text = event.target.value;
                    },
                },
            });
        </script>
    </body>
</html>

 

이렇게 하면 input에 값을 변경할 때마다 밑에 {{ text }}에서 값이 변하는 모습을 볼 수 있을 것이다.

 

하지만!!

뭔가 코드가 길어 보이고 별로다 그래서 Vue에서는 정말 간략하게 정~말 간략하게 줄일 수 있는 v-model이라는 것을 지원한다.

Vue.js 공식문서

그렇게 해서 작성한 코드는...

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="text" /><br />
            {{ text }}
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    text: "",
                },
            });
        </script>
    </body>
</html>

 

진짜 엄청 쉽고 간결하게 해결이 됐다.  이래서 Vue 쓴다

 

오늘은 여기까지 하고 다음부터는 computed속성을 배워보도록 하겠습니다.

감사합니다

728x90

'Vue.js' 카테고리의 다른 글

Vue.js-watch속성  (1) 2020.09.14
Vue.js-computed  (1) 2020.09.14
Vue.js-이벤트  (0) 2020.09.14
Vue.js-데이터 바인딩  (0) 2020.09.13
Vue.js-톺아보기  (2) 2020.09.11
'Vue.js' Related Articles more
Comments