반응형


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
26
/*
    el 옵션은 Vue.js 프로그램이 DOM의 어떤 엘리먼트에 마운트 될 지 지정해준다.
    {{ message }}에 Vue 인스턴스의 데이터가 바인딩 되고 이때 {{ }} 구문을 머스태시 구문이라 한다.
    이때 머스태시 구문을 사용하여 데이터를 바인딩 하는 것을 문자열 보간법이라 한다. 
*/
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id = "hello">
            {{ message }}
        </div>
        
        <script>            
            var vm = new Vue({
                el : "#hello",
                data : {
                    message : 'Vue program'
                }
            });
            
        </script>
    </body>
</html>
cs


el옵션은 해당하는 DOM id를 추적하게 된다.


현재 div id = "hello"이니 el에 #hello를 하면 위에서부터 가장 우선적으로 발견되는 hello id에 vue를 이용할 수 있게 된다.


div id가 "bye"였다면 이 코드는 실행되지 않을 것이다.




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">
            <span> {{ msg }} </span>
        </div>
        
        <script>            
            var vm = new Vue({
                el : "#app",
                data : {
                    msg : "hello <b> Vue.js </b>"
                }
            });
            
        </script>
    </body>
</html>
 
cs


data 부분에는 머스태시 문법에 이용될 변수를 선언하고 해당하는 머스태시를 조작함으로써 더 유연한 프로그래밍을 진행 할 수 있다.


위의 코드에서 알 수 있듯이 다양한 태그는 msg안에서 이용 할 수 없다.


이 내용은 추후 template를 배우면 알 수 있다.





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
26
27
28
29
// 필터 적용
// 인스턴스 데이터 이름 뒤에 | 를 붙이고 필터 이름을 작성하면 된다.
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <span>{{i | multiply_number}}</span>
        </div>
 
 
        <script>
            Vue.filter('multiply_number', function(value){
                return value * 3;
            })
 
            var app = new Vue({
                el : '#app',
                data :{
                    i : 0
                }
            });
        </script>
    </body>
</html>
 
cs


위와같이 인스턴스 데이터 이름 뒤에 | 를 붙이고 필터 이름을 작성하면 된다.


i는 0이고 multiply_number은 필터 적용을 받아 value에 i의 값이 들어가게 되고 0*3을 도출하게 된다.





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
26
27
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <span>{{i | multiply_number}}</span>
        </div>
 
 
        <script>
            var app = new Vue({
                el : '#app',
                data :{
                    i : 5
                },
                filters:{
                    'multiply_number' : function(value){
                        return value * 3
                    }
                }
            });
        </script>
    </body>
</html>
cs



i는 5이고 filters옵션에서 multiply_number을 선언해주는데 value * 3이라고 지정했다.


따라서 value는 i값이 될 것이고 결국 15가 된다.






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
26
27
28
29
30
31
32
33
34
35
36
37
38
// 필터를 이용한 식 계산
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <span> {{ i | multiply_number(3,val) }} </span>
            <input type="text" name = "val" v-model ="val">
        </div>
 
 
        <script>
            var app = new Vue({
                el : '#app',
                data : {
                    i : 5,
                    val : 0
                },
                filters :{
                    'multiply_number' : function(value, number, val){
                        val = val - '0'
                        if(val > 0){
                            console.log("val > 0");
                            return value * (number + val);
                        }
                        else{
                            console.log("val <= 0");
                            return value * number;
                        }
                    }
                }
            })
        </script>
    </body>
</html>
cs



차근차근 들어온다생각해보자.


i는 value가 될 것이고, number은 5가 될 것이고, val은 input 입력 폼에 의해 결정되는 값이 될 것이다.







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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
// 두번의 필터를 이용
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id = "app">
            <span>{{a | multiply_number(b) |add_number}}</span>
            <input type="number" v-model = "a">
            <input type="number" v-model = "b">
        </div>
 
        <script>
            var app = new Vue({
                el : '#app',
                data : {
                    a : 0,
                    b : 0
                },
 
                filters:{
                    'multiply_number':function(a, b){
                        a = a - '0';
                        b = b - '0';
                        if(b > 0){
                            return  (a + b);
                        }
                        else{
                            return  a;
                        }
 
                    },
 
                    'add_number' : function(value){
                        return value * 10;
                    }
                }
            })
        </script>
    </body>
</html>
 
cs



필터를 두 번 그 이상으로도 이용이 가능하다.


처음에 input 입력 폼에서 a, b값을 받아내고 그 값을 서로 계산한 값을 다시 add_number에 보내어 *10을 해주는 과정이다.







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

'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.12
[VueJS] 데이터 바인딩 및 폼 입력 바인딩  (2) 2018.07.10

티스토리툴바