Web_Vue/step00_VueSample.html at main · Playdata-Bigdata-Course/Web_Vue · GitHub

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h2>Vue 맛보기</h2>
    1. view <br>
    2. mode <br>
    3. viewmode <br>

    <br><hr><br>

    <!-- view -->
    <div id="app">
        <li>{{one}}</li>        <!--템플릿 표현식 : 콧수염 표현식 -->

        <!-- v-? : directive -->
        <li v-html="one"></li>  <!-- innerHTML -->
        <li v-text="one"></li>  <!-- innerText -->
        <li v-once>{{one}}</li> <!-- 1회성 -->

        <br><hr><br>
        <li>
            <!-- 속성에 적용하는 directive : data를 화면단에 출력하게 해주는 기능, 단방향 받기만 함 -->
            <input type="text" v-bind:value="one">
        </li>
        <li>
            <!-- 양방향 바인딩 기능의 directive -->
            <input type="text" v-model="one">
        </li>


        <li>
            <!-- lazy : 수식어 적용 시 input tag의 text인 경우 포커스가 이동시를 이벤트 발생 시점으로 간주
            model tnwjd(binding) -->
            <input type="text" v-model.lazy="one">
        </li>

    </div>

    <br><hr><br>

    <!-- ? 접속시에 Vue instance가 보유한 model 데이터 속 이름과 두번째 취미값 출력-->
    <div id="app2">
        <form>
            <label for="fname">이름:</label><br>
            <input type="text" id="fname" name="fname" v-model="hobbys.three" ><br>

            <label for="nickname">별명:</label><br>
            <input type="text" id="nickname" name="nickname" v-model="name.nickname"><br>

            <label for="nickname">취미:</label><br>
            <input type="text" id="hobby" name="hobby" v-model="hobbys.two" style="width:300px;font-size:15px"><br>
          </form>
    </div>
    <script>
        //model
        let hobbys = {"one":"노는게제일좋아", "two":"재웅선생님 점심메뉴 물어보기", "three":"장종욱"}
        let name = {"nickname":"육종장"}
        let model = {
            hobbys :{"one":"노는게좋아", "two":"재웅선생님 점심메뉴 물어보기", "three":"장종욱"} ,
            name : {"nickname":"육종장"} }


        //viewmodel = vue 객체(instance)
        let vm = new Vue({
            el : "#app",
            // data : hobbys
            data :{"one":"노는게제일좋아", "two":"재웅선생님 점심메뉴 물어보기", "three":"장종욱"}
        });

        let vm2 = new Vue({
            el : "#app2",
            //step01 - 전역변수를 model로 사용
            //data : {hobbys, name} //?

            //step02- model을 직접 data 속성에 적용
            // data : {
            //         hobbys :{"one":"노는게제일좋아", "two":"재웅선생님 점심메뉴 물어보기", "three":"장종욱"} ,
            //         name : {"nickname":"육종장"} } //?
            //step03 - 외부 변수로 선언된 model data 속성에 적용
            data : model
        });
    </script>

    </script>
</body>
</html>


<!--
html 상에서 사용 가능한 tag
1. html tag
2. Vue tag

jsp 상에서 사용 가능한 tag
1. html tag
2. Vue tag
3. jsp scripting tag : <%? %>
4. jsp action tag : <jsp:forward>
5. EL : ${} - server에서 실행되는 java 데이터 출력 tag
6. JSTL : <c: >

-->