Categories :

Vue3 basic tutorial – SPA application with Vue3 JS

Warm Greetings! If you are an absolute beginner and searching for Vue3 basic tutorial you are in right place now. VueJs is one of the most popular Progressive JavaScript Framework in the world. Evan You is the creator of these amazing frameworks. After complete this tutorial series you will be able to make any kind of application with VueJS. SPA or Single Page Application strategy is the modern feature for developing a web application.

Why VueJS?

  • Approachable: No need to wait or many concept before starting Vue. Already know HTML, CSS and JavaScript? You will be able to start building things no time.
  • Adoptable: An incrementally adoptable ecosystem that scales between a library and a full-featured framework.
  • Performant: 20KB min+gzip Runtime, Blazing Fast Virtual DOM, Minimal Optimization Efforts.

VueJS is best for your old website to covert into the modern application. That’s why its is popularity increase so fast. Let’s first tour on VueJS with like jQuery CDN:

Suggestion: Not write full HTML script one time just write fist ID block like

<div id="counter">
    Counter: {{counter}}
</div>

Then write vue code for it.

const Counter = {
    data(){
        return {
            counter: 0
        }
    },

    mounted(){
        setInterval(()=>{
            this.counter++
        }, 1000)
    }
}

Vue.createApp(Counter).mount('#counter')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 Tutorial with CDN link</title>

    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>

    <!--Declarative Rendering-->

    <div id="counter">
        Counter: {{counter}}
    </div>

    <!--Binding-->
    <div id="bind-attribute">
        <span v-bind:title="message">
            Hover your mouse over me to see my dynamically bound data
        </span>
    </div>

    <!-- Handling User Input with VueJS-->
    <div id="event-handling">
       <p>{{ message }}</p>
       <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

    <!--Two way Binding-->
    <div id="two-way-binding">
        <p>{{ message }}</p>
        <input type="text" v-model="message">
    </div>

    <!--Conditionals and Loops-->
    <div id="conditional-rendering">
        <span v-if="seen">
            You see me!
        </span>
    </div>

    <script src="main.js"></script>
</body>
</html>

Now create your main.js file. Don’t forget to add

<script src="https://unpkg.com/vue@next"></script>
const Counter = {
    data(){
        return {
            counter: 0
        }
    },

    mounted(){
        setInterval(()=>{
            this.counter++
        }, 1000)
    }
}

Vue.createApp(Counter).mount('#counter')


const  AttributeBinding = {
    data(){
        return{
            message: 'You visited this page at ' + new Date().toLocaleString()
        }
    }
}

Vue.createApp(AttributeBinding).mount('#bind-attribute')

const EventHandling = {
    data() {
        return {
            message: 'Hello Vue JS!'
        }
    },
    methods: {
        reverseMessage(){
            this.message = this.message
            .split('')
            .reverse()
            .join('')
        }
    }
}

Vue.createApp(EventHandling).mount('#event-handling')

const TwoWayBinding = {
    data() {
        return {
            message: 'Hello VueJS!'
        }
    }
}

Vue.createApp(TwoWayBinding).mount('#two-way-binding')

const ConditionalRendering = {
    data() {
        return {
            seen: true
        }
    }
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')

Leave a Reply

Your email address will not be published.