728x90
샘플 1
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습용!!ㅋㅋㅋ</title>
</head>
<body>
<!-- 바메스 -->
<main id="app">
<h2>{{name}}</h2>
<h2 v-text="name">이름</h2>
<h2>{{job}}</h2>
</main>
<script>
// A. 서버에서 가져온 데이터
let introduceData = {
"name" : "홍길동",
"job" : "개발자"
};
// B. 뷰 생성
let introduceTemplate = new Vue({
// 엘데메마
el : "#app", // 1. 이 뷰 인스턴스가 적용될 html엘리먼트 지정!!!
data(){ // 2. 이 뷰 인스턴스가 반환할 데이터 지정
return{
name : "",
job : ""
}
},
methods : { // 3. 메소드 생성 (서버에서 받아온 데이터를 뷰 데이터에 선언하기 등)
fetchUser(){
// 3-1) 서버에서 받아온 데이터 가져와
let result = introduceData;
// 3-2) 서버에서 받아온 데이터를 뷰 데이터로 옮겨
this.name = result.name; // 홍길동
this.job = result.job; // 개발자
}
},
mounted(){ // 4. 최초에 데이터를 렌더링할 때 1번
this.fetchUser();
}
})
</script>
</body>
</html>
샘플 2
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main id="app">
<h2 v-text="main_title">Hello, Vue.js</h2>
<h3 v-text="main_content">Hi</h3>
<!-- 반응형 태그 -->
<h3>{{main_content2}}</h3>
<div v-if="today_weather_show_flg">
<h4>{{today_weather}}</h4>
<button @click="fetchWeather">오늘의 날씨보기</button>
</div>
<div v-else>
<h3>오늘의 운세</h3>
<h4>{{today_lucky}}</h4>
</div>
<div>
<ul>
<li v-for="book in user_books">
<h5>{{book.title}}</h5>
<h5>{{book.author}}</h5>
</li>
</ul>
</div>
</main>
<script>
//server에서 가져온 데이터1
//{"api/custId}"
let introduceData = {
"name" : "김길동",
"job" : "developer",
"weatherServiceAgreeYn" : "N",
"lucky" : "좋음"
};
//server에서 가져온 데이터2
//"api/{custId}/{books}"
let bookData = {
books : [
{
title : "자바8과 스프링",
author : "김민규"
},
{
title : "목민심서",
author : "정약용"
}
]
}
let weatherData = {
"today" : "흐림"
}
// 뷰 생성 -----------------
let introduceTemplate = new Vue({
el : "#app",
data(){
return{
main_title : "길동의 자기소개 페이지",
main_content : "안녕하세요!!",
main_content2 : "반갑습니다^^",
today_weather: "",
today_weather_click_cnt : 0,
today_weather_show_flg : false,
today_lucky : "",
user_books : []
}
},
methods : {
fetchUser(){
// server Ajax
let result = introduceData;
// data change
this.main_title = result.name;
this.main_content = result.job;
//날씨를 노출할지 안할지 로직을 만들자.
if(result.weatherServiceAgreeYn == "Y"){
this.today_weather_show_flg = true;
}else{
this.today_weather_show_flg = false;
}
if(result.weatherServiceAgreeYn == "N"){
this.today_lucky = result.lucky;
}
},
fetchWeather(){
// server Ajax
let result = weatherData;
// data change
this.today_weather = weatherData.today;
},
//책리스트도 서버에서 가져와서, 최초 데이터렌더링때 사용
fetchBooks(){
let result = bookData;
let books = bookData.books;
this.user_books = books;
}
},
//최초에 데이터를 렌더링할 때 1번
mounted(){
this.fetchUser();
this.fetchBooks();
}
})
</script>
</body>
</html>'Frond-end > Vue' 카테고리의 다른 글
| [Vue3] vue-simple-calendar 라이브러리 적용하기 (0) | 2024.03.25 |
|---|---|
| [트러블슈팅/ Vue3] 컴포넌트에 데이터 바인딩이 되지 않는 문제(feat. ref, watch) (0) | 2024.03.25 |
| [Vue3, SpringBoot, MariaDB] 이전글/ 다음글 구현하기 (0) | 2024.03.21 |
| [Vue3] 의료 플랫폼 개발 기록 (0) | 2024.03.19 |
| [Vue] Visual Studio Code에서 Vue3 설치 (NodeJS) (0) | 2023.12.04 |