Vue Instance속성
Vue method
- method안에서 data는 "this.데이터이름"으로 접근 가능
<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: { //메소드 안에서 data는 this.으로 접근한다.
helloEng() {
return 'Hello ' + this.name;
},
helloKor() {
return '안녕 ' + this.name;
},
},
});
</script>
</body>
* method안에서도 함수끼리 접근할땐 this.키워드를 사용한다.
body>
<h2>method test</h2>
<div id="app">
<div>
<label for="userid">아이디</label>
<input type="text" id="userid" v-model="userid" />
<label for="username">이름</label>
<input type="text" id="username" v-model="username" />
<button @click="checkVal"> 등록</button>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
userid: "",
username: "",
},
methods: {
checkVal() {
if (!this.userid) {
alert("아이디입력!!");
return;
} else {
this.register();
}
},
register() {
console.log("서버에 전송합니다.")
}
}
})
</script>
</body>
filter
- 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능
- 중괄호보간법( {{ }} ) 또는 v-bind속성에서 사용가능
<body>
<div id="app">
<div>
<input type="text" v-model="msg" />
</div>
<div>
<h2>결과 :</h2>
<h3>{{ msg | count1 }}</h3>
<h3>{{ msg | count2('문자를 넣어보세요') }}</h3>
</div>
</div>
<script>
Vue.filter('count1', (val) => { //전역 (이름, 콜백함수)
if (val.length == 0) {
return;
}
return `${val} : ${val.length}자`;
});
new Vue({
el: '#app',
data: {
msg: '',
},
filters: { //지역필터
count2(val, alternative) { //각각 (msg, 문자를넣어보세요)가 들어감
if (val.length == 0) {
return alternative;
}
return `${val} : ${val.length}자`;
},
},
});
</script>
</body>
<body>
<div id="app">
<div>
금액 : <input type="text" v-model="msg1" /><br />
전화번호 : <input type="text" v-model="msg2" />
</div>
<div>
<h3>{{ msg1 | price | won }}</h3> <!-- msg1을 가지고 price로 가-->
<h3>{{ msg2 | mobile }}</h3>
</div>
</div>
<script>
Vue.filter('price', (value) => {
if (!value) return value;
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); //정규표현식 3자리마다 , 찍기
});
Vue.filter("won", (value => {
return `${value}원`;
}));
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>
computed
- 특정데이터의 변경사항을 실시간으로 처리
- 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환
- setter와 getter를 직접 지정할 수 있음
<body>
<div id="app">
<input type="text" v-model="message" />
<p>원본 메시지: "{{ message }}"</p>
<p>역순으로 표시한 메시지1: "{{ reversedMsg }}"</p>
<p>역순으로 표시한 메시지2: "{{ reversedMsg }}"</p>
<p>역순으로 표시한 메시지3: "{{ reversedMsg }}"</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '안녕하세요 싸피여러분',
},
computed: {
//값처럼 사용, 매번호출X, 캐싱해서 어디다가 저장, 리턴이 반드시 있어야 함
//메세지가 바뀌지 않는이상 캐싱된 값 리턴
reversedMsg: function () {
console.log('거꾸로 출력');
return this.message.split('').reverse().join('');
},
},
});
</script>
</body>=> computed속성은 Vue인스턴스가 생성될 때, data의 message값을 받아 reversedMsg를 계산하여 저장 (캐싱)
=> methods속성이였다면, 각각 3번씩 호출
watch
- Vue Instance의 특정프로퍼티가 변경될 때 실행할 콜백함수 설정
: a를 지켜보다가 (watch) 값이 변경되면 함수 실행
<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) { //형식 외우기(new, old)
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>
<body>
<div id="app">
<p>원본 메시지: "{{ message }}"</p>
<p>역순으로 표시한 메시지: "{{ reversedMsg }}"</p>
<input type="text" v-model="message" />
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello',
reversedMsg: '',
},
watch: {
message: function (newVal, oldVal) {
console.log(newVal, oldVal);
this.reversedMsg = newVal.split('').reverse().join('');
},
},
});
</script>
</body>
'WEB > Vue.js' 카테고리의 다른 글
| [Vue] Axios (0) | 2022.05.11 |
|---|---|
| [Vue] Vue Component (0) | 2022.05.10 |
| [Vue] Vue event (0) | 2022.05.10 |
| [Vue] Vue Directive (0) | 2022.05.04 |
| [Vue] Vue.js란 (0) | 2022.05.03 |
댓글