Vue.js 시작하기

vue 배운 사이트! 이것저것 많아서 공부하기 좋음~~

Vue Tutorial

 

 

뷰 시작하기 전

: Vue는 JavaScript 파일로 배포되며 스크립트 태그를 사용하여 웹 페이지에 추가 해야한다. 

따라서 아래의 script를 작성 하거나 vue 를 설치 해서 해도 된다. 

 

<script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script>

 

 

Step 1

뷰 영역에 표현 될 하나의 컴포넌트 만들어주기 

<div id = "app">
</div>

 

Step 2

뷰 인스턴스 생성 

뷰 인스턴스란? data 와 method 그 밖의 다른 것들을 포함 하고 있으며 뷰로 개발할 때 필수로 생성해야 하는 코드이다. 

<script> 
const app = Vue.createApp({
	data(){
		return {
			msg :"hello vue!!"
			}
	}
});

app.mount('#app'); 

</script>

뷰 구성 요소(<template> (화면 ui를 구성하는 ), data, 메서드) 중 하나인 data() 를 만들었다. 

상수 변수인 const 를 선언하고 Vue.createApp 을 이용하여 Vue 를 생성해준다.  인스턴스 작성을 모두 마쳤다면 필수로 mount 를 해주어야 vue 적용이 된다. 따라서 app.mount('위치') 이렇게 작성 해주어야 마무리! 

 

 

 

mount  구문의 구조를 잘 기억하고 헷갈리지 말쟈! 그래야 올바르게 선언 된당 

 

Step 3

Step 1 의 div 안을 설정 해 주기

<div id = "app">{{msg}}</div>

방금 Step 2 에서 data() 리턴값을 msg 로 주었기 때문에 div 해당 리턴 값을 표현 하고 싶다면 {{ }} 를 이용하여 작성한 retrun 값을 표시 해 주어야 한다. 

 

그 외 

제어문이나 이벤트 핸들러 역할을 하는 애들