vueJS (4) 썸네일형 리스트형 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.. 이전 1 다음
