언어/Vue.js
[뷰 인스턴스 라이프 사이클] 라이프 사이클 ✈︎ 애플리케이션이 가지는 생명주기 🌀 뷰 인스턴스 라이프 사이클 라이프 사이클 (Life Cycle) 속성 : 인스턴스의 상태에 따라 호출할 수 있는 속성 라이프 사이클 훅 (Life Cycle Hook) : 각 라이프 사이클 속성에서 실행되는 커스텀 로직 | 뷰 생명 주기 표 뷰에서 제공하는 라이프 사이클 표이다. 하나씩 살펴보도록 하자. | 뷰 라이프 사이클 다이어그램 라이프 사이클은 크게 4가지로 나눌 수 있다. 1) 인스턴스 생성 2) 인스턴스 적용 3) 인스턴스 갱신 4) 인스턴스 소멸 1. beforeCreate 인스턴스 생성 후 가장 처음으로 실행되는 라이프 사이클 vue 인스턴스가 아직 정의되기 전으로 아직 접근할 수 없는 상태 2. crea..
[뷰 인스턴스의 유효범위] ⛳️ 뷰 인스턴스의 유효범위 뷰 인스턴스를 생성 시 HTML 의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다. 이를 인스턴스의 유효범위라고 한다. 즉, 뷰 인스턴스에 정의한 영역이 적용되는 영역을 의미한다. 이를 자세하게 이해하기 위해서 인스턴스 생성 시 화면에 어떻게 적용되는지 살펴보자. | 뷰 인스턴스가 화면에 적용되는 과정 1) 인스턴스 생성자 실행 - 인스턴스 옵션 속성인 el, data를 인스턴스에 정의하고 new Vue로 인스턴스를 생성한다. 2) el 에 인스턴스 적용 - 특정 화면요소 에 인스턴스 부착. ex. #app - > app id 를 가진 dom 영역에 인스턴스 적용하여 지정한 화면 요소와 그 이하 레벨의 화면요소에 값 치환하여 적용 3) 인스턴스..
[ 뷰 인스턴스의 정의와 속성 ] ✅ 뷰 인스턴스 (Instance) : 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위 인스턴스를 통해 html 에서 텍스트가 화면에 표시될 수 있다. | 뷰 인스턴스의 생성 뷰 인스턴스 형식 new Vue ({ ... }); new Vue ( => 인스턴스 생성 el 속성 : 뷰 인스턴스가 그려질 지점 지정 data : message 값을 정의하여 화면의 {{ message }} 와 연결 | 뷰 인스턴스 생성자 new Vue() 를 이용하여 인스턴스를 생성할 때, Vue → 생성자 뷰 생성자는 뷰 라이브러리 로딩 후 접근 가능 Q. 생성자를 사용하는 이유? 개발 시 필요한 기능들을 생성자에 미리 정의해 두고 사용자가 그 기능을 재정의하여 편리하게 사용하도록..
[ Hello Vue.js ! 프로젝트 만들기 ] ⛑️ 프로젝트 작업 순서 1) HTML 파일 생성 2) 뷰 소스 코드 추가 3) 브라우저로 실행 1) HTML 파일 생성 2) 뷰 소스 코드 추가 {{message}} 소스를 해석해보면, new Vue () -> Vue 를 만든다. el: #app -> 'app' 이라는 id 를 가진 엘리먼트에. data : {..} -> data 에 정의한 데이터를 넘긴다. 3) 브라우저로 실행 해당 파일 실행시 message 가 출력되는 것 확인 * Vue 개발자 도구 활성화하여 데이터 확인
