๐ก Vue.js Options API: data, computed, watch and โ Executive Summary
Technical architectural analysis, practical configuration manifests, and deployment instructions for Vue.js Options API: data, computed, watch and.
props
javascript
<template></template>
<script>
import ...
export default {
name: "Name",
props: {
item: Object,
viewList: Array,
isRetrieving: Boolean,
show: Boolean,
title: String,
selected: Array,
required: Boolean
},
components: {},
data() {},
created() {},
computed: {},
filters: {},
methods: {},
watch: {}
};
</script>
components
data
javascript
<template></template>
<script>
import ...
export default {
name: "Name",
props: {},
components: {},
data() {
return {
}
},
created() {},
computed: {},
filters: {},
methods: {},
watch: {}
};
</script>
created
computed
filters
javascript
<template>
<div>
<span>{{ data | number }}</span>
</div>
</template>
<script>
import ...
export default {
name: "Name",
props: {},
components: {},
data() {},
created() {},
computed: {},
filters: {
telNo: (value) => {
let rtn = value.replaceAll('-','').replaceAll(' ','');
if (rtn.length > 11) {
return rtn.replace(/(\d{4})(\d{4})(\d)/, '$1 - $2 - $3');
} else if (rtn.length <= 11) {
return rtn.replace(/(\d{3})(\d{4})(\d)/, '$1 - $2 - $3');
}
},
},
methods: {},
watch: {}
};
</script>
methods
watch
javascript
<template></template>
<script>
import ...
export default {
name: "Name",
props: {},
components: {},
data() {},
created() {},
computed: {},
filters: {}
methods: {},
watch: { //Prop OR Data
/** Attribute Description
varSample: {
deep: true, //array ๋ด๋ถ์ ๋ฐ์ดํฐ ๋ณ๊ฒฝ์ ๊ฐ์ง
immediate: true, //ํ์ด์ง ๋ก๋์ ์ต์ด 1ํ ๋ฌด์กฐ๊ฑด ์คํ
handler: ${function} // watch ์ถฉ์กฑ์ ํธ์ถ๋ ํจ์ ๋ช
์
}*/
//deep์ด๋ immediate๋ฅผ ์ฌ์ฉํ์ง ์๋ ๊ฒฝ์ฐ::handler๋ง ๊ตฌํ
var1(newVal,oldVal) {},
var2: function(newVal,oldVal) {},
//Object type
'objVar.contents': function (newVal,oldVal) {},
//Array Type
arrayVar: {
deep: true,
handler() {}
}
}
};
</script>




Leave a Reply