Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다
시작하기
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
위 코드는 개발버전, 개발에 도움되는 콘솔 경고를 포함한다.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
위 코드는 상용버전, 속도와 용량이 최적화된다.
둘중 하나를 html 파일에 추가하면 Vue를 사용할 수 있다.
JavaScript파일을 읽어오는 순서에 주의할 것!!!!!!!!!💢
선언적 렌더링
Vue의 핵심은 템플릿 구문을 사용하여 DOM에 데이터를 선언적으로 렌더링 할 수 있는 것이다.
<div id="app">
{{ message }}
</div>var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})데이터와 DOM이 연결되었으며 반응형이 되었다.
Vue 앱은 단일 DOM요소 (#app)에 연결되어 DOM요소를 완전히 제어한다.
HTML은 엔트리 포인트일뿐 다른 모든 것은 새롭게 생성된 Vue 인스턴스 내에서 발생한다.
디렉티브
디렉티브는 Vue의 기능들을 사용하기 위해 사용하는
HTML 태그 안에 들어가는 속성이다.
v-text 디렉티브
위의 선언적 렌더링에서 템플릿 구문 {{ message }} 을 사용해서 코드를
작성했는데 {{ }} 대신에 v-text 디렉티브를 사용할 수 있다.
<div id="app">
<span v-text="message"></span>
</div>var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})v-text 속성을 이용하면 템플릿 구문을 사용하지 않아도 DOM에 연결할 수 있다.
v-html 디렉티브
v-html 디렉티브를 사용하면 html형식을 렌더링할 수 있다.
<div id="app">
<span v-html="message"></span>
</div>var app = new Vue({
el: '#app',
data: {
message: '<h1>'안녕하세요 Vue!'</h1>'
}
})
v-html을 사용하는 경우엔 서버측에서 불필요한 부분은 필터링하게 할 것
v-show 디렉티브
해당 엘리먼트가 보여질지,보여지지 않을지 v-show 디렉티브의 true/false값을
지정할 수 있다.
<div id="app">
<span v-show="visible" v-text="message"></span>
</div>var app = new Vue({
el: '#app',
data: {
message: '<h1>'안녕하세요 Vue!'</h1>'
visible : true
}
})app.visible = false 를 입력하면 화면에서 안녕하세요 Vue!가 사라질 것이다.
v-if 디렉티브
v-if 디렉티브는 디렉티브의 값에 조건문을 넣어주는 방식으로 사용한다
<div id="app">
<span v-if="value>5">value값이 5보다 크네요!</span>
</div>var app = new Vue({
el: '#app',
data: {
value : 0
}
})만약 value가 5보다 크다면 <span v-if="value>5">value값이 5보다 크네요!</span> 이 렌더링 된다.
v-else 디렉티브
if가 있으면 else도 있는법
v-if디렉티브를 사용했을때 그 아래에 v-else디렉티브를 사용하는 엘리먼트를 넣어주면 윗부분의 조건문이 만족하지 않을때 보여진다
<div id="app">
<span v-if="value>5">value값이 5보다 크네요!</span>
<span v-else>value값이 5 이하네요!</span>
</div>var app = new Vue({
el: '#app',
data: {
value : 0
}
})v-else-if 디렉티브
if가 있으면 else도 있고 else if도 있는법
아시다시피 첫번째 조건문이 참이 아닐때 다른 조건문을 체크할 수 있게 해준다
<div id="app">
<span v-if="value>5">value값이 5보다 크네요!</span>
<span v-else-if="value === 5">value값이 5네요!</span>
<span v-else>value값이 5보다 작네요!</span>
</div>var app = new Vue({
el: '#app',
data: {
value : 0
}
})v-pre 디렉티브
v-pre 디렉티브는 특정 엘리먼트를 무시하는데 사용된다.
이걸 사용함으로써 Vue 시스템에서 해당 엘리먼트는 지시문이 없다는걸 인식하게되어 그 엘리먼트 내부의 자식앨리먼트들을 신경쓰지 않고 그냥 건너뛰어 컴파일 속도가 빨라진다.
v-cloak 디렉티브
v-cloak디렉티브는 자바스크립트 코드가 실행되기 전에
화면에 모든 엘리먼트들이 렌더링되는 것을 막아준다.
자바스크립트 코드가 컴파일이 오래걸린다면 특정 상황에서 보이지 말아야할
엘리먼트가 화면에 나오는 경우가 생긴다.
이를 막기위해 v-cloak디렉티브를 사용한다.
<div id="app" v-cloak>
<span v-if="value>5">value값이 5보다 크네요!</span>
<span v-else-if="value === 5">value값이 5네요!</span>
<span v-else>value값이 5보다 작네요!</span>
</div>var app = new Vue({
el: '#app',
data: {
value : 0
}
})위 코드처럼 부모 엘리먼트에 v-cloak속성을 추가해주면 자식 엘리먼트까지
적용이 된다.
v-once 디렉티브
v-once디렉티브는 컴포넌트를 초기에 딱 한번만 렌더링한다.
자바스크립트에서 사용하는 데이터를 사용하긴하는데 데이터의 변동이 없고
정적인 부분을 보여줄 때 사용한다.
