🌟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를 끌어다씀
}
}
})