# VUE JS MYANMAR Vue Js Google Former Engineer Evan You create February 2014 public release Google 2013 vue js create release vue js popular UI Single Page Application create Javascript Framework ### VUE JS 1. javascript framework for building user interfaces. 2. build on top standard HTML, CSS, Javascript 3. provide declarative and component based programming model to develop your UI. ### declarative rendering 1. extends with HTML standard templates 2. allows declarative describe HTML output based on javascript state ### reactive 1. automatically tracks JavaScript state changes 2. efficiently updates the DOM when the state change ### Document Object Model (DOM) DOM (Document Object Model) Web Document HTML,XML Document tree-like structure programming interface DOM programs scripts dynically access web document content structure style manipulate Vue Js DOM UI manipulate data state changes Update framework Vue Js DOM application's data UI Synchronization changes UI data Update ### Component Structure Vue js application component create Components reusable encapsulated units Component template logic style ### Encapsulation Encapsulation is a way to restrict the direct access to some components of an object, so users cannot access state values for all of the variables of a particular object. Encapsulation can be used to hide both data members and data functions or methods associated with an instantiated class or object. ### Template vue h Component HTML structure define template template veu directive expression vue component create <template></template> create element template

    
       <template>
            <p> Hello VUE ! </p>
        </template>
    

### Data State Vue JS data state UI data reactive render concept Data component initial state 'data' function return variables properties user input api response 'data'function function data properties changes state data state changes ### Data (Initial State)

    
        export default{
            data(){
                return{
                    //initial data state
                    message:'Hello Vue !',
                    count:0,
                    items:[]
                }
            }
        }
    

### State (State Change)

    
        export default{
            data(){
                return{
                    //initial data state
                    message:'Hello Vue !',
                    count:0,
                    items:[]
                }
            },
            methods:{
                //message state change
                changeMessage(){
                    this.message='Vue State Change'
                },
                //count state change
                increment(){
                    this.count++;
                }
            }
        }
    

### Virtual DOM Vue JS Virtual DOM Virtual DOM Real DOM Lightweight copy UI changes Track Data change vue Virtual DOM create DOM Compute UI update ### Two Way Data Binding Vue Js UI element Javascript Data Modal Synchronization two way data binding concept UI element Data Modal Update Data Modal UI element Update ## Vue Components Lifecycle Hooks #### 1. Create (vue 2) 1.1 beforeCreated: Executed before the component instance is initialized. Data and events are not set yet. 1.2 created: Called after the component instance has been created. Data observation, events and computed properties are set yet. (vue 3) 1.1 onBeforeCreate: Called before the component instance is created. 1.2 onCreated: Called after the component instance is created. #### 2. Mount (vue 2) 2.1 beforeMount: Triggered just before the component is inserted into the DOM. 2.2 mounted: Called once the component is inserted into the DOM. Ideal for initial DOM manipulation and API interactions. (vue 3) 2.1 onBeforeMount: Called before the component is mounted to the DOM. 2.2 onMounted: Called after the component is mounted. #### 3. Update (vue 2) 3.1 beforeUpdate: Called before the component is re-rendered due to data changes. Actions before an update can be performed. 3.2 updated: Triggered after the component has been re-rendered. Suitable for DOM manipulations that rely on updated data (vue 3) 3.1 onBeforeUpdate: Called before data changes trigger a re-render. 3.2 onUpdated: called after the component is updated. #### 4. Destruction (vue 2) 4.1 beforeDestroy: Called before a component is about to be destroyed. Cleanup tasks such as cancelling timers or event listeners can be done. 4.2 destroyed: Executed after a component has been destroyed, and all its data and watchers have been cleared. (vue 3) onBeforeUnmount: Called before the component is unmounted. onUnmounted: Called after the component is unmounted. #### 5. Error Handling (vue 2) 5.1 errorCaptured: Called when an error occurs in any child component or during rendering. Allows capturing and handling errors in the component tree. (vue 3) 5.1 onErrorCaptured: This hook is called when an error is caught in any child component. It's used for error handling and is not a direct equivalent of any Vue 2.x hook. ### Using vue from CDN HTML page Vue CDN vue package HTML page <script> tag #### usage

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

#### example #### index.html

  
    <!DOCTYPE html>
      <html lang="en">      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title> Document</title>
      </head>      
      <body>       
          <div id="app">
              {{count}}
          </div>
          // from CDN
          <script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script>
          <script>
              const { createApp } = Vue;
              createApp({
                  data() {
                      return {
                          count: 0
                      }
                  },
              }).mount('#app')
          </script>
      </body>       
    </html>
  

