[Vue] 데이터(data), 메소즈(methods)

1 data(데이터)

---

<div id="app">
        {{person.name}} {{person.age}}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                person: {
                    name : '양세찬:',
                    age : 22
                }   
            },
            methods:{
            }
        })
        </script>

결과값

양세찬:22

2 mothods(메소드)

---

    <div id="app">
        {{nextYear()}}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                person: {
                    name : '양세찬',
                    age : 22
                }   
            },
            methods:{
                nextYear: function(){
                    return this.person.name + '은 내년에 ' + (this.person.age + 1) + '살 입니다';
                }
            }
        })
	</script>

methods 안에 함수를 삽입할 수 있으며

{{ }} 더블 중괄호 안에 함수를 실행시켜줄 수 있다.

 

결과값 :

양세찬은 내년에 22살 입니다.

 

---

<div id="app">
        {{nextYear('안녕')}}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                person: {
                    name : '양세찬',
                    age : 22
                }   
            },
            methods:{
                nextYear: function(greeting){
                    return greeting + '! ' +this.person.name + '은 내년에 ' + (this.person.age + 1) + '살 입니다';
                },
                otherMethod: function(){
                    this.nextYear();
                }
            }
        })
    </script>

결과값 :

안녕! 양세찬은 내년에 22살 입니다