Vue.js
-
사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크
-
React와 많이 비교되는데, React는 모든 것을 JavaScript로 처리하며, JSX를 통해서 HTML, CSS 관리를 함
-
Vue는 HTML,CSS,Javascript를 먼저 배운 사람들에게 익숙한 형태, 고전적인 웹 기술의 형태를 사용함
-
Vue를 사용할 때는, 순수 자바스크립트로 함수를 구성할 것(리소스 문제)
활용 기법
-
let 태그 = new Vue()에서 객체 형태인{}으로, 태그에서 지정한 객체명에 값을 대입함 -
el: '태그'를 통해 해당 태그를 설정,data: { 객체명: '값'}를 통해 값을 설정 -
텍스트는
{{ }}형태로 입력
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!!!'
}
</script>
</body>
Vue 라이프사이클
-
beforeCreate는 인스턴스가 초기화 된 후 함수 실행 -
created는 인스턴스가 작성된 후 함수 실행 -
mounted는 인스턴스가 마운트 된 직후 호출 -
updated는 데이터가 변경되어 가상 DOM이 재 렌더링되고 패치되면 호출
출처 : https://joshua1988.github.io/vue-camp/vue/life-cycle.html#라이프-사이클-다이어그램
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>{{ nowDate }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!!!',
nowDate: '2022.05.26'
},
beforeCreate: function(){
console.log('beforeCreate!!!');
},
created: function(){
console.log('created!!!');
},
mounted: function() {
console.log('mounted!!!');
},
updated: function() {
console.log('updated!!!');
}
});
</script>
</body>
this
this를 사용할 수 있고,this.객체명으로 해당 값을 불러올 수 있음
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>{{ nowDate }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!!!',
nowDate: '2022.05.26',
changeText: 'hi vue!!!'
},
beforeCreate: function() {
console.log('beforeCreate!!!');
console.log(this.changeText);
},
created: function() {
console.log('created!!!');
console.log(this.changeText);
},
mounted: function() {
console.log('mounted!!!');
this.changeText = 'i am vue.js!!'
console.log(this.changeText);
},
updated: function() {
console.log('updated!!!');
console.log(this.changeText);
}
});
</script>
</body>
v-bind
v-bind:속성=""을 사용하여 쉽게 속성을 추가할 수 있음
<body>
<div id="app">
<div id="menu" v-bind:class="menuToggle">menu</div>
<a v-bind:href="goHome" v-bind:title="title">
<input v-bind:type="inputType" v-bind:checked="checked">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
menuToggle: 'active',
goHome: 'http://naver.com',
title: 'naver',
inputType: 'radio',
checked: true
}
});
</script>
</body>
v-for
-
v-for="별칭 in 배열 명칭"을 사용하여 배열을 기반으로 리스트를 불러올 수 있음 -
item in items형태 필요,items는 원본 데이터 배열의 명칭,item은 새로 지정할 별칭 -
(별칭, index) in 배열 명칭으로 설정하면 각각의 index 값을 불러올 수 있음
<div id="app">
<header id="header">
<ul id="menu">
<li v-for="(list, index) in menuList">
<a v-bind:href="list.ahref">
{{index}}{{list.menu}}
</a>
</li>
</ul>
</header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
menuList: [{
menu: 'company',
ahref: 'http://naver.com'
},
{
menu: 'product',
ahref: 'http://kakao.com'
},
{
menu: 'gallery',
ahref: 'http://instagram.com'
},
{
menu: 'location',
ahref: 'http://github.com'
}
]
}
});
</script>
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.