[TIL] 2021.07.26 월

Hwanjun·2021년 7월 26일

TIL

til

목록 보기

5/6

Today Ariticle

Today Idea

Today I Learned

youtube 코딩애플 vue.js 강의

--
js Array에서 데이터 가져올 때.
array[0] => 식으로 가져온다.

--
vue 반복문의 사용
Home
어느 html 태그에나 적용이 가능하다.
작명은 아무이름이나 가능. in 다음 숫자는 반복 횟수

{{작명}}
횟수에는 배열데이터도 넣을 수 있다. 배열 이름을 넣으면 배열안의 데이터의 수만큼 반복된다.
작명 부분은 데이터가 반복될 때마다 배열안의 데이터의 이름으로 바뀐다.
:key 에는 바뀌는 값을 넣어주면 되는데,
{{i}}
와 같이 사용한다면 왼쪽변수는 array의 데이터를, 오른쪽 변수는 1씩 증가하는 정수이다.(ex) 0,1,2,3...)

--
vue 이벤트
허위매물신고 신고수 : {{신고수}}
위와 같은 방식으로 클릭시 이벤트를 정할 수 있다.
기본 문법은 v-on:이벤트명="자바스크립트~~"식.
vue의 특징은 데이터가 바뀌면 자동으로 해당되는 html도 재렌더링이 된다는 점이다.
v-on은 @로 대체 가능하다 @click <= 이런식
그외 이벤트 @mouseover 등등 많이 있다.

--
vue 함수
위의 자바스크립트 자리에 함수를 만들어 사용할 수도 있다.
vue에서 함수를 제작할 때에는 methods : {}안에 만들어 준다.
또한 함수안에서 데이터를 사용할 때 this.데이터명 을 꼭 명시해주어야한다.

--
img 경로를 넣을때는 ./을 넣어 현재 위치를 포함해줘야한다.

--
vue 조건식

상세페이지임

상세페이지 내용임

v-if 안의 내용이 참일때만 HTML을 보여줌.

--
vue...는 아니고 js import/export
내보내려는 파일에서 export default 변수명

var apple = 10;
export default apple

받으려는 파일에서 import 변수명 from 파일경로

import apple from './assets/oneroom.js';

두개 이상의 변수를 내보낼때
export {변수명1, 변수명2}
받을 때
import {변수1, 변수2} from 경로

데이터가 {}로 시작하면 싹다 object형식이라 생각하면 편함.

html 태그 안에 데이터바인딩을 할때에는 ":"을 넣어주어야하고,
html 태그 안의 내용 데이터바인딩을 할때에넌 {{}}을 넣어주면 된다.