Vue method
- Vue Instance는 생성과 관련된 data 및 method의 정의 가능
- method 안에서 data를 this.데이터이름 으로 접근 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>data : {{message}}</div>
<div>method kor : {{helloKor()}}</div>
<div>method eng : {{helloEng()}}</div>
</div>
<script>
new Vue({
el: "#app",
data: {
message: "Hello",
name: "여러분",
},
methods: {
helloEng() {
return "Hello " + this.name;
},
helloKor() {
return "안녕 " + this.name;
},
},
});
</script>
</body>
</html>
Vue filter
- 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능
- filter를 이용하여 표현식에 새로운 결과 형식을 적용
- 중괄호 보간법 {{}} 또는 v-bind 속성에서 사용 가능
- 여러 개 사용 가능
<!-- 중괄호 보간법 -->
{{msg | capitalize}}
<!-- v-bind 표현 -->
<div v-bind:id="rwaId | formatId"></div>
천 단위마다 ',' 찍기 / 전화번호에 '- ' 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
금액 : <input type="text" v-model="msg1" /><br />
전화번호 : <input type="text" v-model="msg2" />
</div>
<div>
<h3>{{ msg1 | price }}</h3>
<h3>{{ msg2 | mobile }}</h3>
</div>
</div>
<script>
Vue.filter('price', (value) => {
if (!value) return value;
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
});
Vue.filter('mobile', (value) => {
if (!value || !(value.length === 10 || value.length === 11)) return value;
return value.replace(/^(\d{3})(\d{3,4})(\d{4})/g, '$1-$2-$3');
});
new Vue({
el: '#app',
data: {
msg1: '',
msg2: '',
},
});
</script>
</body>
</html>
Vue computed
- 특정한 데이터의 변경사항을 실시간으로 처리
- 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환 (method와의 차이점)
- Setter와 Getter를 직접 지정할 수 있음
- 작성은 method 형태로 작성하지만 Vue에서 proxy 처리하여 property처럼 사용
Vue watch
- Vue Instance의 특정 property가 변경될 때 실행할 콜백 함수 설정
- Computed는 종속된 data가 변경되었을 경우 그 data를 다시 계산하여 캐싱 (자기 자신)
- Watch의 경우는 data가 변경되었을 경우 다른 data를 (변경하는) 작업을 함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="a" />
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a: 1,
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal);
},
},
});
console.log(vm.a);
vm.a = 2; // => new: 2, old: 1
console.log(vm.a);
</script>
</body>
</html>'WEB > front-end' 카테고리의 다른 글
| [Vue 기초 4] Component (0) | 2023.05.14 |
|---|---|
| [Vue 기초 3] Event, Binding (0) | 2023.05.05 |
| [Vue 기초 1] Vue instance, directive (0) | 2023.05.04 |
| JSON (JavaScript Object Notation) (0) | 2023.04.27 |
| Event Handler (0) | 2023.04.27 |
