Web_Vue/step06_VueMethod.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>step06_VueMethod</title>

</head>
<body>
    <h2>Vue Instance에 사용자 정의 메소드 개발 및 활용</h2>
    1. 메소드 구현 -> 호출
    <br><hr><br>
    <div id="app1">
        이름:{{name}} <br>
        주소 : {{address}} <br>
        주식1 : {{foodJSON.one}} <br>
        함수로 이름 호출 : {{myInfo()}} <br>
        함수로 이름 호출 : {{hobby2(hobby("아 힘들다"))}} <br>
        함수로 이름 호출 : {{no()}}-return이 없는 메소드 호출로 인한 blank 출력, 주로 메소드는 return 문장 권장 <br>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let foodJSON = {"one":"순대국", "two":"돈까스", "three":"제육볶음"};
        let vm1 = new Vue({
            el : "#app1",
            data : {
                name : "김성호",
                address : "행신동",
                // foodJSON :  {"one":"순대국", "two":"돈까스", "three":"제육볶음"}
                foodJSON : foodJSON //property명과 전역변수 명이 동일한 경우 한번만 선언 가능
            },
            methods: {
                myInfo : function(){ //템플릿 표현식에서 myInfo() 문법으로 호출
                    return "이름 : " + this.name;
                },
                hobby : function(v){
                    return "점심시간이다 밥먹자" + v ;
                },
                hobby2 : function(v){
                    return "호준이" + v ;
                },
                no : function(){
                    console.log("no()");
                }
            }
        });
        //Vue instance들이 보유한 model(data) 활용해 보기
        console.log(1 + " " + vm1.name);
        console.log(2 + " " + vm1.$data.name);
    </script>
</body>
</html>