Vue 3 Course #2 – The Basic

Declarative Rendering

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

const Counter = { 
  data() {
     return { 
      counter: 0 
    }
  } 
} 
Vue.createApp(Counter).mount('#counter')

• J-1: First create a constant Counter object.
  • This object has a ‘data( )’ method.
  • The data method also returns an object which has a key called ‘counter’.
• J-8: The Counter object is passed to createApp method in Vue to create a Vue app, and then mount this app to the DOM with an id = counter.
• The data and the DOM are now linked.

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