Summary notes of front-end knowledge points in Vue.js

1. Differences between frameworks and libraries:

Framework: The framework has its own grammatical features, each of which has corresponding modules
Library libraries focus on a little

Benefits of the framework:

1. Refer to the quality of the code, development Speed 2. Increase the code reuse rate 3. Reduce coupling between modules (cohesion-poly-low coupling)

Ui:user interface
Gui:graphical user Interface
Cli:command Line Interface
Api:application interface

Transformation of Thinking Mode:

Switch from thinking mode of manipulating the DOM to data-based

2.Vue Overview

1,        What is a progressive construction of the user interface JS frame 2, where    small to the simple form processing, large to complex data operations more frequent single page application 3, why    1. Easy to read Chinese documentation    2. Easy to get started (learning curve is more relaxed)    3.    4. Component-based development approach    5. Code readability, maintainability improved by 4,    How to work: You can extend the template through a variety of extensions, you can enhance the functionality    through a wide range of plugins  Build the Environment:    Mode 1         Global installation VUE-CLI        $ npm Install--global vue-cli        # Create a new project based on Webpack template        $ vue init webpack My-project        # Install dependent, walk you        $ cd my-project        $ npm Install        $ npm Run dev    mode 2:        Direct introduction of the corresponding JS file

Basic knowledge in 3.Vue

1. Double curly braces Mustache (beard)/interpolation (interpolation expression) syntax:< any>{{expression}}</ any>effect: Outputs the result of an expression execution when the innerHTML of the element is invoked, and data can also be bound to view 2, instruction-Circular instruction basic Syntax 1:< anyv-for= "tmp in array"></ any>Basic Syntax 2:< anyv-for= "(value,index) in array"></ any>function: When iterating over the array, the temporary variable is saved in TMP, creating multiple any label 3, instruction-Select instruction syntax:< anyv-if= "expression"></ any>      < anyv-else-if= "expression"></ any>      < anyV-else= "expression"></ any>action: Depending on the true and false of the execution result of the expression, decide whether to mount the current element to the DOM tree 4, the instruction-event binding syntax:< anyV-on:eventname= "Handleevent"></ any>function: Binds the Handleevent method to the specified EventName event 5, instruction-Property binding basic syntax:< anyV-bind:myprop= "expression"></ any>supplement, support shorthand:< any: MyProp= "expression"></ any>effect: Binds the result of an expression execution to the MyProp property of the current element<imgv-bind:src= "' img/' +myimg"alt="">Dynamic Style binding<P: Style= "{Backgroundcolor:mybgcolor}">Dynamic Style binding</P>Dynamic Style class binding<H1: Class= "{Myred:false}">Bindings for dynamic style classes</H1>6. Instructions-bidirectional data binding Direction 1: Data Binding to view direction 2: Bind the results of user actions in the view (form elements) to the data basic syntax:<table cell element V-model= "variable">      </table cell element>

4. Modular

the so-called component, like playing with bricks, the package of components to reuse, the building blocks (components) together to form a complex page application. The component tree is a data structure composed of various components, its meaning is to help comb the application 1, Component creation Global component Vue.component (' my-com ', {Template: '<H2>It is a header</H2>      `    }) Local component New Vue ({components:{' my-footer ': {Template: '}}}) 2, component used as a Pass the label to use<my-com></my-com>3. Precautions 1. The ID of the component and how it is used follows the grill-string naming: A-b-c 2. If a component is to render multiple elements, put multiple elements in a top-level label, such as Div, Form 3. Global components can be used in any one of the ranges with ID example Inside the component, a direct call is possible, but the local component can only be called directly in the parent template

5. Custom Directives

