❮ Vue Loop Vue Transitions ❯

Vue.js Instances

This section introduces several Vue.js examples to help reinforce the knowledge you've learned through practical exercises.

Navigation Menu Example

<div id="main">

    <!-- The active menu style is the 'active' class -->
    <!-- To prevent the link from jumping when clicked, we use the "prevent" modifier (short for preventDefault). -->

    &lt;nav v-bind:class="active" v-on:click.prevent>

        <!-- When a link in the menu is clicked, we call the makeActive method, which is created in the Vue instance. -->

        <a href="#" class="home" v-on:click="makeActive('home')">Home</a>
        <a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
        <a href="#" class="services" v-on:click="makeActive('services')">Services</a>
        <a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>
    </nav>

     <!-- The "active" variable will automatically change based on the currently selected value -->

    <p>You have selected the <b>{{active}} menu</b></p>
</div>

<script>
// Create a new Vue instance
var demo = new Vue({
    // DOM element, mount the view model
    el: '#main',

    // Define properties and set initial values
    data: {
        active: 'home'
    },

    // Functions used when clicking the menu
    methods: {
        makeActive: function(item){
            // The view will automatically update as the model changes
            this.active = item;
        }
    }
});
</script>

Text Editing Example

Text Editing

Click on the specified text to edit its content:

<!-- v-cloak hides uncompiled variables until the Vue instance is ready. -->
<!-- The hideTooltp() method is called after the element is clicked -->

<div id="main" v-cloak v-on:click="hideTooltip">

    &lt;!-- This is a tooltip
         v-on:click.stop is a click event handler, the stop modifier is used to prevent event propagation
         v-if is used to determine if show_tooltip is true before displaying -->

    <div class="tooltip" v-on:click.stop v-if="show_tooltip">

        &lt;!-- v-model binds the content of the text area
         The corresponding variable changes in real time as the content of the text area changes -->

        <input type="text" v-model="text_content" />
    </div>

    <!-- Call the "toggleTooltip" method upon click and prevent event propagation -->

    <!-- The "text_content" variable changes according to the content of the text area -->

    &lt;p v-on:click.stop="toggleTooltip">{{text_content}}</p>

</div>

<script>
var demo = new Vue({
    el: '#main',
    data: {
        show_tooltip: false,
        text_content: 'Click me and edit the content.'
    },
    methods: {
        hideTooltip: function(){
            // The view will automatically update as the model changes
            this.show_tooltip = false;
        },
        toggleTooltip: function(){
            this.show_tooltip = !this.show_tooltip;
        }
    }
})
</script>

Order List Example

Order List

Create an order list and calculate the total price:

&lt;form id="main" v-cloak>

    <h1>Services</h1>

    <ul>

        <!-- Loop through the services array and set the style after option click -->

        <li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ 'active': service.active}">

            &lt;!-- Display the service name and price
                 Vue.js defines a currency filter for formatting the price -->

            {{service.name}} <span>{{service.price | currency}}</span>

        </li>
    </ul>

    <div class="total">

        <!-- Calculate the total price of all services and format the currency -->

        Total: <span>{{total() | currency}}</span>

    </div>

</form>
<script>

// Custom filter "currency"
Vue.filter('currency', function (value) {
    return '$' + value.toFixed(2);
});

var demo = new Vue({
    el: '#main',
    data: {
        // Define model attributes
        // The view will loop through the array data
        services: [
            {
                name: 'Web Development',
                price: 300,
                active:true
            },{
                name: 'Design',
                price: 400,
                active:false
            },{
                name: 'Integration',
                price: 250,
                active:false
            },{
                name: 'Training',
                price: 220,
                active:false
            }
        ]
    },
    methods: {
        toggleActive: function(s){
            s.active = !s.active;
        },
        total: function(){

            var total = 0;

            this.services.forEach(function(s){
                if (s.active){
                    total+= s.price;
                }
            });

           return total;
        }
    }
});

</script>

Search Page Example

Search Page

Enter search content in the input box, and the list displays the configured list:

&lt;form id="main" v-cloak>

    <div class="bar">
        <!-- Bind the searchString model to the text area -->

        <input type="text" v-model="searchString" placeholder="Enter search content" />
    </div>

    <ul>
        <!-- Loop through the data -->

        <li v-for="article in filteredArticles">
            <a v-bind:href="article.url"><img v-bind:src="article.image" /></a>
            <p>{{article.title}}</p>
        </li>

