vue9 [Vue.js] Vue의 Instance와 속성 Instance 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다. Vue를 설치한 후, new 키워드로 Vue 생성자 함수를 호출해 새로운 인스턴스를 만들 수 있다. new Vue( ... ); Vue의 정보를 객체 상태로 넘겨주기만 하면 앱을 생성할 수 있다! 인스턴스 내부에는 여러 속성이 올 수도 있는데 자주 사용하는 속성들에 대해서 나열하면 다음과 같다. new Vue({ el: 인스턴스가 그려지는 화면의 시작점 (특정 html 태그) components: 화면에 표시할 요소 data: 뷰의 반응성이 반영된 데이터 속성 computed: 계산된 데이터 속성 methods: 화면의 동작과 이벤트 로직을 제어하는 메소드 created: 뷰의 라이프 사이클과 관련된 속성 watch: data에서.. 2023. 5. 24. [Vue.js] Vue에서의 Virtual DOM DOM DOM이란 Document Object Model이라는 뜻으로 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다. HTML 파일을 받으면 문자열을 파싱해서 DOM 트리로 만든다. 이 DOM 트리와 CSS로 만든 CSSOM 트리를 결합하여 Render 트리를 만들고 레이아웃과 페인팅 작업을 하면 비로소 우리의 화면이 우리의 눈에 보이게 된다. Virtual DOM JavaScript의 경우, DOM을 조작할 때마다 트리를 수정하여 레이아웃을 다시 그리고 리페인팅을 해야 한다. 이 과정이 반복되게 되면 비용이 커지게 되고 충분히 무거워질 수 있는 작업이 된다. 이때 등장한 것이 바로 Virtual DOM이다. Virtu.. 2023. 5. 24. [Vue.js] Vue 시작하기 (CDN vs NPM vs CLI) 공식적으로 Vue를 설치하는 방법에는 크게 세 가지가 있다. 1. 직접 script에 추가하는 CDN 2. NPM을 이용한 설치 3. 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 CLI 각각의 방법으로 직접 설치하여 비교해 보았다. 더보기 참고) package version node v16.17.0 npm v8.15.0 vue/cli v5.0.8 CDN CDN의 경우에는 직접 HTML에 script 한 줄을 추가하여 간편하게 Vue를 사용할 수 있다. 학습 목적으로 사용할 때는 위의 첫 번째 코드로 최신 버전을 사용할 수 있고, 프로덕션 환경인 경우에는 두 번째 코드처럼 특정 버전의 빌드 파일을 받을 수 있다. 적용하면 다음과 같이 script 내에서 Vue를 사용할 수 있다. NPM 공식 문서에 .. 2023. 5. 22. 이전 1 2 다음