1. Create and use Vue.directive (' change ', {    bind:function (el,bindings) {    //First Call    },    update:function (el, Bindings) {    //As long as there is a data change, it will be called    },    unbind:function () {    /    /unbind <   V-change= "Count"></any>

6. Filter

Filter is for some data filtering, filtering, formatting and other related processing, become the data we want

The essence of a filter is a method with a parameter with a return value

Vue1. built-in filters are supported, but Vue2. No more built-in filters, but custom filters are supported.

1, the creation and use of filters

1. Create   Vue.filter (    ' myfilter ',    function (myinput) {       //myinput is the result of the pipeline's pre-expression execution when the filter is called       //for Myinput, as per business requirements       return       ' processed result '    }) 2. Using    the <  any > {{expression | myfilter}} </  any >

2, how to call the filter, the completion of the parameters of the transmission and acceptance

1. Send <  any > {{expression | myfilter (Parameter 1, Parameter 2)}} </  any > 2. Accept Vue.filter (' Myfilter ', function (myinput, parameter 1, parameter 2) {    return ' result after processing '})

7. Composite components

Knowledge Review: Vue.component (' My-header ', {Template: '<Div></Div>`  }); <My-header></My-header>Composite components: Not a new concept, is a component, but this component can invoke other components note: 1. What the component will render depends on the template when the component is defined<my-list>    <My-item></My-item>  </my-list>The effect is not coming out of the 2. Allow direct invocation of another component in one component

8. Life cycle

Four stages:    Create preparation work (initialization of data ... )    mount Mount  for elements before and after the    update data changes,    destroy cleanup work (Turn off timer, set empty ...)    beforecreate/created    beforemount/mounted    beforeupdate/updated    beforedestroy/destroyed

9. Common Properties

1. Watch       1. Bidirectional data binding for form elements   v-model= "MyValue"   2. Monitoring    watch:{    myvalue:function (newvalue,oldvalue) {        }    }2 , computed    compute belongs to be used in templates, to fix complex business logic because there are dependent caches.    1. Specify the computed attribute        computed:{          myhandle:function () {           return Data          }        }    2.        Call  <any>{myhandle}}</any>

10. Communication between components

1, parent and child communication (props down) 1. Send<sonMyName= ' Zhangsan '>        </son>2. Receive the Son component: Vue.component (' son ', {props:[' myName '), Template: '<P>{{MyName}}</P>          `        }) 2, Child and Parent communication (events up) 1. Binding methods:{handleevent:function (msg) {}}<son@customEvent= "Handleevent"></son>2. Trigger The subassembly inside: this. $emit (' customevent ', 100), 3, ref (reference reference/reference nickname) Help to get the data, methods in the child component in the parent component. 1. Specify the ref attribute<sonref= "Myson"></son>2. Get subcomponent instance according to ref this. $refs. MySon4, $parent this. $parent get the parent component instance 5, sibling component communication 1.var bus = new Vue (); 2. Receiver bus. $on (' EventName ', function (msg) {}) 3. Sender bus. $emit (' EventName ', 123);

11. How Supplemental Components are created

1. Specify template content directly in the Templates Property 1. Global Component Vue.component 2. Local component {components:{' My-footer ': {Template: '} }}2,. Vue end-of-file<Template></Template>    <Script></Script>    <style></style>3. Specify a template content separately<ScriptID= ' mycontent 'type= ' Text/x-template '>    </Script>vue.component (', {Template: ' #myContent '})

12. Routing Module

The essence of a routing module is to establish a mapping between URLs and pages.

1. Basic concept and working principle of spa

Spa:single page Application A single-page application with only one full page, which, when loading a page, does not load the entire page, but only updates the contents of a specified container. For example, Gmail, mobile WebApp Working principle: 1. Resolves the Address bar     full page address, routing Address 2. From the routing dictionary, find the actual page 3 that you want to load from the route's address. Page 4 that initiates an AJAX request     request to load. As in the specified container Inserting a loaded page

2, the basic use of the routing module

Professional terminology:     Router Router route     route    routes routing Array (routing dictionary) 1. Introduction of Vue.js vue-router.js2. Specify a container <  Router-view></router-view>3. Component classes needed to create a business        var mylogin = Vue.component () 4. Configure the routing dictionary const myroutes = [  {path: ', Component:mylogin},  {path: '/login ', component:mylogin } ]; Const Myrouter = new Vuerouter ({  routes:myroutes}) New Vue ({   router:myrouter}) 5. Test    Modify the routing address in the address bar, Test to see if the loaded component is correct note: 1. First introduce vue, then introduce plug-in 2. Be sure to specify Router-view 3.route route {path: ', component:}  routes route array []  router Router: Access the corresponding component according to the specified routing rules new Vuerouter

3, using the routing module to achieve the way page jumps

< Router-link    to = "Routing Address" ></ Router-link >

4, the completion of the transfer of parameters

When jumping between pages, in some scenarios, you need to specify the parameter 1. Clear sender and receiver list--20--> detail1. Configure the recipient's routing address/detail---"/detail/:indexthis.$ Route.params.index2. Send Routerlink to= "/DETAIL/20" this. $router. Push ('/detail/20 ')

5. Routing Nesting

in a route, path corresponds to a component, and if the component needs to load other component according to different URLs, it is called a nested example of a route: for example a component now needs to be based on a different URL, Load B components or C components 1.  Specify a container for component a <Router-view></router-view  >2. Configure the routing dictionary  {    path: '/A ',    component:a,    children:[      {path: '/b ', component:b}    ]  }  Requirement: There are now two components, namely Login/mail, to set up a spa.  on this basis, you want the mail component nested Inbox/outbox/draft  supplement: In the set sub-route, the route matching rule is still applicable, except that the  routing address is empty and exception, to carry the parent component's routing address  /mail /mail/draft

13. How to build a CLI-based development environment

1. Specify a folder C:\xampp\htdocs\framework\vue\project2. Copy Tpls.zip to Project 3. Right-click the package, Unzip to the current folder 4. Go to TPLS5. Press SHIFT and right mouse button at the same time, choose to open the command line at this location serial Port 6. Perform NPM install7. Execute NPM Start

14.axios

Get method for 1.axios

Export const getajax= Function (geturl,getajaxdata) {  return Axios.get (GETURL, {    params: {      ') GetAjaxDataObj1 ': Getajaxdata.obj1,//obj1 is a property of Getajaxdata '      getAjaxDataObj2 ': Getajaxdata.obj2    }}}  

The 2.axios Post method

Export const postajax= Function (geturl,postajaxdata) {return Axios.get (PostURL, {  ' postAjaxDataObj1 '): Postajaxdata.obj1,//obj1 is a property of Postajaxdata  ' postAjaxDataObj2 ': Postajaxdata.obj2})}

3.axios Interceptor
Mainly divided into the request and response of the two interceptors, request interception is generally configured for the corresponding request header information (applicable and common request method, although the Ajax get method does not have a request header, but Axios inside the encapsulation), the response is generally reponse interception, if the return result is [] can be converted to 0

1. Request interception: Put the current city information into the request header

Axios.interceptors.request.use (config = = {Config.headers.cityCode = Window.sessionStorage.cityCode/// Jscookie.get (' citycode ') return config},

2. Response interception: Handling the results of reponse

Axios.interceptors.response.use (response) =>{let  data = Response.data  if ( Response.request.responseType = = = ' Arraybuffer ' &&!data.length) {    reponse.date=0  }})

Reprint Source: Web Front end development» Front End Knowledge Point summary--vue

Summary notes of front-end knowledge points in Vue.js