Vue Template Syntax
- vue.js는 렌더링 된 DOM을 기본 Vue인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML기반 템플릿 구문 사용
- 보간법(Interpolation), 디렉티브(Directive)
Interpolation(보간법)- Text(문자열)
- 데이터 바인딩의 가장 기본 형태 "Mustache"구문(이중 중괄호)를 사용한 텍스트 보간
<span>메시지 : {{msg}}</span>-
Mustatch 태그는 데이터 객체의 msg속성 값으로 대체(해당 값이 변경되면 갱신)
-
v-once 디렉티브를 사용하여 변경 시 업데이트 되지 않은 일회성 보간을 수행
<span v-once> 다시는 변경하지 않습니다</span>보간법 실습, v-once
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
<!-- Vue를 사용하기 위한 script-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 보간법 (Mustache)방식-->
<h2>{{msg}}</h2>
<!-- v-once : 1회성 보간을 수행 -->
<h2 v-once>{{msg}}</h2>
</div>
<div id="app2">
<h2>{{msg}}</h2>
</div>
<script>
const app = new Vue({
el: "#app", //어떤 요소에 연결이 될지 나타냄.
//데이터 속성
data: {
msg: "안녕하세요 Hi",
},
});
// 하나의 html에 여러개의 Vue인스턴스를 넣어도 됨.(그러나 지양해야함)
const app2 = new Vue({
el: "#app2",
data: {
msg: "안녕히가세요 Bye",
},
});
</script>
</body>
</html>
Interpolation(보간법)- Raw HTML( 원시 HTML)
- 이중 중괄호는 HTML이 아닌 일반 텍스트로 해석
- 실제 HTML을 출력하기 위해서는 v-html디렉티브 사용
- 웹 사이트에서 임의의 HTML을 동적으로 렌더링 하면 XSS취약점으로 쉽게 이어질 수 있으므로 매우 위험할 수 도 있음. 신뢰할 수 있는 콘텐츠에서만 HTML 보간을 사용해야함.
v-html, v-text 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!-- v-html : 실제로 코드를 HTML로 해석한다. -->
<h2 v-html="msg"></h2>
<!-- v-text : 코드를 있는 그대로 가져온다 -->
<h2 v-text="msg"></h2>
</div>
<script>
const app = new Vue({
el: "#app",
data() { //data는 함수 반환 형식으로 작성 지향해야함.
return {
msg: '<h2 style="color:blue">이 글은 파란색입니다.</h2>',
};
},
});
</script>
</body>
</html>
Interpolation(보간법)-JS표현식 사용
-
Vue.js는 모든 데이터 바인딩 내에서 JS표현식의 모든 기능을 지원
-
{{ number +1}}
-
{{ok? 'YES':'NO'}}
-
{{message.split(''_.reverse().join('') }}
-
한 가지 제한 사항은 각 바인딩에 하나의 단일표현식만 포함될 수 있으므로 아래처럼 작성 X
XX {{ var a=1 }}
XX {{ if(ok) {return message} }}
JS표현식 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- javascript 표현식을 사용해보자. -->
<div>{{num+1}}</div>
<div>{{msg+'봉쥬르'}}</div>
<!-- 문자열을 반대로 뒤집어줌 -->
<div>{{msg.split("").reverse().join("")}}</div>
<!-- 삼항 연산자 방식 -->
<div>{{num > 10 ? num : num**2}}</div>
<!-- 문자열 보간법과 같은 방식인 디렉티브 v-directive -->
<div v-text="msg + '곤니찌와'"></div>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
num: 5,
msg: "안녕하세요! ",
};
},
});
</script>
</body>
</html>
Directive(디렉티브)
- v-접두사가 있는 특수 속성
- 속성값은 단일 JS표현식이 됨(v-for 예외)
- 역할은 표현식의 값이 변경될 때 사이트 이펙트를 반응적으로 DOM에 적용
v-text, v-html, v-show, v-if, v-else, v-else-if, v-for, v-on, v-bind, v-model, v-slot, v-pre, v-cloak, v-once
Directive(디렉티브) : v-text
- 엘리먼트의 textContent를 업데이트
- 일부를 갱신해야 한다면 {{ }}를 사용해야함
<!-- 둘은 같은 코드-->
<span v-text="msg"></span>
<span> {{ msg }}</span>Directive(디렉티브) : v-bind
- HTML 요소의 속성에 Vue 상태 데이터를 값으로 할당
- Object 형태로 사용하면 value가 true인 key가 class 바인딩 값으로 할당.
- 약어 v-bind:href ===> :href
<!-- 둘은 같은 코드-->
<a v-bind:href="url"></a>
<a :href="url"> </a>v-bind 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-bind -->
<div id="idValue">v-bind연습1</div>
<!-- :는 v-bind의 요약 기호-->
<div v-bind:id="idValue">v-bind연습2</div>
<div :id="idValue">v-bind연습3</div>
<!-- 동적 바인딩 : class의 속성이 test-btn이 됨-->
<button v-bind:[key]="btnId">버튼</button>
<button :[key]="btnId">버튼</button>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
idValue: "test-id",
key: "class",
btnId: "test-btn",
};
},
});
</script>
</body>
</html>
Directive(디렉티브): v-model
- HTML form 요소의 input 엘리먼트 또는 컴포넌트에 양방향 바인딩 처리
- 수식어
- .lazy: input대신 change 이벤트 이후에 동기화- .number: 문자열을 숫자로 지정
- .trim:입력에 대한 trim 진행
- form 엘리먼트 초기 'value'와 'checkes, 'selected'속성을 무시함.
v-model 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model : 실시간 업데이틀 위해 사용함 (일본어, 한국어, 중국어는 바로 업데이트가 안됨)
해결방법 : input 이벤트를 이용해서 처리를 해야함
-->
<!-- value 속성 / checked / selected 무시됨. 따라서 input에 써있는 value는 영향력 0-->
<input type="text" value="초기값" v-model="msg" />
<div>{{msg}}</div>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
msg: "Default값 입니다.", //초기값은 여기에서 수정해야함
};
},
});
</script>
</body>
</html>
Directive(디렉티브) v-show
- 조건에 따라 엘리먼트를 화면에 표시
- 항상 렌더링되고 DOM에 남아있음
- 단순히 엘리먼트에 display CSS 속성을 토글하는 것.
- 조건이 바뀌면 트랜지션 호출
<h1 v-show="ok">Hello!</h1>실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-show : 항상 렌더링 되어있음(안보인다면 hidden일 뿐 항상 존재하는 상태). CSS display 속성 -->
<h1 v-show="ok">보이나요? </h1>
<!-- msg를 value로 사용-->
<input type="text" v-model="msg" />
<!-- input된 길이가 0일 경우에는 보이지 않음-->
<button v-show="msg.trim().length !== 0">검색</button>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
ok: false,
msg: "hello",
};
},
});
</script>
</body>
</html>
Directive(디렉티브)- v-if, v-else, v-else-if
- 표현식 값의 참 거짓을 기반으로 엘리먼트를 조건부 렌더링 함
- 엘리먼트 및 포함된 디렉티브/컴포넌트는 토글 하는 동한 삭제되고 다시 작성됨.
<template>엘리먼트를 이용하여 v-if사용가능, 최종 결과에는<template>엘리먼트는 포함X
v-if, v-else, v-else-if 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-if/else -->
<h2>당신의 나이는</h2>
나이 : <input type="number" v-model="age" /> <br />
<div>
요금 :
<span v-if="age < 10">아직 애기</span>
<span v-else-if="age < 20">10대 ^^ 88허군</span>
<span v-else-if="age == 27">27이나 먹었어? 욘서 많이 컸네</span>
<span v-else>만원</span>
</div>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
age: 10, //default값
};
},
});
</script>
</body>
</html>
지르나르