반응형



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p v-bind:id = "p_id">{{ hello }}</p>
            <p>살고 계신 곳은 <strong> {{ live_city }} </strong>입니다.</p>
            <input type="text" name = "live_city" v-model = "live_city">
        </div>
 
        <script>
            new Vue({
                el : '#app',
                data:{
                    hello : '안녕하세요~',
                    live_city : '',
                    p_id : "p_tag_id"
                }
            });
        </script>
    </body>
</html>
cs



// 데이터 바인딩 및 폼 입력 바인딩 예제

/*

데이터바인딩은 머스태시 문법을 이용한다.

Vue.js 프로그램은 컴포넌트에 정의한 상태 값이 변경되면 바인딩 목적지를 찾아 목적지의 값을 바꿔준다.

이때 컴포넌트 하나에 있는 상태는 템플릿에서 여러번 바인딩 될 수 있다.


그리고 HTML 입력 폼 태그는 HTML의 다른 태그와 달리 머스태시 문법 바인딩이 불가능 하다.

따라서 v-model 디렉티브를 사용하여야 한다.

*/



이때 위의 코드를 단순히 머스태시 문법으로도 동일한 효과를 나타낼 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{{ hello }}</p>
            <p>살고 계신 곳은 <strong> {{ live_city }} </strong>입니다.</p>
            <input type="text"  v-model = "live_city">
        </div>
 
        <script>
            new Vue({
                el : '#app',
                data:{
                    hello : '안녕하세요~',
                    live_city : '',
                }
            });
        </script>
    </body>
</html>
 
cs


그리고 항상 input을 태그로 하는 것에 대해서는 v-model 디렉티브를 이용해야만 머스태시 문법을 활용 할 수 있다.

반응형
저작자표시 비영리 변경금지

'Basic > VueJS' 카테고리의 다른 글

[VueJS] v-if 디렉티브 및 v-show 디렉티브  (0) 2018.07.20
[VueJS] v-for 디렉티브 및 정렬 방법  (0) 2018.07.18
[VueJS] 필터를 이용한 문자열 응용  (0) 2018.07.16
[VueJS] 머스태시 문법 및 필터 적용  (0) 2018.07.14
[VueJS] 버스를 이용한 두 컴포넌트 통신  (0) 2018.07.12

티스토리툴바