🙊 Vue.js
-
html tag 기반의 구조를 동적 처리가 가능한 framework
-
뷰는 설치 없이 script 태그로 바로 사용할 수 있다 (감동)
🔵 Vue CDN
<!-- head에 추가 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>🙊 Vue Instance
모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작.
var vm = new Vue({
// 옵션
})var example1 = new Vue({
// element의 약어 속성으로 tag를 지정
// 설정한 tag에 Vue 객체를 매핑하겠다는 설정
// el 속성에 매핑된 html 영역에 사용될 데이터 설정 부분
el: '#example-1',
data: {
// items는 사용자 정의 임의 설정
items: [
{ message: 'Foo' },
{ message: 'Bar' },
{ message: 'Test'}
]
}
});🙊 v-directive
-
👍 jsp는 불필요하게 하는 요인 (나는 jsp가 싫다)
-
jsp가 아니어도 ajax + vue.js 적절히 활용하면 현 시점의 트렌드의 적합한 개발 구조
Commonly used directives ( + examples)
🔵 v-for
<body>
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' },
{ message: 'Test'}
]
}
});
</script>
</body>🔵 v-bind
<body>
<h3>[1] v-bind 속성</h3>
<div id="app1">
<input type="text" v-bind:value="message">
</div>
<script>
let model1 = {
message : "v-bind 학습",
link : "http://www.google.com"
}
new Vue({
el : "#app1",
data : model1
});
</script>
<br><hr><br>
</body><input type="text" v-bind:value="message">- 데이터를 가져올 수는 있지만 input 에 작성한 새로운 value는 Vue 객체를 업데이트 하지 않는다
<a :href="link">구글</a>v-bind를 생략하고:로만 작성 가능
🔵 v-model
<body>
<h3>[2] v-model 속성</h3>
<div id="app2">
<input type="text" v-model="message">
메세지 : <span v-text="message"></span>
</div>
<script>
let model2 = {
message : "v-model 학습",
link : "http://www.google.com"
}
new Vue({
el : "#app2",
data : model2
});
</script>
</body>- 데이터를 가져올 수는 있고 input 에 작성한 새로운 value는 Vue 객체 실시간 업데이트
- Vue 영역 안에서 JS 데이터간에 실시간 양방향 소통 작업 수행
- view 영역 수정해도 JS 데이터(model)도 자동 수정
v-text로 업데이트 된 데이터 실시간 출력
🔵 예제: select
<body>
<div id="app3">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" v-model="car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<p v-text="car"></p>
</div>
<script>
// select에서 선택한 value 활용
let model3 = { car : "" };
new Vue({
el : "#app3",
data : model3
});
</script>
</body>🔵 실습 예제:
<body>
<h3> 제시된 Ui와 화명구성하기</h3>
<br>
<div id="pick">
<label for="grade">1. 학년선택:</label>
<select id="grade" v-model="grade">
<option value="1학년">1학년</option>
<option value="2학년">2학년</option>
<option value="3학년">3학년</option>
</select>
<br><br>
2. 수강과목선택:</label><br>
<input type="checkbox" id="subject" value="국어" v-model="subject">국어<br>
<input type="checkbox" id="subject" value="영어" v-model="subject">영어<br>
<input type="checkbox" id="subject" value="수학" v-model="subject">수학<br>
<br>
3. 이름입력:</label><br>
<input type="text" v-model="inputName">
<br>
<hr color='blue'><br>
</div>
4. 정보출력 <br>
<div id="display">
<li>학년 : {{grade}}</li>
<li>수강과목: {{subject}}</li>
<li>이름: {{inputName}}</li>
</div>
<script>
let model = { grade: "", subject: [], inputName: "" }
new Vue({
el: "#pick",
data: model
})
new Vue({
el: "#display",
data: model
})
</script>
</body>checkbox의value를model데이터에서 배열데이터인subject의 append- 다른
el값을 가진 같은 Vue 인스턴스를 사용해 I/O 구분 {{vueInstanceValue}}- 데이터 바인딩의 가장 기본 형태
result:
조하운