랑쓰노트

https://joshua1988.github.io/vue-camp/vue/router.html#%E1%84%87%E1%85%B2-%E1%84%85%E1%85%A1%E1%84%8B%E1%85%AE%E1%84%90%E1%85%A5-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5 Router | Cracking Vue.js 뷰 라우터 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. 뷰 라우터 설치 프로젝트에 뷰 라우터를 설치하는 방법은 CDN 방식과 NPM joshua1988.github.io ◆ 뷰 라우터 - 페이지를 이동할 때 사용하는 공식 라이브러리이자 기능 - 뷰에서 싱글 페이지 어플리케이션, 페이지 간 이동하는 ..

Frontend/Vue 2021. 9. 20. 22:14

◆ 동일 레벨 컴포넌트 통신방식 - 두 개의 컴포넌트가 같은 레벨에 있을 때 통신하는 방법 - 직접 전달은 없고, 부모-자식 간의 전달을 통해 통신이 가능하다!! Step1. 하위컴포넌트에서 $emit()으로 이벤트를 발생 Step2. 상위컴포넌트에서 v-on:으로 이벤트 수신 Step3. 하위컴포넌트들에게 props로 데이터 전달 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 var appHeader ={ template: 'header', props: ['propsdata'] } var appContent ={ template: 'contentpass..

Frontend/Vue 2021. 9. 19. 22:34

◆ Vue 컴포넌트 통신방식(데이터 전달방식) - 뷰 컴포넌트는 각각 고유한 데이터 유효범위를 갖는다. - 따라서, 컴포넌트 간에 데이터를 주고받기 위한 규칙이 존재한다. 데이터의 흐름(Props/Event)을 추정할 수 있다. ※ Props : 상위에서 하위로 데이터를 내려준다. / props를 전달한다. ※ Event emit : 하위에서 상위로 이벤트를 올려준다. / 이벤트가 발생한다. ◆ 상위에서 하위로 데이터 전달 Props - 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 - 상위컴포넌트에서 하위 컴포넌트로만 이동!! ▷ 상위컴포넌트의 HTML 코드 ▷ 하위컴포넌트의 props 속성 정의 Vue.component('child-component', { props: [ 'props 속..

Frontend/Vue 2021. 9. 17. 17:22

◆ Vue 컴포넌트 - 컴포넌트(Component)란 화면을 구성할 수 있는 블록(영역)을 의미 - 화면을 영역별로 구분해서 코드를 관리하는 뷰의 기능 1. 화면을 빠르게 구조화 2. 일관적인 패턴으로 개발(속도 향상) 3. 재사용 가능 ◆ 컴포넌트 등록 - 컴포넌트를 등록하는 방법은 전역(Global)과 지역(Local)의 두 가지 방법이 존재 1) 전역컴포넌트 - 플러그인, 라이브러리 형태로 공통으로 사용해야하는 컴포넌트에 사용 - 인스턴스를 생성하지 않아도 모든 인스턴스에 사용가능!! ※ 전역컴포넌트 등록 - Vue 변수를 이용하여 .component( )를 호출하여 등록 - 컴포넌트이름 : template 속성에서 사용할 HTML 태그를 의미 - 컴포넌트내용 : 컴포넌트 태그가 HTML 요소로 변..

Frontend/Vue 2021. 9. 16. 23:38

◆ Vue의 특징 - 컴포넌트를 이용한 개발 - 하나의 템플릿을 컴포넌트 형식으로 만들어 여러 곳에서 사용가능 Vue는 화면(view) 라이브러리로 다음과 같은 역할을 가진다. 1. Dom Listeners : DOM을 이용한 조작 2. Data B‭indings : 데이터 바인딩 뷰의 모든 시작은 뷰 인스턴스를 만드는 것부터 시작된다. 지금부터 Vue 인스턴스에 대해 알아보자!! ◆ Vue 인스턴스 - 인스턴스는 뷰를 개발할 때 필수로 생성해야 하는 코드이다. - 인스턴스 안에는 뷰에서 제공하는 API(기능)과 속성이 들어있다. - 인스턴스를 생성하기 위해서는 new Vue() 생성자를 호출해야한다. 예제에서는 생성자의 속성으로 el, data와 같이 2개만 사용되었으나, template, method..

Frontend/Vue 2021. 9. 15. 23:55

Vue-cli가 생성한 기본 프로젝트의 구조에 대해 알아보자 ◆ Vue 프로젝트 구조 - Vue project 환경을 의미 - 기본 vue 개발환경을 설정해주는 도구로 기본적인 프로젝트를 세팅 ▷ node_modules : 앱 개발과 배포에 필요한 npm 패키지 저장 ▷ public : 배포 버전을 빌드할 때 필요한 파일(컴파일되지 않는 요소) ▷ src : 컴포넌트들을 구성하는 영역으로 Vue가 컴파일하는 대상 - assets : img와 같은 자원들을 저장하는 곳으로 컴포넌트에서 사용한 파일들은 자동배포 - components : component를 만드는 곳 ▷package.json : 프로젝트에 대한 전반적인 설정 ◆ package.json 파일 - 프로젝트의 설정을 담는 파일로 spring ap..

Frontend/Vue 2021. 9. 13. 23:28

아래 사이트를 보며 Vue.js에 대해 알아보자 https://kr.vuejs.org/ Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started Vue 시작하기 - Web 개발 학습하기 | MDN 이제 우리가 배울 세 번째 프레임워크인 Vue를 소개하겠습니다. 이 글에서 우리는 Vue에 대한 간단한 배경지식을 얻고, Vue를 설치하고 새로운 프로젝트를 만드는 방법을 배웁니다. 또한 전체 developer.mozilla.org ◆ Vue 란? - JavaScript 프레임..

Frontend/Vue 2021. 9. 13. 23:08