2021/12/03 4

[Vue.js] Vue.js란 (4) - Vue 인스턴스

뷰 인스턴스 생성 {{message}} 출처1: https://coding-start.tistory.com/214?category=811388 [코딩스타트] 출처2: https://www.bottlehs.com/vue/vue-js-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-&-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%86%8C%EA%B0%9C/ 뷰 인스턴스 라이프 사이클 초기화 인스턴스가 생성될 때 아래의 초기화 작업을 수행한다. 데이터 관찰 템플릿 컴파일 DOM 에 객체 연결 데이터 변경시 DOM 업데이트 뷰 인스턴스 옵션 속성 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미한다. 이 말은 무엇이냐, 이미 Vue ..

[Vue.js] Vue.js란 (3) - Vue 문법

디렉티브 데이터 바인딩의 가장 기본적인 형태는 이중괄호를 사용합니다. {{ }} {{ msg }} {{ }} 내부에 자바스크립트 표현식의 모든 기능 지원합니다. (하나의 단일 표현식만 가능) v- 접두사 사용 접두사는 Vue 고유의 특성을 식별하기 위한 시각적 역할을 합니다. 렌더링 된 DOM에 특수한 반응형 동작을 주기위해 사용합니다. 태그에 속성을 지정하는 방식으로 v-on v-model v-for v-bind v-if v-cloak 등을 사용할 수 있습니다. 수식어 수식어는 .으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다. // .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 // v-on 디렉티브에게 알려줍니..

[Vue.js] Vue.js란 (2)

호환성 Vue는 기본적으로 JavaScript 객체를 Vue 인스턴스 data 옵션으로 정의할 때 모든 속성들을 Object.defineProperty을 사용하여 Getter/Setter로 변환합니다. 이것은 ES5에서 새로 등장한 기능으로 하위호환이 불가능하기 때문에 Vue.js는 IE8 이하를 지원하지 않습니다. 특징 MVVM 패턴을 사용합니다. 더보기 MVVM 패턴 Mode - View - ViewModel의 줄임말으로 로직과 UI의 분리를 위해 설계된 패턴입니다. 웹페이지는 돔과 자바스크립트로 만들어지게 되는데 돔이 View 역할을 하고, 자바스크립트가 Model 역할을 합니다. 뷰모델이 없는 경우에는 직접 모델과 뷰를 연결해야 합니다. 그러나 뷰모델이 중간에서 연결해 주는 것이 MVVM 모델입니..

[Vue.js] Vue.js란 (1)

더보기 일단 나는..개발공백이 4년이 있는 백엔드 개발자이다. 서버나 디비를 만들고 운영도 했었지만 백엔드는 스프링이었고 화면단은 jsp였다. 공백기 동안 vue.js를 배웠는데..경험해봤는데.. 배운 그대로 비주얼 스튜디오를 설치하고 뷰티파이를 통해서만 개발을 해야 한다고 생각했었다. 다시 일을 하게 되었는데 jsp안에 vue가 있는 것을 보았다.. 왜 이 생각을 못했지..하는 생각과 동시에 내 공백이 너무 길었구나 하는 생각이 들었다.. 잠깐 찾아보니..jsp에서 vue를 쓰는 것조차 트랜드가 아니라고 말하고 있는 것 같다. 언제 따라 잡을 수 있을까.. vue.js 에 대해 정리를 하고 싶었는데. 이 블로그에 글을 쓸 때 자바스크립트 메뉴를 선택해야 하는건지 vue.js메뉴를 따로 만들어야 하는건지..

반응형