728x90
수업내용
1교시 (09:30-10:20)
- AugularJS, TypeScript비교 → Vue
- TypeScript: JS 문법에 타입 정보, 코드 검사 기능이 추가된 언어, 단방향
- AugualarJS: 타입스크립트 기반, 양방향
- Vue의 장점: 쉽다, 작은 사이즈, VirtualDOM
2교시 (10:30-11:20)
- vue_01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>vue_01</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<!--
MVVM 패턴 : Model -View - ViewModle : 어플리케이션 조직과 U의 분리를 위해 설계 패턴
View : 유저 언터페이스 : HTML, CSS 로 작성
ViewMode : 상태와 연산 : View의 실제논리 밑 데이터 흐름을 담당
Model : 도메인 특화 데이터
Vue라우터(vue-router)를 이용해
SPA(Single Page Application : 단일 페이지 어플리케이션) 아키텍처 어플리케이션 개발
{{}} : Mustache Expression: 콧수염표현식 : HTML DOM에 데이터 렌더링
v-text, {{}} : innerText 속성에 연결됨,
태그 문자열을 HTML 인코딩하여 나타내기 때문에
화면에는 태그 문자열이 그대로 나타남
v-html :innerHTML 속성에 연결됨, 태그 문자열을 파싱하여 화면에 나타냄
단 : XSS(Cros Site Scripting) 공격 등에 취약
-->
<!-- View -->
<div id="simple">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
<h2 v-html="message"></h2>
</div>
<script>
// Model
var model = { message: '첫 번 째 Vue.js 앱 입니다.'};
// ViewModel
var simple = new Vue({
el: '#simple',
data : model
});
</script>
</body>
</html>
- vue_01.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>vue_01</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<%
String s = "첫 번 째 Vue.js 앱 입니다.";
%>
<div id="simple">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
<h2 v-html="message"></h2>
</div>
<script>
let ss = "<%= s %>"
// Model
var model = {message: ss};
// ViewModel
var simple = new Vue({
el : '#simple',
data : model
});
</script>
</body>
</html>
- vue_02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>vue_02</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<!--
v-bind : 단방향
v-bind:src -> src
-->
<div id="simple">
<input type="text" id="a" v-bind:value="message">
<br>
<img v-bind:src="imagePath">
<br>
<img v-bind:src="imagePath1">
<br>
<img v-bind:src="imagePath2">
<br>
<img :src="imagePath1">
</div>
<script>
var model = {
message: 'v-bind 디렉티브',
imagePath: "http://sample.bmaster.kro.kr/photos/61.jpg",
imagePath1:"/testVue/img/ase.gif",
imagePath2: "/testVue/img/1 (3).png"
};
var simple = new Vue({
el: '#simple',
data : model
});
</script>
</body>
</html>
- vue_03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>vue_03</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<!--
v-model : 양방향 데이터 바인딩
-->
<div id="simple">
<input type="text" v-model="name" placeholder="이름을 입력하세요"/>
<br>
입력된 이름 : <h2 v-html="name"></h2>
</div>
<script>
var twoway = new Vue({
el : "#simple",
data : {name: ''}
});
</script>
</body>
</html>
- vue_04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>vue_04</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<!--
v-model.lazy
v-model.number type=number
v-model.trim
-->
<div id="simple1">
<div>좋아하는 과일을 모두 골라주세요 : </div>
<input type="checkbox" value="1" v-model="fruits">사과
<input type="checkbox" value="2" v-model="fruits">키위,
<input type="checkbox" value="3" v-model="fruits">포도,
<input type="checkbox" value="4" v-model="fruits">수박,
<input type="checkbox" value="5" v-model="fruits">참외
</div>
<hr/>
<div id="simple2">
선택한 과일들 : <span v-html="fruits"></span>
</div>
<script>
var model = {
fruits: []
}
var simple1 = new Vue({
el : '#simple1', data : model
});
var simple2 = new Vue({
el : '#simple2', data : model
});
</script>
</body>
</html>
3교시 (11:30-12:20)
- 프로젝트 진행
4교시 (12:30-13:20)
- 프로젝트 진행
5교시 (14:30-15:20)
- 프로젝트 진행
6교시 (15:30-16:20)
- 프로젝트 진행
7교시 (16:30-17:20)
- 프로젝트 진행
8교시 (17:30-18:30)
- 프로젝트 진행
Notes
728x90