Articles in this Category

Top Left Text cha

Website Development Services


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>

<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' } }

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

<div v-model

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

<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>

<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.


var app3 = new Vue ({
    el: "#el3",
    data: {
        list: [

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

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

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

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

Your comments are subjected to administrator's moderation.