프론트엔드 정복하기

위와 같은 탬플릿이 있다. 노트북 카드를 구성하는 html은 다음과 같을 것이다. 노트북 상세설명 위와 같은 카드를 여러 개 만들기 위해서는 위 코드를 복사 한 후, 각 태그의 내용들을 각각의 제품에 맞는 정보로 수정할 것이다. Vue Component 메소드는 위의 과정을 간단하게 가능하게 해준다. vue로 Component를 정의해주고 Component로 정의된 를 나열 및 작성하면 된다. Vue.component('태그명', { 설정값 (json 형식) }) 1) component 설정하기 props : 외부에서 attribute(속성) 값으로 입력받을 항목들을 props 안에 배열로 넣어준다. template : 상품을 표현할 html 태그들을 ` ` 안에 넣어준다. 2) component 태그 ..

**메소드란? 어떤 특정 작업을 수행하기 위한 명령문의 집합이라 할 수 있다. 보통 function abc ( ){ } 형태를 함수, 함수 선언문이라고 한다. 이 때 Class, Json 등 안에 함수 형태로 선언되어 있는 것을 '메소드'라고 부른다. (즉, 어딘가에 속해 있는 함수 라고 보면 됨) 예시1) let object = { test ( ) { } } 예시2) class testClass { test ( ) { } } *Vue에서 메소드 정의하기 : 보통 methods json 안에 선언해 준다. ** 이 때, 화살표 함수를 사용하면 안좋다. methods를 구현하다보면 data에 접근해야 하는 경우가 많은데, 화살표 함수는 this를 바인딩하지 않으므로, this가 vue 객체(new Vue)..

list를 출력하는 방법은 일반적으로 for문을 돌려 요소의 name, description 등이 나타나도록 했다. vue에서 list 출력하는 방법은 무엇일까. HTML {{item.id}} {{item.title}} * v-for 속성 : 반복해서 출력할 태그(위 예시는 li를 여러 개 출력)에 v-for 속성을 입력한다. * v-for 속성 값 : " 항목(list)을 담을 변수 in 반복문을 사용할 " * v- for 속성을 가진 태그 내에 배열에서 가져온 정보들을 출력하자. -mustache 이용 : {{ item.id }} * 태그의 속성값에 배열의 정보를 출력하고 싶다면? -콜론, 따옴표 이용 : :src="item.image" JavaScript * data 메소드에 items라는 배열 작..

본격적으로 vue에서 데이터 바인딩(결합, 연결)을 어떻게 하는지 예제를 통해 알아보자. 목차는 다음과 같다. 1. 기본 데이터 바인딩 2. attribute 바인딩 3. 배열과 json 방식을 이용한 데이터 설정 4. class 데이터 바인딩 1. 기본 데이터 바인딩 HTML 로그인 아이디 : {{userId}} 비밀번호 : {{userPassword}} 1) vue와 바인딩할 태그에 id를 부여한다. (여기서는 "app") 2) v-model(vue가 제공하는 속성)에 변수 명을 기재한다. => new Vue 인스턴스에 data와 바인딩 된다. 3) {{ }} (콧수염처럼 생겨서 머스타시 라고 불리는 중괄호 세트)에 변수 명을 작성하면, 변수 data 값이 출력된다. ※ onchange, onclic..

vue 시작 1. install 1) CDN 삽입 OR 2) CLI 설치 npm install -g @vue/cli # OR yarn global add @vue/cli /설치하고자하는 directory에서 다음 명령어 입력 vue create 프로젝트명 2. 선언적 렌더링 : new Vue 인스턴스 구문 안에 여러 가지 요소들을 선언하게 되면 DOM에 렌더링시킬 수 있다. {{ message }} var app = new Vue({ el: '#app', //vue에 담고 싶은 element는 app이라는 id를 가졌다. data: { message: 'Hello Vue!' } })