Vue.js (6) 썸네일형 리스트형 Vue 렌더링 나역 for문 렌더링 나열 이 과정에서는 Vue를 사용하여 웹 페이지에 목록을 표시하는 방법에 대해 알아봅니다. 우리의 목표 우리는 우리 제품의 세부 사항 목록을 표시할 수 있기를 원한다. 시작 코드 현재 프로젝트의 코드는 다음과 같습니다. 여기서 새로운 것은 우리의 제품 군입니다.details맨 밑에 문제 우리는 우리의 페이지가 우리의 제품을 보여 주기를 원한다.details데이터를 표시하기 위해 이 배열을 어떻게 반복할 수 있을까요? 해법 다른 Vue명령어로 구조합니다. 그v-for명령어를 사용하면 어레이를 루프 하여 데이터를 렌더링 할 수 있습니다. 이제 세부 사항들이 목록에 나와 있습니다. 하지만 이것이 어떻게 작동할까요? 의 따옴표 안에 있는 구문v-for지시는 JavaScript를 사용한 적이 있으면 친숙해.. Vue instance Vue인스턴스(instance) 본 코스를 통해 우리가 이 제품 페이지를 함께 구축하는 동안 Vue의 기본 지식을 배우게 됩니다. 필수 구성 요소: 이 과정은 HTML, CSS및 JavaScript에 대한 기본 지식을 가정합니다. 우리의 목표 이 과정에서는 Vue를 사용하여 웹 페이지에 데이터를 표시하는 방법에 대해 설명합니다. 우리의 출발 다음과 같은 간단한 HTML과 JS코드로 시작하겠습니다. 문제 변수를 잡을 방법이 필요해요product우리의 자바 스크립트로부터 그리고 그것이 나타나게 합니다h1우리의 HTML에 대한 것을 제공합니다. 우리의 첫번째 단계는 프로젝트에 Vue를 포함시키는 것입니다. 이 선을 우리 프로젝트의 맨 아래에 추가하는 것입니다.index.html파일 다음 주. js는 다음과 같.. vue 속성 바인딩 속성 바인딩 이 과정에서는 HTML요소의 속성에 데이터를 연결할 수 있는 방법에 대해 알아보겠습니다. 우리의 목표 속성 바인딩을 사용하여 이미지를 표시하고 인스턴스 데이터의 값을 기준으로 이미지에 Alt텍스트를 첨부합니다. 시작 코드 현재 HTML은 다음과 같습니다. 우리가 만든 것은div제품 이미지와 제품 정보에 대해 Flexbox로 스타일을 지정합니다. 그리고 우리의 자바 스크립트는 다음과 같습니다. 주목할 점은 다음과 같습니다.image우리의 데이터에 대한 정보를 얻을 수 있습니다. 문제 우리는 우리의 페이지에 이미지가 나타나기를 원하지만, 우리는 그것이 역동적이어야 합니다. 우리는 우리의 데이터에서 그 이미지를 업데이트할 수 있기를 바라고 있고, 그 이미지가 페이지에서 자동으로 업데이트되기를 원한.. 조건부 렌더링 v-if , v-else-if ,v-else 조건부 렌더링 이번 수업에서는 Vue를 조건부로 표시하는 방법에 대해 알아보겠습니다. 우리의 목표 우리는 우리의 데이터에 근거하여 우리의 제품이 재고가 있는지 없는지를 나타내는 텍스트를 표시하고 싶다. 시작 코드 아래쪽에 새 데이터 속성이 추가되었습니다.inStock. 문제 웹 응용 프로그램에서 조건이 충족되는지 여부에 따라 페이지에 요소가 나타나기를 원하는 경우가 많습니다. 예를 들어, 만약 우리 제품이 재고가 없다면, 우리 페이지에는 재고가 없다는 사실이 표시되어야 한다. 그렇다면 우리 제품이 재고가 있는지 없는지에 따라 어떻게 조건부로 이러한 요소를 렌더링 할 수 있을까요? 해법 Vue의 해결책은 간단하고 간단하다. 데이터에 이 새 속성이 포함되어 있는 경우: 우리는 그것을 사용할 수 있다.v-if.. vuejs 소개 많은 관심을 받고 있는 Vue의 성장과 Vue에 대한 간단한 소개를 하려고 합니다. Vue.js를 적용하여 신규 프로젝트를 진행 할 기회가 있어(이미 하나는 개발이 완료 됬고, 진행 중인 프로젝트 하나와, 앞으로 개발 할 프로젝트...) 내친김에 Vue.js에 대해 정리하고자 합니다. 1. Vue.JS의 성장 Vue가 한창 띄고 있다는 이야기를 많이 듣고 있습니다. Vue의 현재 위상이 어느정도 인지.. GitHub와 Google 트렌드, npm, Stack Overflow로 알아보겠습니다. GitHub vue와 react, angular를 GitHub에서 비교해 보도록 하겠습니다. Vue는 Star를 79299개로 React와 큰 차이 없이 많은 사람들이 관심을 가지고 있는 것을 볼 수 있습니다. Go.. AJAX Axios 1. [Axios]란? 무엇인지 알아보도록 하겠습니다. axios는 HTTP 클라이언트 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 실행합니다. 내부적으로 AXIOS는 직접적으로 XMLHttpRequest 를 다루지 않고 “AJAX 호출”을 할 수 있습니다. 요즈음 프론트엔그 개발자로서 SPA (Vue,React,Angular) 등 javaScript 프레임워크로 많이들 쓰고있습니다. Axios는 Promise를 기반으로하여 async/await문법을 사용하여 XHR요청을 매우 쉽게 할 수 있습니다. 장점 1. 구형브라우저를 지원합니다. 2. 요청을 중단시킬 수 있습니다. 3. 응답 시간 초과를 설정하는 방법이 있습니다. 4. JSON 데이터 자동변환 5. Node.js 에서 사용 2. [HT.. 이전 1 다음
