Basic instructions

1. Interpolation

Target: Insert content directly into the DOM tag

• grammar
  • {{expression}} # can be a data variable or an expression

2.v-bind

Target: Sets the value of the VUE variable for the tag property

• grammar
  • V-bind: attribute name =”vue variable”
  • Short: : Attribute name =”vue variable

3. v-on

Target: Bind events to tags

• grammar
  • V-on: Event name =” Small amount of code to execute”
  • V-on: Event name =” Function in Methods”
  • V-on: event name =” functions in Methods (arguments)”
  • @event name =” function in Methods”

4. V-on event object

Target: In the vUE event handler, get the event object

- No parameter is passed. The parameter is directly received by the parameter. $event indicates that the event object is passed to the event handlerCopy the code

< a @ # example click = "one" > < / a > < a @ click = "two (10, $event)" > < / a > the methods: { one(e){ e.preventDefault() }, two(num, e){ e.preventDefault() } }Copy the code

5. V-on modifier

Purpose: After the event. Modifier name – adds more power to the event

• Grammar:

  • @event name. Modifier =” Functions in methods”

    • .stop – Prevents events from bubbling
    • .prevent – Prevents the default behavior
    • .once – Triggers event handlers only once during program execution

@click.prevent. Stop # Prevent bubbling and default behaviorCopy the code

6. V-on key modifier

Objective: Add modifiers to keyboard events to enhance capabilities

• Grammar:
  • @keyup.enter – Monitors the Enter key
  • @keyup.esc – Monitor the back button

7. v-model

Target: Bidirectional binding of the value property to the VUE data variable

• Syntax: V-model =”vue data variable”
• Two-way data binding
  • Data changes -> View automatic synchronization
  • View Changes -> Automatic data synchronization
• Demo: Username binding – inside Vue is the MVVM design pattern

At this stage, V-Model can only be used on form elements when the drop-down menu is bound to the checkbox encountered on select. The variable values of V-Model are not arrays - associated with the array of checked properties of the checkbox - associated with the value property of the checkboxCopy the code

8. V-model modifier

Goal: Make the V-Model more powerful

• Grammar:
  • V-model. modifier =”vue data variable”
    • .number converts to a number type as parseFloat
    • . Trim Removes leading and trailing whitespace characters
    • .lazy is triggered on change but not on input

9. V – – HTML text and v

Purpose: Update the innerText/innerHTML of a DOM object

• Grammar:
  • V-text =”vue data variable”
  • V-html =” VUE data variable”
• Note: Interpolation is overridden

V-text displays values as normal strings. V-html parses values as HTMLCopy the code

10. V – show and v – the if

Target: Controls the hiding or appearing of tags

• Grammar:
  • V – show = “vue variables”
  • V – if = “vue variables”
• The principle of
  • V-show display:none hidden (frequently switched)
  • V-if is removed directly from the DOM tree
• senior
  • V – else use

<p v-if="age > 18"> I am an adult </p> <p v-else> Eat more </p>Copy the code

11. v-for

Target: list rendering, tag structure, according to the number of data, generated in a loop

• grammar
  • V -for=”(value, index) in target structure”
  • V -for=” value in target structure”
• Target structure:
  • Can iterate over groups of numbers/objects/numbers/strings (traversable structures)
• Note: Temporary variable names for V-for cannot be used outside the v-for range

This.$set(target structure, position, value)Copy the code

12. The dynamic class

Target: Use V-bind to set dynamic values for the tag class

• Grammar:
  • :class=”{class name: Boolean}”

13. A dynamic style

Target: To dynamically set the value of style for the tag

• grammar
  • :style=”{CSS properties: values}”

14. Vue filter – Definition used

Purpose: : Conversion format, filter is a function, the passed value returns the processed value

Filters can only be used in interpolation and V-bind expressions

Can be transmitted and multi-purpose, {MSG 1 (parameters) | | filters filter 2 (parameters)}

Grammar:

• Global: Vue. Filter (” filter “, (values, parameters) = > {return “returns the value of treatment”})
• Local: filters: {filter name: (value) => {return “returns the processed value “}

15_vue Computes attributes -computed

Target: a result calculated from one piece of data depending on another

#1. Computed: {" Computed attribute name "() {return" value "}} #2. Complete writing computed: {" attribute name ": {set (value) {} the get () {return" value "}}Copy the code

16_vue listener -watch

Target: Can listen for data/computed property values to change

Syntax: watch: {" Listened attribute name "(newVal, oldVal){}}Copy the code

17_vue listener – Deep listening and immediate execution

Target: Listen for complex types, or execute the listener function immediately

Grammar:

Handler (newVal, oldVal) {}} handler (newVal, oldVal) {}}Copy the code