02 뷰 데이터 (data) 와 메소드 (methods)
데이터(data)
데이터를 추가하려면 기본적으로 vue 인스턴스의 data에 정의해서 사용하면 됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ name }} {{ age }}</div>
<script>
new Vue({
el: '#app',
data: {
name: '뷰 테스트',
age : '50'
}
})
</script>
</body>
</html>결과화면
data속성 안에 object를 만들어서 사용할 수도 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ name }} {{ age }}</div>
<div>id: {{product.id}}, name: {{product.name}}, price:{{product.price}}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
product : {
id: 1,
name : '티셔츠',
price : 20000,
},
name: '뷰 테스트',
age : '50'
}
})
</script>
</body>
</html>결과화면
메서드(methods)
methods에는 함수가 들어갈 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ name }} {{ age }}</div>
<div>id: {{ product.id }}, name: {{ product.name }}, price:{{ product.price }}</div>
<div>{{ discountPrice() }}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
product : {
id: 1,
name : '티셔츠',
price : 20000,
},
name: '뷰 테스트',
age : '50'
},
methods: {
discountPrice: function () {
return `${this.product.price}의 할인 가격은 ${this.product.price - 5000} 원 입니다.`
}
},
})
</script>
</body>
</html>결과화면
참고
위 코드에서 this.data.product.price가 아닌 이유는 vuejs에서 data안의 내용을 바로 this안으로 넣어줌
콘솔에 this를 찍어보면 확인 가능하며 마찬가지로 methods안의 함수도 this안에 들어가 있다.
그렇기 때문에 다른 함수 안에서도 this로 함수를 호출 할 수 있다.
<script>
new Vue({
el: '#app',
data: {
product : {
id: 1,
name : '티셔츠',
price : 20000,
},
name: '뷰 테스트',
age : '50'
},
methods: {
discountPrice: function () {
console.log(this,'this');
return `${this.product.price}의 할인 가격은 ${this.product.price - 5000} 원 입니다.`
},
testfunc: function(){
this.discountPrice();
}
},
})
</script>매개변수(파라미터)로 값을 넘길 수도 있다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ name }} {{ age }}</div>
<div>id: {{ product.id }}, name: {{ product.name }}, price:{{ product.price }}</div>
<div>{{ discountPrice() }}</div>
<div>{{ sayHello('riverkim') }}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
product : {
id: 1,
name : '티셔츠',
price : 20000,
},
name: '뷰 테스트',
age : '50'
},
methods: {
discountPrice: function () {
console.log(this,'this');
return `${this.product.price}의 할인 가격은 ${this.product.price - 5000} 원 입니다.`;
},
sayHello: function(name){
return `${name} 안녕하세요 `;
}
},
})
</script>
</body>
</html>
결과화면
함수를 사용할 때 넣어주는 값-> 인자(Argument, 아규먼트)
<div>{{ sayHello('riverkim') }}</div>함수 안에서 설정된 변수-> 매개변수(Parameter, 파라미터)
sayHello: function(name){
return `${name} 안녕하세요 `;
}함수를 축약해서 사용할 수도 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ name }} {{ age }}</div>
<div>id: {{ product.id }}, name: {{ product.name }}, price:{{ product.price }}</div>
<div>{{ discountPrice() }}</div>
<div>{{ sayHello('riverkim') }}</div>
<div>{{ shortfunc() }}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
product : {
id: 1,
name : '티셔츠',
price : 20000,
},
name: '뷰 테스트',
age : '50'
},
methods: {
discountPrice: function () {
console.log(this,'this');
return `${this.product.price}의 할인 가격은 ${this.product.price - 5000} 원 입니다.`;
},
sayHello: function(name){
return `${name} 안녕하세요 `;
},
shortfunc(){
return `축약형 함수`
}
},
})
</script>
</body>
</html>
Hello!