Vue.js 란?
사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다.
<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>- Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다.
- 데이터와 DOM을 연결하였기 때문에 반응형이 되었습니다.
<v-bind 속성>
- v-bind속성은 디렉티브라고 합니다.
- 디렉티브는 v-접두어가 붙어있으며 렌더링 된 DOM에 특수한 반응형 동작을 합니다.
- v-대신 :만 붙혀도 적용가능
- 함수도 적용 가능하다 (매개변수=파라미터 도 적용가능)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 넣어주는 값 = 인자 = 아규먼트 -->
{{ nextYear('안녕!! ') }}
<input :type="type" :value="inputData">
<a :href="link">홍길동 채녈1</a>
<a :href="getLink()">홍길동 채녈2</a>
</div>
<script>
new Vue({
el: '#app',
data: {
person:{
name: '홍길동',
age: 34
},
inputData: '안녕',
type: 'number',
link: 'https://www.youtube.com'
},
methods: {
getLink(){
return this.link;
},
// 함수 사용 가능
// 매개변수 = 파라미터
nextYear(greating){
return greating + this.person.name + '은 내년에 ' + (this.person.age +1) + '살 입니다';
},
otherMethod: function(){
this.nextYear();
}
}
})
</script>
</body>
</html><이벤트> : 버튼을 클릭했을 때 발생하는 현상
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form v-on:submit.prevent="submit">
<input type="text"><br>
<button type="submit">Submit</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
year: 2018
},
methods: {
plus(){
return this.year++;
},
minus(){
return this.year--;
},
submit(){
alert('summited');
console.log('hello');
}
},
})
</script>
</body>
</html><미리보기 이벤트>
- 양방향 바인딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form v-on:submit.pervent="submit">
<!-- <input type="text" :value="text" @keyup="updateText"><br> -->
<!-- 위의 input태그를 양방향 바인딩으로 바꾸는 방법 : v-model -->
<input type="text" v-model="text"><br>
{{text}}<br>
<button type="submit">Submit</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
year: 2018,
text: 'text'
},
methods: {
plus(){
return this.year++;
},
minus(){
return this.year--;
},
submit(){
alert('summited');
console.log('hello');
},
// updateText(event){
// this.text = event.target.value;
// }
},
})
</script>
</body>
</html><computed 속성>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 간단한 연산은 사용 가능 -->
{{ reversedMessage }}
{{ reversedMessage }}
{{ reversedMessage }}
</div>
<script>
new Vue({
el: '#app',
data: {
message : '안녕하세요'
},
methods: {
// 함수 : 호출 시 마다 새로 계산
},
computed:{
// 최초 한번 계산후 저장된 캐쉬를 적용
reversedMessage(){
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html><watch 속성>
왠만하면 computed속성을 사용하지만 watch속성을 사용해야 할 때만 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 간단한 연산은 사용 가능 -->
{{message}}<br>
<button @click="changeMessage">Click</button><br>
{{updated}}
</div>
<script>
new Vue({
el: '#app',
data: {
message : '안녕하세요',
updated : '아니요'
},
methods: {
// 함수 : 호출 시 마다 새로 계산
changeMessage(){
this.message = '헬로우';
}
},
computed:{
// 최초 한번 계산후 저장된 캐쉬를 적용
reversedMessage(){
return this.message.split('').reverse().join('');
}
},
watch: {
message(newVal, oldVal){
console.log(newVal. oldVal);
this.updated = '네';
}
}
})
</script>
</body>
</html><클래스 & 스타일 바인딩>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
color: red;
}
.font-bold{
font-weight: bold;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 클래스 바인딩 -->
<!-- 클래스 이름에 대시(-)가 있으면 '' 으로 묶어줘야 합니다. -> 'is-bolc' : isBold-->
<!-- <div :class="{red : isRed , bold : isBold}">Hello</div> -->
<!-- 스타일 바인딩 -->
<div :style=" {color : red, fontSize : size}">Hello</div>
<button @click="update">Click</button>
</div>
<script>
new Vue({
el: '#app',
data: {
red: 'red',
size: '30px'
},
methods: {
update(){
this.isRed = !this.isRed;
this.isBold = !this.isBold;
}
}
})
</script>
</body>
</html><v-show 와 v-if, v-else-if, v-else>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <template v-if="number === 1">
<div>1</div>
<div>2</div>
<div>3</div>
</template>
<div v-else-if ="number === 2">Hi</div>
<div v-else>No</div><br> -->
<div v-show = "show">Yes</div>
<br>
<button @click="toggle">Toggle</button><br>
</div>
<script>
new Vue({
el: '#app',
data: {
number: 1,
show : false
},
methods: {
increaseNumber() {
this.number++;
},
toggle(){
this.show = !this.show;
}
},
})
</script>
</body>
</html><v-for 속성>
- 배열 뿐만 아니라 객체도 사용 가능 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<div>{{people[0].name}} {{people[0].age}}</div>
<div>{{people[1].name}} {{people[1].age}}</div>
<div>{{people[2].name}} {{people[2].age}}</div>
</div>
<br>
<!-- key속성은 필수 : 유니크한 값을 가진 것을 사용 index는 사용 권장하지 않음 -->
<div v-for="(person, index) in people" :key="person.name + '-' + person.age">
<!-- 데이터만 변경하면 화면에 자동으로 반영 -->
{{person.name}} {{person.age}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
people:[
{name:'a', age:20},
{name:'b', age:21},
{name:'c', age:22},
{name:'d', age:23},
{name:'f', age:25}
]
},
methods: {
},
})
</script>
</body>
</html><여러개의 Vue 인스턴스 사용하기>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{name}} <br>
<button @click="changeText">Click</button>
</div>
<div id="app-1">
{{name}} <br>
<button @click="changeText">Click</button>
</div>
<script>
new Vue({
el: '#app',
data: {
name : 'kossie'
},
methods: {
changeText(){
this.name = 'lee update';
}
},
})
// 변수에 담으면 다른 객체에서 사용 가능하다.
new Vue({
el: '#app-1',
data: {
name : 'kossie1'
},
methods: {
changeText(){
this.name = 'lee update';
}
},
})
</script>
</body>
</html><Vue 컴포넌트>
-
전역 등록
-
지역 등록
풀스택 개발 이야기