'라이브러리/Vue.js' 카테고리의 글 목록

라이브러리/Vue.js (4)

뷰 컴포넌트 통신과 유효 범위

라이브러리/Vue.js 다한(dahan) 2019. 4. 10. 21:12

Vue 뷰는 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위(scope)를 갖기 때문이다. 따라서, 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 이 예제는 2개의 지역 컴포넌트를 등록하고 첫 번째 지역 컴포넌트는 직접 값을 입력하여 출력하지만 두 번째 컴포넌트는 첫 번째 값을 참조하여 출력하는 코드이다. 실행하면 첫 번째 값은 나오지만 두 번째 값은 나오지 않는 것을 확인할 수 있다. 왜 두 번째 컴포넌트의 값은 나타나지 않을까? 컴포넌트의 유효 범위로 인해 다른 컴포넌트의 값을 직접 접근하지 못하기 때문이다. 이렇게 직접 다른 컴포넌트의 값을 참조할 수 없지만 뷰 프레임워크에..

Vue.js 화면을 개발하기 위한 필수 단위 두번째 컴포넌트

라이브러리/Vue.js 다한(dahan) 2019. 4. 7. 18:21

컴포넌트는 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미한다. 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 할 수 있다. 또한, 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 다시 코드를 사용하기가 편하다. 컴포넌트를 등록하는 방법으로는 전역, 지역 컴포넌트가 있다. 전역 컴포넌트 등록 방법 Vue.component('컴포넌트 이름',{ //컴포넌트 내용 }); 컴포넌트 등록

Vue.js 화면을 개발하기 위한 필수 단위 인스턴스

라이브러리/Vue.js 다한(dahan) 2019. 4. 7. 02:26

Vue 뷰로 웹을 개발할 때 반드시 알아야 하는 두 가지 기술 요소는 인스턴스와 컴포넌트이다. 그 중 인스턴스에 대해 알아보자. 인스턴스 {{message}} 인스턴스는 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. 다음의 코드를 보면 브라우저 창에 텍스트 형태로 'Hello Vue.js!'가 출력되는 것도 인스턴스가 있기 때문이다. 그렇다면 어떻게 생성하면 될까? 아래의 코드를 보면 생성자 인스턴스를 만들고 el 속성, data 속성 등을 이용해서 화면을 만든다. 이렇게 생성자를 만드는 이유는 재정의하여 편리하게 사용하도록 하기 위해서이다. 생성자는 객체를 생성할 때 자주 사용하는 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할 떄 기존에 포함된 기능과 더불어 기존 기능을 ..

Vue.js란?

라이브러리/Vue.js 다한(dahan) 2019. 4. 5. 22:27

Vue 뷰는 웹 페이지 화면을 개발하는 목적으로 만들어진 프론트엔드 프레임워크이다. 프레임워크는 필수 코드, 알고리즘, 데이터베이스 등 웹 페이지를 개발하는 데에 있어서 어느 정도 구성이 되어있는 뼈대를 제공하도록 만들어진 것이다. (참고: https://dahanweb.tistory.com/35) MVVM 패턴 Vue는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. MVVM 패턴은 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식을 말한다. 이 방식으로 개발하면 화면 코드(프론트엔드)과 데이터 코드(백엔드)를 분리하여 코드를 직관적으로 이해할 수 있고, 서비스되고 유지보수가 더 편해지기 때문이다. MVVM ..

1

Copyright © 다한의 웹 블로그 All Rights Reserved

Designed by JB FACTORY

티스토리툴바