본문 바로가기
728x90
반응형

IT/Vue.js25

[Vue.js] - Vue 자바스크립트 화살표 함수(Arrow Function) 사용 방법 #화살표 함수(Arrow Function)란? 화살표 함수(Arrow Function)는 ES6(ECMAScript 2015)에서 도입된 JavaScript의 함수 표현식입니다. 일반 함수 표현식에 비해 간결하고 명료한 문법을 제공하며, 함수를 더 간편하게 정의할 수 있습니다. 화살표 함수의 기본 구문은 다음과 같습니다: -javascript (parameter1, parameter2, ..., parameterN) => { // 함수의 본문 } 화살표 함수는 다음과 같은 특징을 가지고 있습니다: 1. 짧은 문법: function 키워드 대신 화살표(`=>`)를 사용하여 함수를 정의합니다. 이로써 함수 정의가 더 간결하고 명료해집니다. 2. this 바인딩: 화살표 함수는 자신만의 `this`를 생성하지.. 2023. 10. 12.
[Vue.js] - Vue v-bind 디렉티브를 사용하여 데이터 바인딩 하는 방법 (문자, 숫자, 논리, 배열, 객체) #vue데이터바인딩이란? Vue에서 데이터 바인딩은 데이터와 화면 요소를 동기화하는 기능을 말합니다. 데이터 바인딩을 사용하면 Vue 인스턴스의 데이터와 HTML 템플릿 사이에서 양방향 또는 단방향으로 데이터를 전달할 수 있습니다. Vue에서는 데이터 바인딩을 위해 다양한 디렉티브를 제공합니다. 가장 일반적인 데이터 바인딩 방법은 `` 중괄호를 사용하여 데이터를 출력하는 것입니다. 이를 "콧수염 문법" 또는 "Mustache 문법"이라고도 합니다. #vue3 v-bind 디렉티브란? Vue 3에서 `v-bind` 디렉티브는 HTML 요소의 속성에 동적으로 데이터를 바인딩하기 위해 사용됩니다. `v-bind` 디렉티브를 사용하면 Vue의 데이터를 HTML 속성에 연결하여 데이터가 변경될 때 해당 속성이 자.. 2023. 9. 24.
[Vue.js] - Vue Props 속성을 사용해서 데이터 전달 하는 방법 #Vue Props란? Vue Props는 Vue 컴포넌트에서 다른 컴포넌트로 데이터를 전달하기 위해 사용하는 속성입니다. Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방법으로 사용됩니다. Props를 사용하여 하위 컴포넌트에서 상위 컴포넌트의 데이터를 수정하지 않고 데이터를 전달할 수 있습니다. Props는 상위 컴포넌트에서 하위 컴포넌트로 전달됩니다. 하위 컴포넌트에서는 Props를 받아들이고, 받은 데이터를 사용하여 렌더링 하거나 다른 작업을 수행할 수 있습니다. Props는 컴포넌트 간의 데이터 흐름을 구현하는 데 사용됩니다. 상위 컴포넌트에서 데이터를 전달하면 하위 컴포넌트에서는 이 데이터를 사용하여 UI를 렌더링 하거나 다른 작업을 수행합니다. 이러한 데이터 전달 방식은 V.. 2023. 9. 10.
[Vue.js] - Vue 컴포넌트 불러오는 방법 (import) #Vue 컴포넌트란? Vue 컴포넌트는 Vue.js 프레임워크에서 사용되는 재사용 가능한 UI 요소입니다. 컴포넌트는 독립적이고 재사용 가능한 코드 블록으로, 특정한 기능을 수행하고 화면에 표시될 수 있습니다. Vue 컴포넌트는 HTML, CSS 및 JavaScript로 구성되며, 재사용성과 모듈성을 제공하여 애플리케이션을 구성하는 데 도움을 줍니다. Vue 컴포넌트는 Vue 인스턴스의 확장으로 생성됩니다. 각 컴포넌트는 자체적인 데이터, 메서드, 라이프사이클 훅(lifecycle hook) 등을 가질 수 있습니다. 컴포넌트의 데이터는 컴포넌트 내에서만 유효하며, 다른 컴포넌트와 독립적으로 상태를 관리할 수 있습니다. 컴포넌트는 Vue 애플리케이션에서 재사용 가능한 UI 조각을 만들기 위해 사용됩니다. .. 2023. 9. 10.
[Vue.js] - Vue axios 사용법(get, post..) 및 리스트(list) 데이터 렌더링 하는 방법 #Vue.js axios 메서드 종류 Vue.js 에서 axios를 사용할 때 사용 가능한 메서드는 다음과 같습니다: - **axios.get(url[, config])**: GET 요청을 보냅니다. - **axios.post(url[, data[, config]])**: POST 요청을 보냅니다. - **axios.put(url[, data[, config]])**: PUT 요청을 보냅니다. - **axios.delete(url[, config])**: DELETE 요청을 보냅니다. - **axios.head(url[, config])**: HEAD 요청을 보냅니다. - **axios.options(url[, config])**: OPTIONS 요청을 보냅니다. - **axios.patch(url[, .. 2023. 9. 4.
[Vue.js] - Vue axios 다운로드 방법 #Vue axios란? Vue Axios는 Vue.js 프레임워크에서 HTTP 클라이언트 라이브러리인 Axios를 사용하는 방법을 제공합니다. Axios는 브라우저와 Node.js를 모두 지원하며, 비동기 HTTP 요청을 쉽게 만들고 처리할 수 있도록 도와줍니다. Vue Axios를 사용하면 Vue.js 애플리케이션에서 API와의 통신이 간편해집니다. Axios는 Promises를 사용하여 요청을 처리하므로 비동기적인 작업을 쉽게 관리할 수 있습니다. 또한, Axios는 HTTP 요청과 응답을 인터셉트하고 다양한 인터셉터(interceptor) 기능을 제공하여 요청 전에 수정하거나 응답을 처리할 수 있습니다. Vue Axios를 사용하려면 먼저 Axios를 프로젝트에 설치해야 합니다. 설치 후에는 Vue.. 2023. 9. 3.
728x90
반응형

티스토리툴바