</ul>
</form>
<script>
var demo = new Vue({
    el: '#main',
    data: {
        searchString: "",
        // Data model, in a real environment you can fetch this via Ajax
        articles: [
            {
                "title": "What You Need To Know About CSS Variables",
                "url": "https://www.tutorialpro.org/css/css-tutorial.html",
                "image": "https://static.tutorialpro.org/images/icon/css.png"
            },
            {
                "title": "Freebie: 4 Great Looking Pricing Tables",
                "url": "https://www.tutorialpro.org/html/html-tutorial.html",
                "image": "https://static.tutorialpro.org/images/icon/html.png"
            },
            {
                "title": "20 Interesting JavaScript and CSS Libraries for February 2016",
                "url": "https://www.tutorialpro.org/css3/css3-tutorial.html",
                "image": "https://static.tutorialpro.org/images/icon/css3.png"
            },
            {
                "title": "Quick Tip: The Easiest Way To Make Responsive Headers",
                "url": "https://www.tutorialpro.org/css3/css3-tutorial.html",
                "image": "https://static.tutorialpro.org/images/icon/css3.png"
            },
            {
                "title": "Learn SQL In 20 Minutes",
                "url": "https://www.tutorialpro.org/sql/sql-tutorial.html",
                "image": "https://static.tutorialpro.org/images/icon/sql.png"
            },
            {
                "title": "Creating Your First Desktop App With HTML, JS and Electron",
                "url": "https://www.tutorialpro.org/js/js-tutorial.html",
                "image": "https://static.tutorialpro.org/images/icon/html.png"
            }
        ]
    },
    computed: {
        // Computed property to match the search
        filteredArticles: function () {
            var articles_array = this.articles,
                searchString = this.searchString;
            if(!searchString){
                return articles_array;
            }

searchString = searchString.trim().toLowerCase();

articles_array = articles_array.filter(function(item){
    if(item.title.toLowerCase().indexOf(searchString) !== -1){
        return item;
    }
});

// Return filtered data
return articles_array;
}
}
});
</script>

Switching Different Layout Instances

Switching Different Layouts

Click the button at the top right to switch between different page layouts:

&lt;form id="main" v-cloak>

    <div class="bar">

        <!-- Two buttons to switch between different list layouts -->

        <a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
        <a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
    </div>

    <!-- We have set up two layout pages. Which one is used depends on the "layout" binding -->

    <ul v-if="layout == 'grid'" class="grid">
        <!-- Use large images, no text -->
        <li v-for="a in articles">
            <a v-bind:href="a.url" target="_blank" rel="noopener noreferrer"><img v-bind:src="a.image.large" /></a>
        </li>
    </ul>

    <ul v-if="layout == 'list'" class="list">
        <!-- Use small images and titles -->
        <li v-for="a in articles">
            <a v-bind:href="a.url" target="_blank" rel="noopener noreferrer"><img v-bind:src="a.image.small" /></a>
            <p>{{a.title}}</p>
        </li>
    </ul>

</form>
<script>

    var demo = new Vue({
        el: '#main',
        data: {
            // View model, possible values are "grid" or "list".
            layout: 'grid',

            articles: [{
                "title": "HTML Tutorial",
                "url": "https://www.tutorialpro.org/html/html-tutorial.html",
                "image": {
                    "large": "https://static.tutorialpro.org/images/mix/htmlbig.png",
                    "small": "https://static.tutorialpro.org/images/icon/html.png"
                }
            },
            {
                "title": "CSS Tutorial",
                "url": "https://www.tutorialpro.org/css/css-tutorial.html",
                "image": {
                    "large": "https://static.tutorialpro.org/images/mix/cssbig.png",

[
    {
        "title": "CSS Tutorial",
        "url": "https://www.tutorialpro.org/css/css-tutorial.html",
        "image": {
            "large": "https://static.tutorialpro.org/images/mix/cssbig.png",
            "small": "https://static.tutorialpro.org/images/icon/css.png"
        }
    },
    {
        "title": "JS Tutorial",
        "url": "https://www.tutorialpro.org/js/js-tutorial.html",
        "image": {
            "large": "https://static.tutorialpro.org/images/mix/jsbig.jpeg",
            "small": "https://static.tutorialpro.org/images/icon/js.png"
        }
    },
    {
        "title": "SQL Tutorial",
        "url": "https://www.tutorialpro.org/sql/sql-tutorial.html",
        "image": {
            "large": "https://static.tutorialpro.org/images/mix/sqlbig.png",
            "small": "https://static.tutorialpro.org/images/icon/sql.png"
        }
    },
    {
        "title": "Ajax Tutorial",
        "url": "https://www.tutorialpro.org/ajax/ajax-tutorial.html",
        "image": {
            "large": "https://static.tutorialpro.org/images/mix/ajaxbig.png",
            "small": "https://static.tutorialpro.org/images/icon/ajax.png"
        }
    },
    {
        "title": "Python Tutorial",
        "url": "https://www.tutorialpro.org/pyhton/pyhton-tutorial.html",
        "image": {
            "large": "https://static.tutorialpro.org/images/mix/pythonbig.png",
            "small": "https://static.tutorialpro.org/images/icon/python.png"
        }
    }
]

❮ Vue Loop Vue Transitions ❯