Articles in this Category

Top Left Text cha

Website Development Services

Instance

Every Vue application starts by creating a new Vue instance...
var vm = new Vue({
el: '#example',
data: '
var1: "hello",
var2: "world"
})

Template Stuff, Directives

insert into template:
<span>Message: {{ msg }}</span>

v-bind
<div v-bind:class="classObject"></div><div :class="classObj"></div>
div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
or cleaner:
<div v-bind:style="styleObject"></div>
data: { styleObject: { color: 'red', fontSize: '13px' } }

v-on
<div v-on:click="doSomething">

v-model
<div v-model

v-once
<span v-once>This will never change: {{ msg }}</span>

v-if
<h1 v-if="oneThing">Show One Thing</h1> <h1 v-else>Show Another Thing</h1>
on a template:
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>

v-show
<h1 v-show="ok">Hello!</h1>

v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles. v-if is also lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time. In comparison, v-show is much simpler - the element is always rendered regardless of initial condition, with CSS-based toggling. Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.

v-for

var app3 = new Vue ({
    el: "#el3",
    data: {
        list: [
            {text:"A"},
            {text:"B"},
            {text:"C"},
            {text:"D"}
        ]
    }
})

    <div id="el3" class="lesson">
        <h4>v-for lists</h4>
        <ul>
            <li v-for="li in list">{{li.text}}</li>
        </ul>
    </div>

<div v-for="item of items"></div>

<ul id="v-for-object" class="lesson">
    <li v-for="(value, index) of object">
        {{ index }}: {{ value }}
    </li>
</ul>


new Vue({
    el: '#v-for-object',
    data: {
        object: {
            item1: 'abc',
            item2: 'def',
            item3: 123
        }
    }
})



  • No comments found

Leave your comments

Post comment as a guest

0
Your comments are subjected to administrator's moderation.
X