Vue 방식 연습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.is App</title>
</head>
<body>
<div id="app">
<!-- 여기 #app 내부에 템플릿 출력하는 곳 -->
<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
}
});
</script>
</body>
</html>
console 창에서 수정해보기
반복문 적용시키기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.is App</title>
</head>
<body>
<div id="app">
<!-- 여기 #app 내부에 템플릿 출력하는 곳 -->
<p>{{message}}</p>
<ol>
<li v-for="item in list">{{item}}</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
list: ['사과', '바나나', '딸기']
}
});
</script>
</body>
</html>
app.list.push('오렌지')
List 정보 뽑아내보기 (monster)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.is App</title>
</head>
<body>
<div id="app">
<!-- 여기 #app 내부에 템플릿 출력하는 곳 -->
<p>{{message}}</p>
<input type="text" v-model="message"><br>
<input type="text" v-bind:value="message">
<ol>
<li v-for="item in list">{{item}}</li>
</ol>
<ul>
<li v-for="monster in monList">
아이디: {{ monster.id }} {{ monster.name }} HP: {{ monster.hp }}
</li>
</ul>
<button v-on:click="handleClick">버튼</button>
<p v-if="show">안녕 Vue.js!</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!!',
list: ['사과', '바나나', '딸기'],
show : true,
monList: [
{id: 1, name: '슬라임', hp: 100 },
{id: 2, name: '고블린', hp: 200 },
{id: 3, name: '드래곤', hp: 500 }
]
},
methods: {
handleClick: function (event) {
//alert(event.target);
alert(this.message);
}
},
created: function () {
axios.get('getBoardListJson.do').then(function (response) {
this.monList = response.data;
});
}
});
</script>
</body>
</html>
결과
반응형
'Develop' 카테고리의 다른 글
| Spring Cloud Gateway - Keycloak 연동 (0) | 2022.04.20 |
|---|---|
| Spring Cloud Gateway path 설정 (0) | 2022.04.20 |
| Chart.js 연습 (0) | 2021.03.13 |
| 아나콘다 3 설치 및 환경설정 (Mac) (0) | 2021.03.06 |
| intelliJ - github 연동 (token) (4) | 2020.12.27 |
