Vue 3 Course #3 – Application & Component Instances

Application Instance

Every Vue application starts by creating a new application instance with the createApp function:

const app = Vue.createApp({ 
  /* options */ 
})

The application instance is used to register ‘globals’ that can then be used by components within that application. For more details about components, refer to the Vue documentation.

Bind Element Attributes

v-bind

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

const AttributeBinding = { 
  data() { 
    return {  
     message: 'You loaded this page on ' + new Date().toLocaleString() 
    } 
  } 
} 
Vue.createApp(AttributeBinding).mount('#bind-attribute')

• H-2: Using v-bind, the attribute ‘title’ is now linked to ‘message’. It is updated whenever the message value is changed in J-4.

Handling User Input (v-on, v-model)

v-on

Use v-on directive in the DOM to attach event listeners that invoke methods on our instances.

<div id="event-handling"> 
  <p>{{ message }}</p> 
  <button v-on:click="reverseMessage">Reverse Message</button> 
</div>

const EventHandling = {  
 data() { 
    return {  
       message: 'Hello Vue.js!' 
    }  
 },  
 methods: { 
    reverseMessage() { 
      this.message = this.message  
       .split('') 
        .reverse()  
       .join('')  
   }  
 } 
} 
Vue.createApp(EventHandling).mount('#event-handling')

• v-on:click=”js function” –> This is to react on mouse clicks to execute the specified JS function.
• @click –> This is the short hand for v-on:click.

v-modal

Use v-model to provide 2-way binding between form input and app state.

<div id="two-way-binding"> 
  <p>{{ message }}</p> 
  <input v-model="message" /> 
</div>

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

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

Conditional and Loops

v-if

<div id="conditional-rendering">  
 <span v-if="seen">Now you see me</span> 
</div>

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

This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/updated/removed by Vue.

v-for

The v-for directive can be used to display a list of items using the data from an array:

<div id="list-rendering"> 
  <ol>  
   <li v-for="todo in todos"> 
      {{ todo.text }} 
    </li> 
  </ol> 
</div>

const ListRendering = { 
  data() { 
    return {  
     todos: [ 
        { text: 'Learn JavaScript' }, 
        { text: 'Learn Vue' }, 
        { text: 'Build something awesome' } 
      ]  
   } 
  } 
} 
Vue.createApp(ListRendering).mount('#list-rendering')

Reference

• Vue.js Guide