Examples of built in vue methods (basic)

Vue-Built_In_Methods.md

BUILT IN VUE METHODS AND EXAMPLES

---

Event listener:

• v-on:EVENT='function'

  <template>
   <h1 v-on:click='clickHandler'>CLICK ME</h1>
  </template>
  
  <script>
   export default {
     name: 'component',
     methods: {
       clickHandler() {
         console.log('OUCH')
       }
   }
  </script>

---

Data Binding for forms:

• v-model='DATAYOUWANTTOUPDATE'

<template>  
  <form>
    <input v-model='studentName' type='text' />
  </form>
</template>

<script>
  export default {
    name: 'component',
    data() {
      return {
        studentName: ''
      }
    }
</script>

---

Conditional rendering

• v-if='PIECEOFSTATE'

<template>
  <div>
    <h1 v-if='showHeading'>IM VISIBLE</h1>
    <button v-on:click='toggleShowHeading'>CLICK ME</button>
  </div>
</template>

<script>
  export default {
    name: 'component',
    data() {
      return {
        showHeading: false
      }
    },
    methods: {
      toggleShowHeading() {
        this.showHeading = !this.showHeading
      }
    }
  }
</script>

Bind data to child component

• v-bind:REFERENCENAME='dataname'

<template>
  <ChildComponent v-bind:dataForChild='studentsArray' />
</template>

<script>
  export default {
    name: App,
    components: {
      ChildComponent
    },
    data(){
      return {
        studentsArray: [1,2,3,4,5]
      }
    }
  }
</script>