This article only do their own quick memory notes.

Vue basic syntax

1. The interpolation

  • Text: {{MSG}}
  • HTML: Using V-HTML directives to output HTML code runs the risk of XSS (script injection) overwriting sub-components
  • Attributes: Values in HTML attributes should be dynamically bound using the V-bind directive
    • v-bind:style=”‘width:calc(100% – ‘+siderbarW+’px); ‘”

expression

Vue provides full JavaScript expression support

{{name | | "unnamed"}} {{number + 1}} {{ok? 'YES' : 'NO'}}// The ternary operatorCopy the code

2. Instruction

Refers to a special attribute with a “V -” prefix

2.1 Core Instructions

v-if|v-else-v|else-if v-show|v-for|v-bind|v-on|v-model

2.2 Dynamic Parameters

< a v - bind: [attrname] = "url" >... < a v - on: [evname] = "doSomething" >...Copy the code

Dynamic parameter expressions have some syntactic constraints, evName is not valid, evName is valid, avoiding capitalization

Difference between V-ON and V-bind

The V-bind directive is used to set the HTML attribute: v-bind:href

<! <a v-bind:href="url">123</a> <! <a :href="url">123</a>Copy the code

The V-ON directive is used to bind HTML events: V-on :click abbreviated @click

<! - complete syntax - > < v - on a: click = "doSomething" > 123 < / a > <! <a @click="doSomething">123</a>Copy the code

The computed and watch

Calculate attribute

Computed is cached, and data does not recalculate if it remains unchanged.

Monitor properties

  • Watch is used to respond to data changes
  • When watch listens for a reference type, it can’t get oldVal because the same pointer already points to a new val
  • Watch wants to listen for changes in reference type data, which requires deep listening.
Obj :{handler(newVal){},deep:true}------Copy the code

Differences between COMPUTED and Watch in VUE, and applicable scenarios

Class and style

Using dynamic properties (v – on: | v – bind:) using a camel

Conditions apply colours to a drawing

  • V-if v-else, can use variables, can also use the === expression
  • What’s the difference between V-if and V-show? V-if controls explicit elements by controlling the presence or absence of DOM nodes. V-show is a switch from CSS display
  • What are the use scenarios of V-if and V-show? Update infrequently with V-if update frequently with V-show

Loop (list) rendering

  • V-for initially only supported arrays
  • V-for and v-if cannot be used together on the same element. In vue2. X, v-for has a higher priority than V-if, while vue3
  • So using v-if in v-for, which executes v-if every time it traverses, can be a performance drain, so you can use computed properties instead.
  • V-for and V-if are used together in the same element mainly to determine if the array or object iterated over has a value,
    • 1. You can use computed properties instead.
    • 2. Or add an if judgment around the element

The importance of key.

  • Key cannot be written arbitrarily (such as random or index). Vue’s proximity principle. Components are reused by default
  • V-if V-key (used to check whether the switch is for the same component. When the same form component is switched, the key is not set and will be reused)
  • V-for V-key (If v-key is not set when the list is added, deleted, or modified, data deletion is inconsistent with page display)

The event

  1. event.proto.constructor
  2. Events are native (mouseEvents)
  3. The event is mounted to the current element
  4. What is the difference between event.target and event.currentTarget?
    • Event. currentTarget retrieves the tag element that initiates the event
    • Event. target gets the tag element that triggers the event
    • It is possible that the same value will be returned
    • In the bubble case,event. target is the child element and event.currentTarget is the parent element
Click ='clickMe1(1,$event)' $event ='clickMe2()' ClickMe2 :(){//event.target directly click}Copy the code

Event modifier, key modifier

Event modifier

  • Stop: stops the event bubbling
  • Self: Identifies whether the click event is its own
  • Once: Automatically cancels the binding point after an event is executed once
  • Prevent: Prevents the default behavior of elements
  • Capture: When adding event listeners using event capture mode, the bubble sequence is triggered first
V-on :click.stop Prevents default behavior V-on :submit. Prevent is a concatenation of the V-on :click.stop.prevent modifier that adds a listener to an element and fires the element with that modifier when it bubbles. If there are more than one such modifier, it fires from the outside in. That is, whoever has the event modifier fires first. v-on:click.capture="doThis"Copy the code

Key modifier

  • v-on:keyup.87
  • v-on:keyup.enter