Vue.js Options API: data, computed, watch and

๐Ÿ’ก 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>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *