참조된 서적 : Vue.js 코딩 공작소 (길벗)
개발자 보물상자에서 VueJS 책 한권 다 읽었다라고 할 수 있게끔 쉽게 설명해드리겠습니다.
블로그 포스팅 순서는 책 챕터와 다르게 진행될 수 있습니다. (가끔 필요없을 것 같은 챕터는 건너띌 수도 있다는 뜻)
1. HTML에 바인딩하기
프론트앤드 프레임워크를 개발하는데 브라우저에서 볼 수 없다면 재미가 없을겁니다.
그럼 이제부터 본격적으로 HTML 과 Javascript 을 직접 연동하면서 어떤 구조를 가지고 있는지 상세히 살펴보도록 하겠습니다.
- HtmlMarkUp.js
var websotre = new Vue({
el: '#dev-box',
data: {
sitename: "dev-box Tistory, 개발자 보물상자",
product: {
id: 1001,
title: "VueJS 강의입니다.",
description: "VueJS 강의 및 VueJS 강좌를 설명하고 있습니다.",
price: 13000,
image: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb5DRAw%2FbtqHq1cFP6T%2FQIQ6lRzPCAGcrPJeFHPIJ0%2Fimg.png"
}
}
});
el = HTML 에서 어떤 영역에 뷰를 적용시킬 것인지 id를 설정해주는 곳.
data = HTML 에 바인딩 시킬 데이터를 저장하는 곳.
예를 들어서 설명을 하면 다음과 같습니다.
현재 자바스크립트를 기준으로 el: '#dev-box' 로 되어있으면, HTML에 존재하는 태그들 중에서 id 의 속성 값이 dev-box로 되어있는 태그 영역 (<div id="dev-box"></div>) 에만 해당 VueJS 를 적용시킨다는 의미로 이해하면 됩니다.
- HtmlMarkUp.html
<html>
<head>
<title>dev-box Tistory, 개발자 보물상자</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="dev-box">
<h1>dev-box tistory</h1>
<div class="item">
<h3 v-text="product.title"></h3>
<img v-bind:src="product.image" width="300">
<p v-text="product.description"></p>
<p v-text="product.price"></p>
</div>
</div>
<script src="./02.HtmlMarkUp.js"></script>
</body>
</html>new Vue({ el: '#dev-box' }) 에서 우선 바로 위 스크립트에서 설명에서 el 은 HTML 의 id 속성 값의 영역에 적용한다고 했었습니다. 그렇기 때문에, <div id="dev-box"></div> 안에 있는 태그들에만 VueJS 스크립트가 적용이 될겁니다.
이번엔 영역안을 좀 자세히 살펴보도록 합니다.
v-text / v-bind 처럼 앞에 "v-" 가 붙는 것이 전부 VueJS 문법입니다.
값들이 "product."으로 시작하는데 이 값들은 HtmlMarkUp.js 스크립트에서 data 항목에서 정의해 준, product 내부의 데이터들을 선언한 값으로 꺼내오게 됩니다.
이렇게 실습을 했을 때, 소스 결과화면은 다음과 같습니다.
2. 바인딩 필터 사용하기
바인딩 필터는 데이터가 특정 값일 때, 보이지 않게하거나 단위를 표시해주거나 등등 말 그대로 필터를 한번 지나쳐온다라고 보면 됩니다. 즉 쉽게 말하면, 카메라를 사진찍을 때 필터효과로 인해서 결과 값이 이뻐지게 나온다. 라고 생각하면 쉬울 듯 합니다.
바로 소스와 결과를 보면서 배워보도록 하겠습니다.
- filter.js
var websotre = new Vue({
el: '#dev-box',
data: {
sitename: "dev-box Tistory, 개발자 보물상자",
product: {
id: 1001,
title: "VueJS 강의입니다.",
description: "VueJS 강의 및 VueJS 강좌를 설명하고 있습니다.",
price: -585,
image: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb5DRAw%2FbtqHq1cFP6T%2FQIQ6lRzPCAGcrPJeFHPIJ0%2Fimg.png"
}
},
filters: {
validPrice: function(price){
if(price < 0){
return "가격에러";
}
return price;
}
}
});실제 필터가 구현되는 부분은 다음 부분입니다.
filters: {
validPrice: function(price){
if(price < 0){ return "가격에러"; }
return price;
}
}이렇게 filters 라는 항목 안에서 여러개의 함수들을 선언해줄 수 있는데, 이 포스팅에서는 이해를 돕기 위해 만들었기 때문에, 가격이 제대로 입력되었는지 체크하는 기능으로 간단하게 만들어보았습니다. 여기서 가격을 체크하는 함수명은 validPrice 입니다.
가격이 0보다 작은 숫자이면 "가격에러"라고 나오도록 반환을 시켜놓은 상태입니다.
- filter.html
<html>
<head>
<title>dev-box Tistory, 개발자 보물상자</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="dev-box">
<h1>dev-box tistory</h1>
<div class="item">
<h3 v-text="product.title"></h3>
<img v-bind:src="product.image" width="300">
<p v-text="product.description"></p>
<p> {{product.price | validPrice}}</p>
</div>
</div>
<script src="./03.filter.js"></script>
</body>
</html>이번엔 HTML 에서 적용을 해보면, 필터를 사용하기 전에는 <p v-text="product.price"></p>로 작성해서 HTML에 바로 바인딩이 될 수 있도록 처리했지만, 필터를 사용할 때는 바인딩이 되는 것을 사용하지 않습니다.
대신 파이프라는 심볼을 사용해서 바인딩을 시키게 됩니다.
<p> {{ product.price | validPrice }} </p>이런 방법으로 필터를 사용해서 할 수 있는데, 수행되는 순서가 어떤식으로 이루어지는지 간단하게 살펴보면
| 이것을 파이프라고 합니다. 파이프를 기준으로 앞에 변수들은 파라미터, 뒤는 함수명입니다.
vaildPrice 함수에 product.price(13000)을 파라미터로 전달을 해서 함수 구현체를 수행하고 반환된 값을 HTML 화면에 출력하게 됩니다.
※ 그럼 조금 응용해서 파라미터가 여러개라면 어떻게 작성해야할까요?
- filter.js
filters: {
validPrice: function(discount, price){
if(discount == true)[
return price * 0.5;
}
return price;
}
}
- filter.html (여러개 파라미터 사용)
<p> {{ true, product.price | validPrice }} </p>스크립트에서 선언한 파라미터 인자 순서대로 입력하고, 파이프 뒤에는 함수명을 작성해주는 것으로 파라미터가 여러개가 들어와야할 때에도 충분히 사용이 가능합니다.
'프론트앤드 > VueJS' 카테고리의 다른 글
| [Vue.js] VueJS 코딩 공작소 (길벗) 책 리뷰 #중간후기 (0) | 2020.09.14 |
|---|---|
| [Vue.js] VueJS 강의 #4 - HTML 이벤트 바인딩 (0) | 2020.09.14 |
| [Vue.js] VueJS 강의 #2 - 생명주기 훅 (0) | 2020.08.27 |
| [Vue.js] VueJS 강의 #1 - 모델 패턴과 반응형 웹 (0) | 2020.08.24 |
