본문 바로가기

전체 글136

뷰 컴포넌트 뷰 컴포넌트 화면 영역을 구분하여 개발(헤더, 네비, 콘텐츠, 푸터...) 코드의 재사용을 위함(코드 반복을 줄여서 여러 화면에 사용) new Vue({ el: '#app' }); 뷰 인스턴스를 생성하면 기본적으로 컴포넌트가 생성된다. 전역 컴포넌트 전역 컴포넌트는 component('컴포넌트이름', 컴포넌트내용)으로 만들수 있다. #app(Root 컴포넌트) 안에서 태그로 사용할 수 있다. 여러 인스턴스에서 공통으로 사용하며 위치에 상관없이 어디서든 호출할 수 있다. 전역으로 사용해야하는 플러그인이나 라이브러리만 사용한다. 최초 빌드시에 같이 빌드되기에 무거워질 수 있다. Vue.component('app-header', { template: 'Header' }) new Vue({ el: '#app' .. 2023. 8. 22.
소통 대화가 잘 안됐다 소통이 힘들다 말이 안 통한다모든 인문학을 다 동원해서 할 이야기가 많은 주제이다많은 사람들이 호소하는 외로움과 좌절의 문제는말이 통하는 사람이 한 두사람만 있어도 해결이 된다외로움은 혼자 있어서 외로운게 아니다말이 안 통하는 사람과 있어서 외로운 것이다누구나 말이 통하는 사람을 찾아 헤맨다많은 남성들이 향략산업이나 성산업을 찾는 이유는 외로움 때문이다자기 말을 무조건 들어줄 사람 토를 달지 않고 들어줄 사람을 찾는 것이다여성들이나 청소년들은자기의 말을 들어주는 사람이 없고 자기를을 가르치려는 사람만 있을 때우울하고 외롭고 폭식 등의 현상으로 나타난다스스로가 조금 부족하거나 가난하더라도말이 잘 통하는 친구들이 있으면 살만하다그만큼 소통이 중요하다하지만 소통은 본질적으로 불가능하다그렇지만.. 2023. 3. 20.
뷰 템플릿 문법 뷰 템플릿 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.
반응형

티스토리툴바