WEB/Vuejs9 뷰 컴포넌트 뷰 컴포넌트 화면 영역을 구분하여 개발(헤더, 네비, 콘텐츠, 푸터...) 코드의 재사용을 위함(코드 반복을 줄여서 여러 화면에 사용) new Vue({ el: '#app' }); 뷰 인스턴스를 생성하면 기본적으로 컴포넌트가 생성된다. 전역 컴포넌트 전역 컴포넌트는 component('컴포넌트이름', 컴포넌트내용)으로 만들수 있다. #app(Root 컴포넌트) 안에서 태그로 사용할 수 있다. 여러 인스턴스에서 공통으로 사용하며 위치에 상관없이 어디서든 호출할 수 있다. 전역으로 사용해야하는 플러그인이나 라이브러리만 사용한다. 최초 빌드시에 같이 빌드되기에 무거워질 수 있다. Vue.component('app-header', { template: 'Header' }) new Vue({ el: '#app' .. 2023. 8. 22. 뷰 템플릿 문법 뷰 템플릿 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 HTML로 변환해주는 속성 뷰 템플릿 문법 Vue는 DOM에 Vue의 데이터와 로직이 연결될 수 있도록 HTML 기반의 문법을 제공 1. 데이터 바인딩 {{ }} 콧수염 괄호를 이용해서 data 등의 속성들을 화면에 나타냄 - bind: 데이터 연결 - computed: 데이터 표현을 더 직관적이고 간결하게 도와주는 속성 {{ message }} {{ doubleNum }} 2. 디렉티브 HTML태그에서 'v-'로 시작하는 속성. 'v-' 속성들을 읽어들여 이벤트를 처리 - v-bind:id: id를 연결. DOM의 정보까지 리액티브하게 변경할 수 있다 - v-bind:class: class를 연결 - v.. 2023. 1. 14. Axios Axios 액시오스 뷰에서 권고하는 HTTP 통신 라이브러리 Promise 기반의 HTTP 통신 라이브러리 ※ Promise 란? - 자바스크립트에서 비동기 처리에 사용되는 객체 ※ 비동기 처리란? - 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 특성 액시오스 설치 CDN https://github.com/axios/axios GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser a.. 2023. 1. 11. Vue Router Vue Router 뷰 라우터 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리 라우터란 네트워크에서 데이터를 송수신하는 장치를 의미 웹에서 라우터는 웹 페이지 간의 이동하는 방법 및 경로를 설정 뷰 라우터 설치 - CDN vue링크 하단에 vue-router링크를 추가한다 인스턴스 VueRouter를 생성한다 Vue의 router 속성에 사용할 라우터를 넣는다 var router = new VueRouter({ // VueRouter라는 인스턴스를 router라는 변수에 담음 }); new Vue({ el: '#app', router: router // Vue의 속성 중에는 router가 있고, 여기에 위에서 정의한 변수 router를 넣음 }); 라우터에 페이지 정보 넣기 인스턴스 VueRou.. 2023. 1. 11. Emit Emit 에밋 emit은 발산, 내뿜다라는 뜻이 있다. 하위 컴포넌트가 상위 컴포넌트와 통신 하기위해서는 하위에서 이벤트를 발생시켜 상위로 올린다. 이벤트를 올릴 때 사용하는 것이 $emit()이다. emit은 뷰에서 제공하는 api(기능)이다. v-on:하위 컴포넌트 이벤트="실행할 상위 컴포넌트 메소드" var appHeader = { template: 'Click me', // 버튼을 클릭했을 때 실행될 함수(메소드) passEvent methods: { passEvent: function() { this.$emit('pass'); // 상위로 보낼 이벤트 pass } } } new Vue({ el: '#app', components: { 'app-header': appHeader }, method.. 2023. 1. 5. Props Props 프롭스 Properties의 약자로 부모컴포넌트로부터 자식컴포넌트가 데이터를 받기 위해 사용하는 속성이다. 자식컴포넌트에 props:[프롭스이름]을 정의하고, 가져올 상위 컴포넌트 '데이터이름을' 매칭한다. v-bind:프롭스속성이름="상위컴포넌트데이터이름" 로 데이터를 불러오고 {{ 프롭스이름 }}으로 데이터 사용 var appHeader = { template: '{{ propsdata }}', // 프롭스 이름으로 데이터 사용 props: ['propsdata'] // 하위 컴포넌트 프롭스 이름 정의 } new Vue({ el: '#app', components: { 'app-header': appHeader }, data: { message: 'hi' // 상위 컴포넌트 데이터 } }).. 2022. 11. 13. 이전 1 2 다음 반응형
