What are the features of Vue?

  • Two-way data binding
  • Componentized development
  • Data-driven view – Modify data – View modification does not require dom manipulation
  • Develop ideas using MVVM

2. Principle of bidirectional data binding

  • The principle of Vue to implement two-way data binding is to use object.defineProperty () to redefine the Object to get attribute value (GET) and set attribute value (set) operations.
  • When you access an Object property, the get method is automatically triggered, the set method is triggered when you set it, all the properties in the data are traversed through object.defineProperty (), the properties are processed, the page-to-data is v-ON using the event binding, and the page-to-data is V-bind using the data binding.

3. The vue options

  • El: Specifies the view area to manage, by way of a selector or DOM object. The HTML /body tag cannot be specified as the view

  • Data: Specifies reactive data in the VM instance. Data use must be declared in data in advance

  • Methods: Define functions and provide them to vm instances. Fn (){} is recommended. Arrow functions are not recommended

  • In a VM instance, to get data from data or call methods from methods, you must go through this. Property name or method name of this. this is the vm instance object that comes out of new

4. Common commands of vue

  • v-text/v-html
    • Text is plain text output, HTML is formatted content output, V-HTML is prone to risk (XSS cross-site scripting attack)
  • v-on
    • Bind event, syntax: V-on: event name. The event modifier =”fn()”,v-on can be abbreviated to @, or @event if event objects are required
    • Event modifiers:
      • prevent (Blocking default events),
      • once(The event is triggered only once),
      • stop(To prevent a bubble),
      • capture(Implement a mechanism to capture triggering events),
      • self(The implementation fires the event handler only when the current element is clicked)
  • v-for
    • Iterating through groups and objects, append an attribute to each item :key=” unique identifier “, use ID if there is an ID, no index I
    • V -for=(item, I) in list
    • Object syntax V-for =(v, k, I) in obj
  • v-if/v-show
    • Toggles the show and hide of elements
    • Difference: V-show toggles the display: None CSS property of an element,v-if removes or adds
    • Application scenario: V-if is used for a rendering,v-show is used for frequent switching
  • v-model
    • Provides bidirectional data binding for form elements
    • This is a syntax sugar that uses the V-bind input attribute to listen for the input event and then modify the data in the data
  • v-bind
    • To bind dynamic data to any property, abbreviated:
  • V-bind bind class
    • Syntax :class=” data “, which can be an array or an object
    • Array format: [‘ class name ‘,’ class name ‘] Add add item, remove remove item
    • Object format: {‘ class name ‘:’ Boolean ‘}false indicates remove,true indicates add
  • V-bind bind style
    • Syntax :style=” data “, data can be an array, can be an object
    • Array format :[{CSS property key pair},{CSS property key pair}]
    • Object format :{CSS property: the value of the CSS property… }
  • v-cloak
    • Hide the interpolation area until the view is rendered, and when the view is rendered vUE will remove the V-cloak property and display the view.
    • [v-cloak]{display: none}
  • v-once
    • Elements that use this directive are rendered only once

5. Can V-ON listen on multiple methods?

  • Multiple methods can be listened on, but only one method of the same event type can be listened on. Otherwise, an error will be reported

6. Why must data in a Vue component be a function?

  • Because a component can be shared, but their data is private, each component should return a new data object, returning a unique object, and not sharing an object with other components.