[Vue.js] Vue.js란?

🌟Vue.js란?

Vue.js 란 프론트엔드를 개발하는 프로그레시브 자바스크립트 프레임워크입니다. MVVM(model-view-viewmodel)패턴을 기반으로 디자인되어 있습니다. 간단한 템플릿구문을 이용하여 DOM에 데이터를 렌더링하는 것이 핵심이며 시작할때는 cdn 사용을 위해 다음의 코드를 입력한 뒤 사용합니다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

🌟data와 methods

🎯data

new Vue({ //Vue 선언
    el: //Vue가 적용될 요소 설정. tag, id, class사용 가능
    data:{
       //데이터이름 : 내용
    }
})

사용할 정보를 저장하는 공간을 data라고 합니다. data 내의 정의된 정보들은 object 형태로 값을 저장합니다. HTML에서 템플릿태그로 데이터를 호출할 시 선언해준 Vue의 data값을 리턴해줍니다.

🎯methods

new Vue({
    methods : {
        //함수이름 : function(){
            //함수내용 작성
        //}
    }
})

함수를 저장하는 저장공간을 method라고 합니다. 선언한 Vue안에 methods 라는 공간을 만들고 안에 함수를 정의해줍니다. 호출은 data와 마찬가지로 템플릿태그를 이용하여 호출합니다. 만일 methods내의 함수를 통해 Vue내에서 정의되어있는 정보 즉 data를 컨트롤하고싶다면 다음과 같이 this를 사용하여 해당데이터를 불러옵니다.

new Vue({
    el : "example" 
    data : {
        ex_data : "예시데이터입니다."
    },
    methods:{
        ex_function : function(){
            return this.ex_data //this를 통해 data내의 ex_data를 끌어다씀
        }
    }
})