Vue.js 2 에서 Vue.js 3로 바꾸기
- CDN 라이브러리가 달라진다.
javascript
닫기<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Note) 실행 결과
- 라이브러리만 바꿨는데 다음과 같이 오류가 난다.
- Vue는 더이상 생성자가 아니라는 오류가 난다.
- 기존 Vue 2
- Vue 3
- createApp() 안에 기존 옵션들을 집어 넣는다.
- mount()를 이용해서 view의 ele를 넣어준다.
- methods{}는 동일하게 작성하지만 data{}를 넣었던 부분이 다음과 같이 바뀐다.
Ex) 변경하기
- new Vue => createApp()
- ele 는 맨 뒷부분으로 빠진다.
- data 가 메서드로 바뀐다. 반환값을 넣어준다.
- 적용하고난 코드
javascript
열기계산기 앱의 모듈화와 template 옵션
- 위에 만든 두 파일에 대해 어떤 문제가 있을까?
- 현재, 뷰를 이용한 Javascript 파일에서 html 파일의 변수들을 참고하는 구조이다.
- 따라서 html 에서 지시자를 변경하거나 뭔가를 변경하면 javascript 에 영향을 주고 있다.
- 결합력 있는 것끼리 한 곳에 모아두면 편리하다. → "모듈화"
Ex) 모듈화
- <body> 태그 안에 있는 부분을 잘라서 다음과 같이 이동한다.
- 템플릿 문자열을 만들기 위해 methods 파트 뒤에 templates 파트를 추가해서 방금 잘라내기 한 코드를 붙여넣는다.
- 주의) id가 그 곳에 있으면 안된다.
- 따라서 'section id' 부분을 html 페이지의 body 태그 안으로 이동한다 .
- 반드시 <body> 안이 아니더라도 새로운 <div>태그를 만들어서 id를 넣어줘도된다.
javascript
닫기id="calc-app"
html
열기
- Javascript
- template를 ``로 감싼다. ('~'위에 있는 키)
javascript
열기
Note) 실행 결과
- 위와 같이 만들어주면 결과는 동일하다.
Note
- content
출처
14강 - https://www.youtube.com/watch?v=23o_22c0Z5o&list=PLq8wAnVUcTFVvV09XIRA0L5hgDPil88r5&index=12
15강 - https://www.youtube.com/watch?v=IQOQ61RCv1M
'FrontEnd > Vue.js 3' 카테고리의 다른 글
| Chapter 04. Vue 시작하기 (0) | 2023.03.29 |
|---|---|
| Chapter 03. Vue.js 사용 전 JavaScript 기본 지식 (0) | 2023.03.07 |
| Chapter 02. 웹 프론트의 MVC 라이브러리 (0) | 2023.03.07 |
| Chapter 01. 사전 지식과 SPA (0) | 2023.03.07 |