Vue.js 2.0, Next day day02

# # One, send AJAX requests

# # 1. Brief introduction

Vue itself does not support sending AJAX requests, it needs to be implemented using plugins such as Vue-resource, Axios, etc.

Axios is a promise-based HTTP request client that is used to send requests and is vue2.0 officially recommended, while not updating and maintaining Vue-resource

Reference: Search Axios on GitHub, view API documentation

# # 2. Using Axios to send AJAX requests

# # 2.1 Install Axios and introduce

NPM Install Axios-s

You can also download the Axios.min.js file directly

# # # # 2.2 Basic usage

Axios ([options])

Axios.get (Url[,options]);

Method of transmitting the parameter:

1. Using URL to send parameters

2. Passing parameters via the params option

Axios.post (Url,data,[options]);

Axios The data format is request Payload when sending data by default, not our usual form data format,

So the parameter must be passed as a key-value pair, and cannot be transmitted in JSON form.

Method of transmitting the parameter:

1. Stitching yourself into key-value pairs

2. Use Transformrequest to convert the request data before sending the request

3. If modular development is used, the QS module can be used for conversion

Axios itself does not support sending cross-domain requests, does not provide the appropriate APIs, and the author does not plan to add support for sending cross-domain requests at Axios, so only third-party libraries can be used

# # 3. Using Vue-resource to send cross-domain requests

# # 3.1 Install Vue-resource and introduce

CNPM Install Vue-resource-s

# # # # 3.2 Basic usage

Use this. $http Send request

this. $http. Get (URL, [options])

this. $http head (URL, [options])

this. $http. Delete (URL, [options])

this. $http. Jsonp (URL, [options])

this. $http. Post (URL, [body], [options])

this. $http. put (URL, [body], [options])

this. $http patch (URL, [body], [options])

# # 4. Practice

Baidu Search List

After-school assignments:

1. Show only 4 lines

2. Show search results in new page after enter

# # Two, Vue life cycle

The process of creating a Vue instance from creation to destruction, called the life cycle, has eight phases

# # III, calculated properties

# # 1. Basic usage

The computed attribute is also used to store data, but has several characteristics:

A. Data can be manipulated in a logical process

B. Monitoring data in a computed attribute

# # # 2. Calculate attribute vs method

Defining a Get function of a computed property as a method can also implement a similar function

Difference:

A. The calculated attribute is updated based on its dependencies, and changes can only be updated if the dependent dependencies change

B. The computed property is cached, so long as the dependent dependency is not changed, the value obtained by accessing the computed property multiple times is the computed result of the previous cache and will not be executed multiple times

# # 3. Get and set

The computed property consists of two parts: Get and set, which are used to get the computed properties and set the computed properties

Default is only get, if set is required, add it yourself

# # Four, properties and methods of the Vue instance

# # 1. Property

VMs. $el

VMs. $data

VMs. $options

VMs. $refs

# # 2. Method

VMs. $mount ()

VMs. $destroy ()

VMs. $nextTick (CALLBACK)

VMs. $set (Object,key,value)

VMs. $delete (Object,key)

VMs. $watch (Data,callback[,options])

# # Five, custom directives

Category: Global directives, local directives

# # 1. Custom Global Directives

Use global method vue.directive (instruction ID, definition object)

# # 2. customizing local directives

# # 3. Practice

Dragging elements in a page

onmouseout

OnMouseUp

# # VI, Transition (animation)

# # 1. Brief introduction

Vue provides a number of different ways to apply transitions when inserting, updating, or removing the DOM

In essence, CSS3 animations are used: transition, animation

# # 2. Basic usage

With the transition component, the element that will animate is contained within the component

<transition>

Elements of Motion

</transition>

Filtered CSS class Name: 6

# # 3. hook function

8 x

# # 4. Combine the third-party animation library animate: CSS used together

<transition enter-active-class= "Animated Fadeinleft" leave-active-class= "animated FadeOutRight" >

<p v-show= "flag" > Blog </p>

</transition>

# # 5. Multi-element animation

<transition-group>

# # 6. Practice

Multi-element animation

This article is from the "12392007" blog, please be sure to keep this source http://12402007.blog.51cto.com/12392007/1950798

Vue.js 2.0, next day day02