Summary: Vue 3

Read the summary and the most important questions on Vue 3

• v-Model Directive

  This is a preview. There are 2 more flashcards available for chapter 24/03/2021
  Show more cards here

• What is the goal of v-model

  Creates a relationship between the data in the instance/component and a form input, so you can dynamically update values.
  
  You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.
  
  v-model internally uses different properties and emits different events for different input elements:
  

  • text and textarea elements use value property and input event;
  • checkboxes and radiobuttons use checked property and change event;
  • select fields use value as a prop and change as an event.

• How do you output a value form a v-model to a page?

  Use Mustage  {{name-of-variable}}

• v-if & v-else

  This is a preview. There are 3 more flashcards available for chapter 24/03/2021
  Show more cards here

• What is v-if / v-show

  Is a conditional that will display information depending on meeting a requirement. This can be anything, forms, divs, components, etc

• How does v-if interact with the DOM?

  It is adding or removing the code from the DOM based on how the evaluation mounts true or false

• v-model Modifiers

• Which model.modifiers do you know?

  V-model.trim-> strips spaces
  v-model.number -> change string to numbers
  v-model.lazy ->

• Event modifiers

  This is a preview. There are 4 more flashcards available for chapter 24/03/2021
  Show more cards here

• Which event modifier do you know.

  @mousemove.stop-> e,stopPropagation
  @mousemove.prevent -> this is like e.preventDefault()
  @submit.prevent -> will not reload the page
  @click.once-> click event will happen only once
  @click.native -> so that you can listen to native events in the DOM

• What is mouse.stop

  @mousemove.stop-> e,stopPropagation

• Methods

  This is a preview. There are 2 more flashcards available for chapter 24/03/2021
  Show more cards here

• How do you make a method

  Methods:{
        increment(){
            this.counter++
         }
        add(x){
            this.counter+x
         }
  }

• How do you reference a variable in the vue application.

  You use this.variableName

• Event Binding & v-on

  This is a preview. There are 2 more flashcards available for chapter 24/03/2021
  Show more cards here

• What is the shortcut for v-on?

  V-on has the @ as a shortcut