Vue – A progressive JavaScript framework

  • Vue Chinese official website

The introduction of MVVM

  • MVVM ===> M/V/VM
  • M: Model Data model (specialized in manipulating data)
  • V: View view (our page)
  • VM: ViewModel

The introduction of the MVC

  • M: Model Data Model
  • V: View View
  • C: Contorller controller (a bridge between view and data, used to process business logic)

template

Similar to document fragments, they act as a layer of boxes around the elements but they are not processed into concrete elements [not rendered in HTML]

instruction

  • Interpretation: the instruction is alreadyv-Is a special attribute of the prefix
  • Action: When the value of an expression changes, the resultant effects are applied to the DOM in a responsive manner
  • It must be inside the inline property

v-cloak

  • What it does: Solve the problem with the mustache when refreshing the web page
  • Note: V-cloak works with the CSS style using the display: None setting, which is normally placed inside the root line property
<style>
[v-cloak]{
    display:none;
         }
</style>
<div v-cloak> </div>
Copy the code
v-text

  • What it does: Recognizes only text displays of elements (other than labels) – does not recognize labels

  • Example: Will only recognize content: How are you? —- H1 will not be recognized

<div v-text="arr"> <h1> How are you? </h1> </div>Copy the code

v-bind

  • What it does: If placed in front of a native inline attribute, it can treat the value after the equals sign as a variable

-:class=” how to use flexible”

<div V-bind :class="ary"> </div>Copy the code

v-on

  • Function: Bind events
  • Important: The binding time is defined inmethodsThe inside
<div @click="fn"> <div>Copy the code

v-model

  • Purpose: Used to create bidirectional bindings on form elements
  • Binds the value of an element to a variable
<input type="text" V-model ="value"> < Input type="radio" V-model ="sex"> multiple options <input type="checkbox" value="1" V -model="ary"> select name="play" v-model="play"> </option> </select>Copy the code

v-for

  • What it does: Loop over elements multiple times
  • Usage: Cooperate with methods
  • Example: Enter “Add to array” in the search box and click “fn2” to delete the array
Item is the current item, <ul> <li v-for="(item, index) in ary"> </li> <button @click="fn2(index)"> </button> </ul> methods:{ fn2(index) { this.ary.splice(index, 1) }, fn(e) { if(e.keyCode===13){ this.ary.push(this.info), this.info="" } } }Copy the code

V – if and v – show

  • Similarities: Controls whether elements appear or not
  • Difference: V-if controls display: None /block: v-show controls whether elements are in HTML by false/true
<div v-show="1<2"> am I none or block</div> <div v-if="1<2"> Do I appear in HTML structure?? </div>Copy the code

v-if v-else if v-else

  • What it does: Works like javascript
<div > <div v-else="1"> </div>Copy the code

Instructions to optimize performance

v-pre

  • What it does: Vue skips the compilation of this element and its children, treating them as if they were original tags
  • Usage: on the root element inline attribute of an element that does not need to be compiled
<div v-pre>{{whatever is written here is displayed, including the moustache}}</div>Copy the code

v-once

  • What it does: Rendering an element once and then re-rendering it does not change the contents of its children
<div v-once>{I'm a good man and will never change because I have 'v-once'}</div>Copy the code

Global-filter local-filters

  • The final output is determined by the return value of the filter
  • Note 1: To use a global filter, create a global filter before creating a Vue instance
  • Note 2: If the global filter has the same name as the local filter, the local filter is preferred
Filter series using price variable to fn fn the return value of the results returned to the fn2 < div id = "add" > {{price | fn | fn2}} {{STR | ap}} < / div > \ = = = ap function name = = = \ STR incoming values Vue. Filter ("ap",function(STR){return STR +" this is "}) let vm = new Vue({el: "#add", data: {price: \ fn(number) {return "fn changed "+ number;}, // Local filters: {\-- number is passed in. }, \fn return value \ fn2(unde) {return "fn2" + unde}}}) let mv= new Vue({el: "#app", data: {STR :" I am app"},})Copy the code

Function execution methods

  • Define the event response function
  • Define component common handlers

Monitor data changes watch

  • Function: When the value in data changes, the corresponding function will be triggered to complete the monitoring operation of the response
  • Vue $stach 
new Vue({ data: { a: 1, b: { age: 10 } }, watch: { a: Function (item1, item2) {console.log(' current value: '+ item1,' old value: '+ item2)}})Copy the code

Computed attribute Computed

  • Usage: Computed properties are cached based on their dependencies and reevaluated only if its dependencies change

Features: execution only when called, caching,

  • Note: Attributes in computed cannot have the same name as attributes in data, otherwise an error will be reported
Var vm = new Vue({el: '#app', data: {pig: 'zhao ', dag:' day '}, computed: Fullname () {return this.pig + 'day' + this.dag}})Copy the code

Object.defineProperty

  • Function: Listens for property changes
  • Pass: The first argument (a) is the target object
  • ——– The second argument (“b”) is the name of the property or method you want to define
  • ——— The third parameter is the properties that the target property has
var a= {}
Object.defineProperty(a,"b",{

})

Copy the code

Descriptor default values

Configurable main switch

  • Function: main switch
  • Default: false (false cannot be set the second time)
DefineProperty (a,"b",{64x :false}) Object. DefineProperty (a,"b",{64X :true}) disables any additional information, and signals any different informationCopy the code

Writable read-only

  • Effect: Set to read-only
  • Default value: false
var a = {}; 
Object.defineProperty(a, "b", { 
    writable : false 
    });
Copy the code

Enumerable Whether you can enumerate

  • Function: Can enumerate (loop)
  • Default value: true
var a= {}
Object.defineProperty(a,"b",{
  enumerable:true
})
Copy the code

Specifies whether the video system can be deleted

  • Effect: Whether to delete
  • Default value: false
var a= {}
Object.defineProperty(a,"b",{
  configurable:false
})
Copy the code

Hope to help you, thanks for reading ~ pen refill ❤️