반응형

vue.js/vue.js 2 117

4. Vue.js와 vue개발자 도구 | 인스턴스 | 생성자함수

vue.js 스크립트 코드 뷰로 개발할때 필수로 생성해야 하는 코드가 인스턴스★ new Vue(); 이렇게 생성. 생성하고 나면 변수안에 인스턴스 담을수있음 var vm = new Vue(); 이게바로 뷰에서 제공하는 API(기능)와 속성이다 ↑ 기본적으로 자바스크립트에서 함수를 이용하여 인스턴스를 생성하는 방법은 바로 생성자함수를 이용하는것 함수 이름 앞이 대문자로 시작하면 암묵적으로 동의한 생성자 함수를 의미한다. 왜 인스턴스를 생성해서 사용할까? 객체를 생성하는게 생성자함수의 객체생성 패턴. 왜 Vue를 생성자 함수로 찍어내는지, Vue 관점에서 보자. 생성자 함수를 이용해서 logText 라는 속성의 함수를 넣어놨다. 내가 vm(변수) 으로 객체를 생성할때 마다, 객체 안에는 내가 미리 정의한 l..

vue.js/vue.js 2 2022.07.04

2. vue.js의 Reactivity(반응형) 구현 | Object.defineProperty() 객체의 동작을 재정의 하는 API | get: 속성에 접근했을때의 값 정의, set: 속성의 값을 할당했을때의 값 정의

↑전 게시글의 이 문제는 vue.js의 핵심기능인 Reactivity(반응형)를 사용해서 편하게 개발할수 있다. 문법은 ↓ Object.defineProperty(대상객체, 객체의 속성,{ 정의할 내용 }); 이렇게 값을 바꿀때마다 계속 화면이 바뀌는걸 Reactivity라 한다. vue의 핵심은 데이터의 변화를 라이브러리에서 감지해서 알아서 화면을 자동으로 그려주는것인 Reactivity ★ 이게 Data Bindings이다.

vue.js/vue.js 2 2022.07.04

1. HTML은 dom의 정보를 넣고, javaScript 는 해당 태그나 dom의 내용을 조작하는것. | console.log ,querySelector, innerHTML

!입력하고 자동완성 하면 이렇게 자동완성 HTML은 dom의 정보를 넣고, javaScript 는 해당 태그나 dom의 내용을 조작하는것. 일반적인 웹개발은 아래 예시 코드처럼 바뀐 문자를 다시 저장해야지 화면에 마지막 갱신된 값이 출력. 이게 일반적인 웹개발 방식 html,css,javascript였다. 이 일반적인 표현방법을 어떻게 하면 vue.js를 통해서 쉽게 접근할까?

vue.js/vue.js 2 2022.07.04

0. vue.js 개발자 도구 설정방법 | MVVM 모델에서의 Vue

F12 -> vue 클릭 vue는 무엇인가? vue는 MVVM패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 html은 dom 을 이용해서 javaScript로 구성이 되어진다. view에서 사용자가 액션을 입력하면 그 이벤트를 중간에 DOM Listeners로 Vue에서 잡아서 자바스크립트에 있는 데이터를 바꿔주거나 혹은 특정 로직 실행시킨다. 반대로 자바스크립트가 바뀌면 바로 Data Bindings을 이용해서 화면에 반영한다. 이게 바로 뷰에서 가지고 있는 큰 특징중 하나 1. DOM Listeners 2. Data Bindings

vue.js/vue.js 2 2022.07.04
반응형