1. ForEach some filter findIndex

ForEach cannot be terminated during traversal

Some terminates traversal

Filter returns a new array

FindIndex Finds the index of the object

2. String method: includes

ES6, as a String provides a new method, called String. Prototype. Includes (‘ to contain the String ‘), if you include will return true, otherwise it returns false

3. The filter

Vue.js allows custom filters that can be applied to some common text formatting. Filters can be used in two places: mustachc interpolation and V-bind expressions.

Definition syntax for filters

Vue. Filter ('nameFilter', 'nameFilter'); Var. Filter ('nameFilter', function(name, STR){return name+'123'+ STR}) var. Filter (function(name, STR){return name+'123'+ STR})Copy the code

Filter call

{{name | nameFilter}} / / here is with parameters {{name | nameFilter (STR)}} / / filter can be used multiple {{name | nameFilter | filter2}}Copy the code
4. Global and private filters

Global filter

// Global filter, do time formatting Filter ('dateFormat',function(dateStr,pattern){var dt = new Date(dateStr) var y = dt.getFullYear() var m = dt.getMonth()+1 var d = dt.getDate() if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){ return `${y}-${m}-${d}` }else{ var hh = dt.getHours() var mm = dt.getMinutes() var ss = dt.getSeconds() return `${y}-${m}-${d} ${hh}:${mm}:${ss}` } })Copy the code
<p>{{item| dateFormat('yyyy-MM-DD')}} </p>
Copy the code

Private filter

var vm = new Vue({ el:'#app', data:{ dt:new Date() }, methods:{ }, Filters :{// Define private filters // Filters have two conditional filter names and handlers // Filters are called using the nearest principle. If private filters and global filters have the same name, DateFormat :function(dateStr,pattern=""){}})Copy the code
5. String padStart

There are two methods in the ES6. / / in front of the String to fill a String prototype. PadStart (maxLength, fillString = ‘ ‘) / / fill at the end of the String String.prototype.padEnd(maxLength,fillString=”)

Var m = (dt.getMonth()+1).tostring.padStart (2,'0')Copy the code
6. Customize key modifiers
<input type = "text" @keyup.enter='add'>Copy the code

Common keys Alias: Enter TAB delete ESC Space Up Down left Right

F2 = 113 <input type = "text" @keyup.f2='add'>Copy the code
7. Custom global directives

All instructions in VUE start with v- when called

We define a V-focus directive whose function is to get focus

Directive () defines the global directive with vue.directive (). Parameter 1: specifies the directive name. When calling, the instruction name must be prefixed with v- to make the call // argument 2: Directive. Directive ('focus',{// When a directive is bound to an element, the bind function is executed immediately, only once: Function (el){// In each function, the first argument, always el, is the element to which the instruction is bound. The el argument is a native JS object that has not yet been inserted into the DOM at the time the instruction is bound. Since an element must be inserted into the DOM to get its focus}, // indicates that while the element is inserted into the DOM, the inserted function will perform actions related to the JS behavior, preferably while inserted, Inserted :funciotn(){el.focus()}, // Updated when VNode is updated, which may fire multiple updates :function(){}})Copy the code
Directive ('color',{// the style is bound to the element by the directive, regardless of whether the element is inserted in the page or not. The element must have an inline style. Bind: function(el){el.style.color = 'red'})Copy the code
</input type = "text" v-color = "'blue'"></input> vue. directive('color',{bind:function(el,binding){bind:function(el,binding){ el.style.color = binding.vulue } })Copy the code
8. Define private directives
var vm = new Vue({ el:'#app', data:{}, Directives :{// Customize private directive 'fontWeight':{bind:function(el,bingding){el.style.fontWeight = binding.value}}}}) <input type = "text" v-fontWeight="500"></input>Copy the code
9. Short form of instruction function
Var vm = new Vue({el:'#app', data:{}, Cache :{// This function is equivalent to writing code into bind and update 'fontWeight':function(el,bingding){el.style.fontWeight = binding. Value }}})Copy the code
10. Life cycle

1. What is the declaration cycle: From the time a VUE instance is created, run, and destroyed, there are always a variety of events, collectively referred to as the life cycle. (Lifecycle hooks = lifecycle functions = lifecycle events)

2. Lifecycle functions can be divided into three categories

1) Life cycle functions during creation

  • beforeCreate:
  • created:
  • beforeMount:
  • mounted

2) Run-time lifecycle functions

  • beforeUpdate:
  • updated:

3) Life cycle functions during destruction

  • beforeDestroy
  • destroyed

11. Basic use of vue-resource

Vue-resource mounts a $HTTP attribute on vue

// When a GET request is initiated, $http.get(url). Then (function(result){// Console.log (result.body)})Copy the code
// Post request // The first parameter is the URL, the second parameter is the request parameter, and the third parameter is the configuration item // Manually initiated POST request. This.$POST (url,{},{emulateJSON: true}).then(result =>{ console.log(result.body) })Copy the code
$http.jsonp(url).then(result =>{console.log(result.body)})Copy the code

Implementation principle of JSONP

  • Due to browser security restrictions, AJAX is not allowed to access cross-domain requests (data interfaces with different protocols, domain names, and ports), which browsers consider unsafe
  • The SRC attribute of the script tag can be dynamically created to point to the address of the data interface, because there is no cross-domain restriction of the script tag. This method of data acquisition is called JSONP.
  • Concrete implementation process
    1. Start by defining a callback method on the client side to pre-define operations on the data
    2. The name of the callback method is then submitted to the server’s data interface as a URL parameter
    3. The server data interface organizes the data to be sent to the client, takes the name of the callback method passed by the client, concatenates a string that calls the method, and sends it to the client to parse and execute
    4. The client takes the string returned by the server and parses it as a script to retrieve the JSONP data