Graph TD Vue Template Syntax --> Interpolation Syntax Vue template syntax --> Instruction syntax

1. Interpolation syntax

  • Grammar: {{JS expression}}
  • Function: Dynamic display of data

Extension:

Differences between expressions and statements: expressions1.No semicolon2.There is a return value, okundefinedStatement:1.With semicolon endings, you can omit semicolons (runtime auto-completion)2.No return valueCopy the code

2. Instruction syntax

(1) v-model=’JS expression ‘

Functions: Data bidirectional binding (often used to collect form data) Data can flow from Model(data) layer to View(View) layer, display data can flow from View(View) layer to Model(data) layer, modify the data of Model layerCopy the code

(2) v – bind: XXX = ‘mine’

Used for one-way data binding (forcibly binding data) Often used for communication between parent and child components - XXX ="yyy"Copy the code

(3) v – on

Used to bind event V-ON: Event name =" event callback function "short @ event name =" event callback function"Copy the code

(4) v – if – else – if/v/v – else

- Effect: Conditional render (show or hide toggle) - Use: 'V-if =" XXX "' - hide when DOM elements are removedCopy the code

(5) v – show

- Function: Conditional rendering (show or hide toggle) - Use: 'v-show=" XXX "' - Hide when hidden by style display: None (performance overhead is small, multiple uses are better with V-show)Copy the code

(6) v – for

- Use: 'v-for="(item, index) in XXX ":key="item.id"'Copy the code