Vue3

Sun Jan 21 2024

Using Vue3

Written by: Cesar

4 min read

vue

progamming

vuejs

learning

javascript

The easiest way to get started is by simply using the cdn version of vue in an html page like so:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Then writing all your code in a js file. In the main.js you will create your vue app like so:

const app = Vue.createApp({
    data() {
        return {
            cart: []
        }
    },
    methods: {
        updateCart(id) {
            this.cart.push(id)
        }
    }
})

This is using the Options API which is one way of creating vue apps, which uses an object of options such as data, methods, and mounted. Properties are then exposed on this inside functions.

and simply including that file and other supporting js files in the body tag like so:

  <script src="main.js"></script>
  <script src="components/ProductDisplay.js"></script>

  <script>
        const mountedApp = app.mount('#app')
  </script>

and calling the mount method on the vue app object that was created in the main.js.

Then in your html you can access this data and it will be reactive, meaning that if the cart variable changes, that change will be shown on the page.

<body>
    <div id="app">
        Cart {{ cart.length }}
    </div>
</body>

There are a couple of basics to need to create a vue app. One of those is to display data that our vue app is working with. This is done by using the {{}} syntax, like shown above. The other thing we do often is bind html tag attributes to a vue app, like so:

<img v-bind:src="image" :class="{ 'out-of-stock-img': !inStock}" alt="sock">
<img :src="image" :class="{ 'out-of-stock-img': !inStock}" alt="sock">

Here we are binding the src, and class atributes of the img tag, this is one way binding from our vue data to the html. Whenver the vue app changes image or inStock, this will update the image tag in realtime. There are two way to bind a variable to an attribute using v-bind:src or :src

The other task we often need to do is to conditionally render content. This can be done using v-if or v-show

<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>

In this code block the In Stock will display only if the value of inStock evaluates to true, otherwise Out of Stock will be shown. Another way to conditionally display content is to use v-show="isOn" , which hides or displays content.

The other task we often do is to listen for events and to perform an action when those events fire. We acheive this by adding listeners using v-on:click or @click

<button class="button" :class="{ disabledButton: !inStock}" :disabled="!inStock" @click="addToCart">Add to Cart</button>

In this example we are listening for the click event on the button tag by using the shorthand @click syntax and the addToCart function will be called. Then in our vue app we have a function defined like so:

methods: {
    addToCart() {  
        // code to add to cart                      
    }
}

We are also able to loop through arrays in html using the v-for syntax

<ul>
    <li v-for="(review, index) in reviews" :key="index">
        {{ review.name }} gave this {{review.rating }} stars 
        <br/>
        "{{ review.review}}"
        <br/>
        Recommended: {{ review.recommend }}
    </li>
</ul>

Here we are iterating throught the reviews array and for each rendering a new li element using the reivew element.

Sometimes you have to calculate values that depend on properties this can be done doing something like this:

 {{ review.name + review.rating }}

however a better way to do this so that the value is only updated when something changes in the propeties is to use computed properties:

computed: {
    reviewContent() {
        return this.review.name +' '+this.review.rating
    }

Then we simply use the computed property in the html code:

{{ reviewContent }}

This value will be cached by vue and only updated when the underlying properties change. Computed properties Components reusable building blocks and props, need to access data outside of scope Communicating events with parent

v-model 2 way binding

Will review…