example vue CDN <script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script> tag CDN HTML page <script> tag vue api function createApp import crateApp <div> Id (#app) mount Vue js Vue SFC Playground Link Test [Vue SFC Playground](https://play.vuejs.org/) #### Attribute Declaration (Variable Declaration) vue string integer List varables declare data function return value declare #### example

                
    data() {
      return {
        message: 'Hello From VUE!',
        count:0,
        list:[],
      }
    },
  

## Attribute Binding vue js data Binding double curly brackets (also called Mustaches) ' {{ }} ' Bind #### example [Vue SFC Playground](https://play.vuejs.org/)

      
    //HTML
    <div id="app">
      {{message}}
    </div>

    //Script
    <script>         
    data() {
      return {
        message: 'Hello From VUE!'
      }
    },
    </script>  
  

Double Curly Brace HTML Attributes Bind v-bind directive [Vue SFC Playground](https://play.vuejs.org/)

  
    //False
    <div id=" {{id}}"></div>  

    //True
    <div v-bind:id="id"></div>  
    //short hand
     <div :id="id"></div>
  

Colon ( : ) Attribute HTML attributes Colon attribute vue js support valid character attribute Browser parse Colon ( : ) Short Hand Syntax Vue Developers Syntax [Vue SFC Playground](https://play.vuejs.org/)

  
    <div :id="id"></div>
  

## Boolean Attribute Boolean Attribute element true/false vlaue attribute Example [Vue SFC Playground](https://play.vuejs.org/)

  
    //true
    <div disabled="true"></div>
    //false
    <div disabled="false"></div>
  

Boolean Attributes :disabled v-if condition attributes #### Example ( :disabled ) [Vue SFC Playground](https://play.vuejs.org/)

  
    <template>
    //button is disabled
      <button :disabled="isDisabled">Save</button>
    </template>
    <script>
      export default{
        data(){
          return{
            isDisabled:true
          }
        }
      }
    </script>
  

#### Example ( v-if ) [Vue SFC Playground](https://play.vuejs.org/)

  
    <template>
      <button v-if="success">OK</button>
      <button v-else >Try Again</button>
    </template>
    <script>
      export default{
        data(){
          return{
            success:true
          }
        }
      }
    </script>
  

## List Rendering ### v-for Vue Js Arry List Render v-for directive v-for direvtive item in items Special syntax items data array item items array alias v-for directive C# Programming Language for loop List Looping #### example [Vue SFC Playground](https://play.vuejs.org/)

   
    <template>
      <li v-for="item in items">
        {{ item.message }}
      </li>
    </template>
    <script>
      export default{
       data(){
         return{
           items:[
             {message:'Foo'},{message:'Bar'}
           ]
         }
       }
     }
    </script>
     //output
     Foo
     Bar
   
 

v-for directive item index (item,index) in items #### example [Vue SFC Playground](https://play.vuejs.org/)

   
    <template>
      <li v-for="(item,index) in items">
        index:{{ index }} , message: {{item.message}}
      </li>
    </template>
    <script>
      export default{
       data(){
         return{
           items:[
             {message:'Foo'},{message:'Bar'}
           ]
         }
       }
     }
    </script>
     //Output
     index:0, message:Foo
     index:1, message:Bar
   
 

### v-for with Object v-for directive Object value key (value,key,index) in item syntax person object id, name, age Fiels id key 1 value name key Alex value object key,value pair create [Vue SFC Playground](https://play.vuejs.org/)

  
    const person={
      id:1,
      name:'Alex',
      age:'24'
    }
  

object value key (value,key,index) in item Special Syantax #### example [Vue SFC Playground](https://play.vuejs.org/)

  
    //vue template
       <li v-for="(value,key,index) in person">
        {{ index }} , {{key}}: {{value}}
      </li>
    //js
    const person={
      id:1,
      name:'Alex',
      age:'24'
    }
    //Output
    0,name:Alex
  

#### v-for with v-if v-if condition directive v-for directive v-for directive v-for directive v-for directive

    
      <li v-for="item in items" v-if="item.success">
       <span>{{item.message}}</span>
      </li>
    

v-for directive [Vue SFC Playground](https://play.vuejs.org/)

    
      <li v-for="item in items">
       <span v-if="item.success">{{item.message}}</span>
      </li>
    

example v-if directive item success message Output ### Maintaining State With key Vue 'in-place path' stragegy default element list v-for directive Update Data items changes data Match DOM element Vue element element render render default mode temporaty DOM child component state Node element identity vue track Maintain track Unique key Maintain #### example [Vue SFC Playground](https://play.vuejs.org/)

  
    <div v-for="item in items" :key="item.id">
      <!-- content -->
    </div>
  

### v-model directive v-model directive vue tow way data binding diretive component date bind data declare value text field select box radio button element v-model directive bind text field radio button ui value changes data data changes text field select box radio button ui element value data changes UI UI value changes data #### example [Vue SFC Playground](https://play.vuejs.org/)

    
        <template>
          <p>Name : {{name}}</p>
            <label>Name <input type="text" v-model="name"></label>
         <p>Gender : {{gender}}</p>
              <label><input type="radio" v-model="gender" v-bind:value="false">False</label>
              <label><input type="radio" v-model="gender" v-bind:value="true">True</label>
        </template>
        
        <script>
            export default{
            data(){
                return{
                    gender:false,
                    name:'Joseph'
                }
            }
        }
        </script>
    

https://github.com/mmcodetester/vue-basic-myanmar-version/assets/72187529/977aaa68-a389-40ca-ac2c-0f01f10b8d65 ### v-bind directive v-bind directive radio button element value binding vue element value double curley brace binding v-bind directive binding Support [Vue SFC Playground](https://play.vuejs.org/)

    
        <template>
         <p>Component Value: {{gender}}</p>
            <label><input type="radio" v-model="gender" v-bind:value="false">False</label>
            <label><input type="radio" v-model="gender" v-bind:value="true">True</label>
        </template>
        <script>
            export default{
            data(){
                return{
                    gender:false,
                }
            }
        }
        </script>
    

https://github.com/mmcodetester/vue-basic-myanmar-version/assets/72187529/977aaa68-a389-40ca-ac2c-0f01f10b8d65 ### v-on directive v-on directive v-model v-bind vue build-in directive element click , keypress , enter , prevent event listen directive form sumbit enter event button click function textfield key textfield pervent function [Vue SFC Playground](https://play.vuejs.org/)

    
         <template>
           <p>Name : {{name}} </p>
             <p>Can type Letters Only </p>
             <label>Name  <input type="text" v-model="name" 
                v-on:keypress="allowLettersOnly($event)" > </label>
             <p >Enter Key Perss </p>
             <input type="button" value="Save" v-on:keyup.enter="enterFunc" >
         </template>
        <script>
            export default{
            data(){
                return{
        
                    gender:true,
                    name:'Joseph'
                }
            },
            methods:{
                allowLettersOnly(e){
                    let char = String.fromCharCode(e.keyCode); // Get the character
                    if (/^[A-Z a-z]+$/.test(char)) return true; // Match with regex 
                    else e.preventDefault(); // If not match, don't add to input text
                },
                enterFunc(){
                    alert('enterkey press')
                }
            }
        }
       </script>
    

https://github.com/mmcodetester/vue-basic-myanmar-version/assets/72187529/1a4532ef-7ac1-440e-a74b-1b6bd5cbd843 v-on direct short-hand @ sign ### Example [Vue SFC Playground](https://play.vuejs.org/)

    
        @keypress
        @click
        @keyup.enter
    

    
         <template>
         </template>
                <label>Name <input type="text" v-model="name"  @keypress="allowLettersOnly($event)"></label>
         <script>
         </script>
    

## API Style Vue JS Composition Api Option Api component ### Composition API Compositon API vue API function import Components #### example [Vue SFC Playground](https://play.vuejs.org/)

  
    import {ref} from 'vue'  
    import {createApp} from 'vue'
  

#### usage Single File Components (SFCs) composition api <script setup> [Vue SFC Playground](https://play.vuejs.org/)

  
    
     //vue template
      
  

<script setup> <script> setup() {} function [Vue SFC Playground](https://play.vuejs.org/)

  
    <template>
      <h4>Vue Composition API</h4>
      <p>{{ count }} </p>
    </template>

    <script>
      import {ref} from 'vue'
      export default{
        setup(){
          const count=ref(0);
          return{
            count,
          }
      }
    </script>
  

[Vue SFC Playground](https://play.vuejs.org/)

  
    <template>

      <h4>Vue Composition API</h4>
      <p>{{ count }} </p>
      <button class="btn btn-sm btn-outline-primary me-2" @click="increment">Increment</button>
      <button class="btn btn-sm btn-outline-primary me-2" @click="decrement">De ... ...