Vue.js Basic Knowledge Summary

Initialize a project

• NPM init-y

Install some dependencies

• NPM Install name--save

• For example NPM install Vue Axios Bootstrap--save

• --save that both development and online use

• --save Dev says start, throw away

Vue Summary1. Directives

• V-show Toggle Display hidden, frequent display use

• V-IF based on conditional statements can show hidden, infrequently show hidden use

• V-else in front of the v-if with the use, if the front v-if not set up the case

• V-model the key to bidirectional data binding, view changes

• V-cloak prevent flicker in CSS define [V-cloak]{display:none}

• V-once control bound content will not be monitored again change is usually used in conjunction with V-model

• V-html parse the tag inside the data and insert it into the binding node.

• V-text bound data, and {{}} equivalent, but can be anti-flicker

• V-for loop Syntax-no index notation item in ARR syntax two-band index notation (item,index) in arr v-for can be nested

• V-on for listening DOM events, shorthand @

• V-bind for binding properties, shorthand:

• V-style Write inline style, basically does not have any effect

Stop bubbling

• E.cancelbubble=true;

• E.stoppropagation ();

• @click. Stop

modifier

• You can add some modifier symbols after the time

• @click. Stop blocking bubbling

• @click capture time captures, first capture to target and then bubble

• @click. Self only triggers a function when clicked on itself, other bubbles, skipping this function

• @click. Prevent block default events, such as a tag click Jump, plus this @click.prevent, prevents the default property href to jump

ref= "Wo" binds an identity to a node

• Identity of late call bindings

  • this. $refs. Wo

once the instance is created, add one more data

• Vue.set (data, ' sex ', ' male ')

2 instantiating a Vue life cycleinstantiate a Vue function new Vue ({})

• Properties within a cycle

• El -bound vue scope, ID and class can be

  • Syntax 1: internal: el: "#app" or el: ". App

  • Syntax 2: external: VM. $ount (' #app ')

  • Syntax 2: There is actually no need for external mount range

• data:{}

  • Bind Vue Global data, is an object

  • Syntax: data:{}

• Created () {}

  • function that is called after the instance has been created

  • Typically with data requests

• methods:{}

  • , the instance goes up, gets the real DOM element, calls this object

  • Basically all of the methods, functions are left in this function

• directives:{}

  • " Span class= "Md-line md-end-block" > custom instruction method, inside write instruction function, name can be without V, but external must have v

    • directive function has two parameters, the first (ele) is the current element, the second (BIND) is the object of the current element

  • syntax Directives:{ auto (ele,bind) {

    } } /span>

• filters:{}

  • filter, filter pipe (|) Action on left value

  • filter inside filter method Auto

  • the first parameter is the value to be filtered on the left,

  • the second parameter is a parameter passed in the filter method

  • syntax

  • filters:{

      Auto (e,prem) {  
     }   

    }

• computed:{}

  • computed properties

  • Asynchronous programming is not supported in computed properties, such as timers, Ajax, etc.

    • default get () function, which means to get the data you have calculated according to other people's data

    • The set () function, which means that it affects other people's data on its own, seldom used

• watch:{}

  • Monitoring properties, returning callback functions

  • The data to be monitored must be the same as that defined in data.

  • The default is the handler () {} method

  • Deep:true is the depth monitoring, the value changes, also can monitor

• Beforedestroy () {}

  • Destroying instances of Vue

properties that are not commonly used in Vue

• Beforecreate () {}

  • The data is not mounted and the method is not loaded.

  • Basic No

• Beforemount () {}

  • Determine if there is an El attribute, at this time, there are template templates, using the template, do not use the #app node internal rendering

  • Basic No

• BeforeUpdate () {}

• When the page data is sent, it executes, if the page uses this data

• Basic no computed{} calculation properties basically all done.

• Destroyed () {}

  • Destroys the Vue instance,

  • Basic No

Localstorage Cache

• Localstorage.setitem (' Cached name ', ' cached value ');

• Localstorage.getitem (' Cached name ')

• We normally cache the object as a string cache json.stringify ()

  • Json.stringify ()

    • Change an object to a string

• Then take out the cached data and convert the string to a JSON object Json.parse ()

  • Json.parse

    • Converts a string into a JSON object

one of the asynchronous programming Promise

• Resolve Callbacks to Hell

• Synchronize requests, waiting in turn

• Promise has three states, success, failure, waiting

• Promise has two parameters, which is actually two function types

  • The first parameter, resolve, represents a successful

  • The second parameter, reject, represents a failure

• Promise comes with then method,

  • Then method has two functions

    • The first function succeeds

    • A second function failed

Array Common Operations

• Reverse () Reverse Array

• [1,2,3,4].reverse ()

  • [4,3,2,1]

• Join ()

• Receives a parameter, which is a string used as a delimiter, and then returns a string containing all the array items

  • ["Red", "green", "Blue"].join ("|")

    • Red|green|blue

• Pop ()

  • Removes the last item from the end of the array, reduces the length value of the array, and then returns the removed item

  • [1,2,3].pop ()

  • [Up]

• Concat ()

  • Merging arrays

  • [1,2].concat ([3,4])

  • [1,2,3,4]

• Map map

  • Results a new array is produced without affecting the original array

  Console.log (function (item) {Arr=[1,1,3].map
    return item+1;
  }))

  • result [2,2,4], does not affect the previous array

• ForEach Loop

• Loop array

• Filter filters

• Filters an array by condition, returns the filtered array

Console.log ([1,2,3].filter (function (item) {
  if (item>1) {
  return Item
  }
}))

• The result is [2,3].

• Find Lookup

  • Used to find the first array element that matches the condition, there is a return element, no undefined

  Console.log ([1,2,3].find (function (item) {
    if (item==1) {
    return item;
  }
  }))

  • Results found 1

• Includes method

  • Determines whether the current array contains a specified element, and if true, no false

  Console.log ([1,2,3].includes (1))

  • Result true contains 1

• Some method

• To determine if the current array is eligible, return ture, no false

  Console.log ([1,2,3,6].some (function (item) {
  if (item>1) {
  return Item
  }
  }))

• The result is true that there are currently elements greater than 1

• Every method

  • Determines whether each element in the current array meets the criteria and returns True, with a non-conforming return false

  Console.log ([1,2,3].every (function (item) {
  if (item>1) {
  Return item
  }
  }))

  • reduce method

  • cumulative result, in fact, loop accumulation, =+

  • There are 4 parameters

    • the first parameter is the last accumulated value of the current element

    • the second parameter is the current element

    • the third parameter is the current index value

    • The fourth parameter is the array itself

  Console.log ([1,2,3].reduce (Prev,next,index,arr) {
  return prev+next;
  })
  

  • Procedure, the first option value is 0, plus the first item has a value of 1

    • 0+1//1

  • The second time, the previous cumulative value is 1, plus the value of the second item is 2

    • 1+2//3

  • The third time before the value is 3, plus the value of the third item is 3

    • 3+3-The full length is 3 elements, ending, at which time the final result of return is 6

  -So the result is 6

Vue.js Basic Knowledge Summary