https://unpkg.com/vue 를  head 안에 삽입해준다.

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src=" https://unpkg.com/vue"></script>
</head>
<body>
 
</body>
</html>
cs


샘플 코드를 작성해보자.

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>
    <title></title>
    <script src=" https://unpkg.com/vue"></script>
    
    <script>
        window.onload = function(){
            var test1View = new Vue({
                el : '#test1',
                data : {
                    message : '첫 번째 Vue.js '
                }
            });
        }    
    </script>
 
</head>
<body>
    <div id="test1">
        <h1>{{ message }}</h1>
    </div>
</body>
</html>
cs


결과화면

test1 이란 id를 찾아서 {{message}}를 data : message로 치환해준다.



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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload = function(){
            var test1 = new Vue({
                el : '#test1',
                data : {
                    str1 : '문자열1',
                    int1 : 100,
                    float1 : 11.11
                }
            });
 
            var test2 = new Vue({
                el : '.test2',
                data : {
                    str2 : '문자열2',
                    int2 : 200,
                    float2 : 22.22
                }
            });
        }
    </script>
</head>
<body>
 
    <div id="test1">
        <h1>{{str1}}</h1>
        <h1>{{int1}}</h1>
        <h1>{{float1}}</h1>
    </div>
 
    <div class="test2">
        <h1>{{str2}}</h1>
        <h1>{{int2}}</h1>
        <h1>{{float2}}</h1>
    </div>
</body>
</html>
cs


결과

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload = function(){
            var test1 = new Vue({
                el : '#test1',
                data : {
                    str1 : '문자열1',
                    int1 : 100,
                    float1 : 11.11
                }
            });
 
            var test2 = new Vue({
                el : '.test2',
                data : {
                    str2 : '문자열2',
                    int2 : 200,
                    float2 : 22.22
                }
            });
 
            var test3 = new Vue({
                el : '#test3',
                data : {
                    int3 :100,
                    float3 : 11.11,
                    boolean3 : true,
                    array3 : [10,20,30],
                    object3 : {
                                a1 : 'a1 문자열',
                                a2 : 'a2 문자열'
                                }
                }
            });
        }
    </script>
</head>
<body>
 
    <div id="test1">
        <h1>{{str1}}</h1>
        <h1>{{int1}}</h1>
        <h1>{{float1}}</h1>
    </div>
 
<hr>
 
    <div class="test2">
        <h1>{{str2}}</h1>
        <h1>{{int2}}</h1>
        <h1>{{float2}}</h1>
    </div>
 
<hr>
 
    <div id="test3">
        <h1>정수: {{int3}}</h1>
        <h1>부동소수점: {{float3}}</h1>
        <h1>문자열: {{str3}}</h1>
        <h1>블리언: {{boolean3}}</h1>
        <h1>배열0: {{array3[0]}}</h1>
        <h1>배열1: {{array3[1]}}</h1>
        <h1>배열2: {{array3[2]}}</h1>
        <h1>객체1: {{object3.a1}}</h1>
        <h1>객체2: {{object3.a2}}</h1>        
    </div>
</body>
</html>
cs


console.log() 이렇게 출력도 가능함

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
<script>
        window.onload = function(){
            var test1 = new Vue({
                el : '#test1',
                data : {
                    str1 : '문자열1',
                    int1 : 100,
                    float1 : 11.11
                }
            });
 
            var test2 = new Vue({
                el : '.test2',
                data : {
                    str2 : '문자열2',
                    int2 : 200,
                    float2 : 22.22
                }
            });
 
            var test3 = new Vue({
                el : '#test3',
                data : {
                    int3 :100,
                    float3 : 11.11,
                    boolean3 : true,
                    str3 : '안녕하세요',
                    array3 : [10,20,30],
                    object3 : {
                                a1 : 'a1 문자열',
                                a2 : 'a2 문자열'
                                }
                }
            });
            console.log(test3.int3)
            console.log(test3.$data)
            console.log(test3.$data.int3)
        }
    </script>
cs



함수호출

1
2
3
4
5
6
7
8
9
10
11
12
var test4 = new Vue({
                el : '#test4',
                data : {
                    name : '홍길동',
                    age : 30
                },
                methods : {
                    user_info : function(){
                        return '이름은' + this.name + '이고 나이는' + this.age + '살 입니다.'
                    }
                }
            });
cs

1
2
3
    <div id="test4">
        <h3>{{ user_info() }}</h3>
    </div>
cs


저작자표시

'Vue' 카테고리의 다른 글

v-html, v-bind  (0) 2019.07.30
컴포넌트 (전역 컴포넌트와 지역 컴포넌트)  (0) 2019.07.30
라이프 사이클  (0) 2019.07.30
Vue.js 소개, 공부, 정리  (0) 2019.07.29
노드js 설치  (0) 2019.07.28

+ Recent posts

티스토리툴바