Skip to content

Latest commit

 

History

History
208 lines (144 loc) · 5.32 KB

README.md

File metadata and controls

208 lines (144 loc) · 5.32 KB
Raw
description
Some notes on vue

Vue

Some directives

v-html: It's a bind for interpreting the passed vould from js expression as html.

<p v-html="func1()"></p>

v-bind:href: It's an example of a bind for setting html properties based on vue outputs.

<a :href="dynamicHref"></a>

v-once: any dynamic binding gets used only the first time

v-for="elem in eleList": It's an example of an iterator directive for vue elements.

@click.enter: It's an example of event modifier where we edit the click event

@submit.prevent: Prevent browser from refresh the page on submit button

v-model='data'is equivalent to v-bind:value=data v-on:input="setData($event)" where you bind the data for an input for example

To use an event data we can refer to event into the function parameters, then access its data, like:

<input @keydown="eventName">
</input>
eventName() {
	this.varMe = event.target.value;
}

alternatively,

<input ref="refName">
</input>

then,

eventName() {//trigger at a given point
	this.varMe = this.$refs.refName;
}

Most of the times you want to use computed instead of methods to avoid unnecesary recalculations(computed keep track of execution dependencies)

Kickstarting code

# Sample kickstarting code for a vue application (app.js)
Vue.createApp({
    data() {
        return {
            obj1: "Hello world"
        }
    },
    methods: {
        fun1() {
            return Math.random()
        }
    },
    computed: { // no params required and only re-executed 
        fun2() {
            return ''
        }
    },
    watch: { // If a value or computed property change
        fun2: obj1(value oldValue) {
            return '' //Perform operation when obj data value changes
        }
    }
}).mount("#app");
<div id="app">
    <p>
        {{ obj1 }}
    </p>
    <p>
        {{ fun2 }}
    </p>
</div>

  • Vue re-execute all methods inserted in the html so methods are not the best solution for outputing dynamicly calculated values

  • computed properties are not inserted as methods '()' only referenced so vue call them

  • Vue detects dependencies on computed properties to trigger its re-execution.

  • v-on can be substituted by @

  • v-bind:value can be substitued by :value

    image-20210408220726578

Style binding:

:style="borderColor: attr ? 'red': '#ccc'" ternary expression, but is dangerous bc it can override css classes, for classes:

:class="{demo: true, active: attrAct}" here if attrAct is true then active class is also used,

the {demo:true, active: attrAct} could be the returned value of a computed property. Can't also be an array of the shape: ['demo', {active: attrAct}]

v-if="condition" can be use for conditional showing

Right after v-if, v-else or v-else-if="newCondition" can be use as complement

User v-show only if visisbility state changes a lot.

v-for can be used for iterating on objects like v-for=(value, key, index) in {key1: 'v1', key2: 'v2'} , remember to use :key="goal" where goal is is a unique reference to each element in the list iterate over in the v-for

image-20210408220537910

An event that want to be stopped in children propagations can be achieved by @event.stop

Remember to use.

Other hooks can be added to the vue app as:

image-20210425221524014

They're added as syblings to data or methods

Components

app.component('component-name', {
    template: `html`,
    data () {
        return {id: 1}
    },
    methods () {
        m1 () {
            return 1;
        }
    }
})

Tools

References