뷰 템플릿(Template)란?
: HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성
템플릿에서 사용하는 뷰의 속성과 문법
1) 데이터 바인딩(Data Binding)
: HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는것을 의미.
{{ }} - 콧수염 괄호
: 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식.
v-bind
: 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결 할 때 사용하는 데이터 연결 방식
2) 자바스크립트 표현식
3) 디렉티브(Directive)
: HTML 태그 안에 v- 접두사를 가지는 모든 속성을 의미.
ex)
<a v-if="flag">두잇</a>* 주요 디렉티브
| 디렉티브 이름 | 역 할 |
| v-if | 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않음. |
| v-for | 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력 |
| v-show | v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않음. 다만, v-if는 해당 태그를 완전히 삭제하지만 v-show는 css 효과만 display:none;으로 주어 실제 태그는 남아 있고 화면 상으로만 보이지 않음. |
| v-bind | HTML 태그의 기본 속성과 뷰 데이터 속성을 연결 |
| v-on | 화면 요소의 이벤트를 감지하여 처리 할 때 사용. for example ! v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메시드를 실행 할 수 있음 |
| v-model | form에서 주로 사용되는 속성. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직 수행 가능. <input>, <select>, <textarea> 태그에만 사용 가능 |
<html>
<head>
<title>Vue Template - Directives</title>
</head>
<body>
<div id="app">
<a v-if="flag">두잇 Vue.js</a>
<ul>
<li v-for="system in systems">{{ system }}</li>
</ul>
<p v-show="flag">두잇 Vue.js</p>
<h5 v-bind:id="uid">뷰 입문서</h5>
<button v-on:click="popupAlert">경고 창 버튼</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
flag: true,
systems: ['android', 'ios', 'window'],
uid: 10
},
methods: {
popupAlert: function() {
return alert('경고 창 표시');
}
}
});
</script>
</body>
</html>4) 이벤트 처리
5) 고급 템플릿 기법
computed 속성 : 첫 번째 장점. data 속성 값의 변화에 따라 자동으로 다시 연산. 두 번째 장점. 캐싱.(연산의 결과값을 미리 저장하고 있다가 필요할 떄 불러오는 동작)
computed속성과 methods 속성의 차이점
: moethods 속성은 호출할 때만 해당 로직이 수행. computed 속성은 대상 데이터의 값이 변경되면 자동적으로 수행. 다시말해... 수동적으로 데이터를 갱신하느냐, 능동적으로 데이터를 갱신하느냐?
watch 속성
: 데이터 변화를 감지하여 자동으로 특정 로직을 수행. computed속성과 유사하지만 computed는 내장 API를 활용한 간단한 연산 정도로 적합. watch속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합.
뷰 프로젝트 구성방법
싱글 파일 컴포넌트 체계란?
.vue 파일로 프로젝트 구조를 구성하는 방식을 말함.
.vue파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일.
[.vue 파일의 기본 구조]
[화면에 표시할 요소들을 정의하는 영역]
ex) HTML + 뷰 데이터 바인딩
<template>
<!--HTML태그 내용-->
</template>
[뷰 컴포넌트의 내용을 정의하는 영역]
ex) template, data, methods 등
<script>
[템플릿에 추가한 HTML 태그의 CSS 스타일을 정의하는 영역]
export default {
//자바스크립트 내용
}
</script>
<style>
/* CSS 스타일 내용 */
</style>※ 뷰 CLI
싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 웹팩(Webpack)이나 브라우저리파이(Browserify)와 같은 도구가 필요함. → (웹팩과 브라우저리파이는 꽤나 깊어서 다음에 따로 학습)
깊은 도구를 대신하여 뷰 개발자들이 좀더 편하게 작업하기 위해 뷰 코어 팀에서 CLI를 제공.
[뷰CLI 설치하는법]
해당 명령을 입력해주면 설치가 진행되고,
npm install vue-cli -global
vue 라는 명령어를 입력했을때, 결과화면처럼 나왔다면 설치가 완료된 것이다.
뷰 CLI명령어
| 템플릿 종류 | 설 명 |
| vue init webpack | 고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원 |
| vue init webpack-simple | 웹팩 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용 |
| vue init browserify | 고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원 |
| vue init broiwserify-simple | 브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용 |
| vue init simple | 최소 뷰 기능만 들어간 HTML 파일 1개 생성 |
| vue init pwa | 웹팩 기반의 프로그레시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트 |
webpack-simple 실행하여 npm install까지 진행하면 프로젝트 구조가 완성된다.
그러면 본인이 설치할떄 설정한 폴더에 위와 같은 파일들이 생성된 것을 확인 할 수 있음.
설치가 된 이후
npm run dev를 실행시켜주면 브라우저가 실행되면서 다음과 같은 화면이 나타난다.
로컬8080에서 구동되며 웹팩 결과(output)이 /dist/에서 제공이 된다는 의미
뷰 로더(Vue Loader)
: 웹팩에서 지원하는 라이브러리. 싱글 파일 컴포넌트 체계에서 사용하는 .vue를 브라우저에서 실행 가능한 웹 페이지의 형태로 변환해줌.
아래는 웹팩의 뷰 로더 처리 부분
module: {
rules: [
{
test: \/.vue$/, //대상 파일 지정
loader: 'vue-loader', //사용할 로더 지정
options: {
loaders: {
}
}
},
[뷰 CLI로 프로젝트를 구성하는 과정]
1) 뷰 CLI 설치 npm i vue-cli -g
2) 프로젝트 생성 vue init webpack-simple
3) 관련 라이브러리 설치 npm install
4) 프로젝트 구동 npm run dev
Do it! vue.js 입문 완독완료
뒷부부은 프로젝트 실습과 + 고급개발자로 가는 Tip
프로젝트 실습 이후 vue.js에 대해 알아보았다. 단순하게 맛보기라 더 심화적으로 공부를 해봐야겠지.
참조 : Do it! vue.js 입문
'vue.js' 카테고리의 다른 글
| [Vue.js] #4 뷰 라우터(Router)란? (0) | 2021.11.10 |
|---|---|
| [Vue.js] #3 뷰 컴포넌트란? (3) | 2021.11.09 |
| [Vue.js] #2 뷰 인스턴스란? (0) | 2021.11.08 |
| [Vue.js] #1 Vue.js 란? 뷰제이에스 (0) | 2021.11.08 |