Vue basic knowledge record, for reference, basically usually develop these are the most basic things for you, listed for reference, thank you

  1. Interpolation (only expressions, not JS statements)
  2. Instruction dynamic attribute
  3. V-html: There is an XSS risk that the subcomponent will be overwritten (here’s how it works 🙂
  4. Computed is also a watcher that has a cache and does not get recalculated without changing data.
    • Comparison between computed and Method
    • Method does not cache data and is executed every time
    • However, computed data is cached and is executed only when the dependent properties change
  5. Watch How deep listening? Deept set to listen immediately
  6. Watch listens for a reference type, and can’t get oldVal because it’s a pointer assignment, because the Pointers are the same
  7. Class uses dynamic attributes 
    <p :class="{abc: isAbc, def:isDef}"></p>
<p :class="[abc, def]">An array of class</p>
<p :class="[abc, def]">An array of class</p>
Copy the code
  8. Style uses the hump style fontSize 
    <p :style="styleData">style</p>
Copy the code
  9. Conditions apply colours to a drawing
    • V-if v-else can be used either as a variable or as a === expression 
      <p v-if="type === 'a'">A</p>
<p v-else-if="type === 'b'">B</p>
<p v-else>C</p>

 <p v-show="type === 'b'">C</p>
Copy the code
    • The difference between V-IF and V-show and the application scenarios
      • V-if indicates whether the DOM is generated
      • V-show is style display None and block toggled dom must be generated
  10. Loop list rendering
    • How to traverse objects —- can V-for be used 
      (value,key,index) in Object // Object traversal
(item,index) in Array // Array traversal
Copy the code
    • The importance of the key (not random or index), which is determined by the tag and key when diff
    • V-for and V-IF cannot be used together
    • The priority of V-for is higher than that of V-IF
  11. The event

    • Event parameter, custom parameter $event

      • An event is a native Event object

    • Event modifier, key modifier Stop Prevent Capture self CTRL exact native

    • Where are events bound to

      • The event is mounted to the current element
  12. The form
    • v-model
    • A common form item is textarea Checkbox radio SELECT 
      <textarea>{{abc}}<textarea> 
<! -- The top is wrong and the bottom is right -->
<textarea v-model="abc">{{abc}}<textarea>
Copy the code
    • Common modifier lazy number trim
    • V-model can only be used on input fields and components, not on normal elements