vueJS 기초지식 익히기 data와 method 편

이 게시글은 코지코더 vue 기초 익히기를 보고 정리한 게시글 입니다.

1. vue에서 data 사용하기.

new Vue({
        el: '#app',
        data: {
          person: {
            name: 'jaewoo',
            age: 29,
          },
        },
        methods: {
          nextYear(greeting) {
            return (
              greeting +
              '!' +
              (this.person.name +
                ' 는 내년에' +
                (this.person.age + 1) +
                ' 살 입니다')
            );
          },
        },
        otherMethod: function () {
          this.nextYear();
        },
      });

1.vue에서는 data 나 methods에 접근할때 this라는 객체를 이용한다고 한다.
원래라면 data.person.name 으로 data에 접근 할텐데 vue에서는 this.person.name 으로 접근하게 된다.
2.method라는 객체안에 함수를 선언할 수 있다.
react에서는 웹에서 보여지는 view 와 함수를 선언하고 데이터라는 변수를 선언하는 공간이 따로 분리 되어있다고 생각하는데 vue는 되게 html 스럽다고 생각이 든다.

 <div id="app">{{nextYear('안녕하세요')}}</div>

body 안에서 웹에서 보여지는 div에 method 안에 선언했던 함수를 사용할 수 있다. react 와 비슷하게 함수를 호출 하고 argument 안에다가 data를 넣어서 method 안에서 패러미터로 data를 받을 수 있는 구조다.