Vue 인스턴스 작성
- new Vue({Vue 인스턴스 내용}) or var 변수명 = new Vue({Vue 인스턴스 내용})
- HTML : <div id="ID명"> </div>
- JS : new Vue ({ el:"#ID명", data : {프로퍼티명 :값...} })
{{ 데이터(프로퍼티명) }} - 데이터를 있는 그대로 표시
※ 데이터 바인딩 : Vue 인스턴스의 데이터가 웹 페이지상의 표시와 결합하는것
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<h2>데이터를 있는 그대로 표시하는 예제</h2>
<div id="app">
<p>{{ myText }}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
myText: "Hello!!!",
},
});
</script>
</body>
</html>
v-text - 디렉티브를 사용한 방식
※ 디렉티브 : HTML요소에 대해 Vue가 어떤 일을 하는지 지정하는 명령어로써 앞에 "v-"가 붙어있다.
<h2>데이터를 v-text로 표시하는 예제(el이 2개이상일 경우)</h2>
<div id="app1">
<p v-text="myText1"></p>
</div>
<div id="app2">
<p v-text="myText2"></p>
</div>
<script>
//el이 2개이상일 경우 new Vue를 필요한 만큼여러번 선언하면 된다.
new Vue({
el: "#app1",
data: {
myText1: "Hello!!!",
},
});
new Vue({
el: "#app2",
data: {
myText2: "World",
},
});
</script>
v-html - 텍스트 내용을 HTML로 표시
<h2>HTML로 표시하는 예제</h2>
<div id="app">
<p>{{ myText }}</p>
<p v-text="myText"></p>
<p v-html="myText"></p>
</div>
<script>
new Vue({
el: "#app",
data: {
myText: "<h1>Hello!!!</h1>",
},
});
</script>
'Vue > 정리' 카테고리의 다른 글
| [Vue] 이벤트 연결 (0) | 2022.12.22 |
|---|---|
| [Vue] 사용자 입력 연결 (0) | 2022.12.22 |
| [Vue] 속성 지정 (0) | 2022.12.21 |
| [Vue] 데이터의 종류 (0) | 2022.12.21 |
| [Vue] Vue.js (0) | 2022.12.21 |
댓글