Vuejs Comprehensive analytical _javascript techniques

What's vue.js?

Vue.js (the pronunciation/vjuː/, like view) is a set of progressive frameworks for building user interfaces. Unlike other heavyweight frameworks, Vue is designed with a bottom-up incremental development. Vue's core library focuses only on the view layer and is very easy to learn, and is easily integrated with other libraries or existing projects. On the other hand, Vue is fully capable of driving complex single-page applications with single file components and Vue ecosystem-supported library development.

The goal of Vue.js is to implement the data binding and combined view components of the response with as simple an API as possible.

If you are an experienced front-end developer, want to know the difference between vue.js and other libraries/frameworks, view the comparison to other frameworks.

1.VueJS Purpose:

The core of Vuejs is to solve:

A: Resolving data binding problems,

The main purpose of the B:VUE framework is to develop large single page applications,

C: It also supports the component, that is, the page can be encapsulated into a number of components, the use of block-style programming, so that the highest page reusability (support component).

2.VueJS Features:

The I:MVVM mode (data variable (model) changes the view (view) also changes, views change, data variables (model) also change.

There are several great benefits to using the MVVM pattern:

1. Low coupling. View can be independent of the model changes and modifications, a viewmodel can be bound to different view, when the view changes model can be unchanged, when the model changes the view can also be unchanged.

2. reusability. You can put some of the view logic in the ViewModel, so many views reuse this view logic.

3. Independent development. Developers can focus on the development of business logic and data (ViewModel). Designers can focus on the design of the interface (View).

4. testability. You can test the interface (view) against ViewModel

II: Modular

III instruction System

IIII:VUE2.0 starts supporting virtual DOM

Vue1.0 is the real DOM element, not the virtual one.

Virtual DOM: can increase page refresh speed

Virtual DOM has advantages and disadvantages.

A: Size-One of them is that more functionality means more lines of code in the code package. Fortunately, Vue.js 2.0 is still relatively small (current version 21.4kb) and

and is also removing a lot of things.

B: Memory-again, the virtual DOM needs to keep the existing DOM copy in memory, which is a trade-off between the speed of the DOM update and memory usage.

C: All cases are not applicable-if the virtual DOM can be modified in batches at once, it is very good. But what if it's a separate, rare update? Any of these

DOM updates will cause the virtual DOM to have no meaningful pre calculation.

V: Through variable models

Vuejs expression:

Steps:

1 references

<script src= "Js/vue.js" type= "Text/javascript" charset= "Utf-8" ></script>

2. Declare a section of HTML to be managed by the framework

<div id= "MyApp" > 
<ul> 
<li></li> 
<li></li> 
<li></li > 
</ul> 
</div>

3. Initialization Vue fill Vue parameters

I. attribute: EL declaration vuejs management Boundary Extension: Ng-app similar (this is in Angularjs)

Ii. Properties: Data (Status | | property, which stores the properties of some data, must be an object format

<script type= "Text/javascript" > 
var vm = new Vue ({ 
el: "#myapp", 
data:{hello: "Hello word Vue app!" , message 
: "Wyx", 
result:{name: ' Xinxin ', Password: ' 123 '} 
} 
); 
</script>

4. Expression: In the form of {{}} The data inside of us is displayed in the page,

Like what:

Data:{{message: ' xxxxx '}}

View: {{message}}

<div id= "MyApp" > 
<ul> 
<li>{{hello}}</li> 
<li>{{message}}</li> 
<li>{{result.name}}</li> 
</ul> 
</div>

View: {{message}} The key is bound in code and the value is displayed on the page

The data core function is to store the information displayed on the page (model) (a mapping relationship between the acquired model and the content to be displayed on the page), that is, if we implement the back-and-end interaction, the page is automatically bound as long as the resulting data is stored in the Model------> View Data Flow.

3.VueJS instruction:

directive: In fact, it means that Vue defines a custom attribute with a V-start, each of which has its own meaning and function,

Directive Usage: v-directive name = "Expression judgment or Model attribute or event"

V-model:

Function: To receive some data entered by the user, can be directly mounted to the data attribute

Syntax: V-model = "Property value" {Property value: Literal value}

Processing in data: It is best to define this attribute value in data, otherwise it will be an error at first.

V-if:

Function: Load fixed content by judgment, if true load, delete element when False

Where to use: In Permissions management, page module condition loading

Syntax: v-if= "Judging expressions" using the same as if

Features: Control elements inserted or deleted is not hidden

V-show:

Elements are always rendered and kept in the DOM, and security is not v-if high because the V-show usage is the same as v-if, except that V-show sets the element display to none, and does not remove the element directly.

V-ifvs. V-show

In general, V-if has a higher switching consumption and
The v-show has a higher initial rendering consumption. Therefore, if you need frequent switching to use v-show better, if the conditions are not likely to change at runtime, the use of v-if better.

V-else

The element must be immediately behind the v-if or v-show element--otherwise it cannot be recognized.

V-bind:

Abbreviation::

When the {{}} expression binds data, the data can be displayed directly in the page (HTML).

V-bind img src attribute,

Function: V-bind to bind HTML attributes in a page

Syntax: v-bind: Picture inside src attribute = "Picture address in data"

Such as:

<div v-bind:style= "Styles" >style</div>
data:{ 
img: " Img/logo.png ",
styles:{color: ' Red ', FontSize: ' 30px '}
}

Abbreviated form:

<div:style= "Styles" >style</div>

The style style added by V-bind is added inline.

V-on:

Abbreviated form: V-on:click----> @click

@+ Events

Function: Bind the events in the page Vue custom set of event mechanisms

ANGULARJS support for the PC side is relatively good, the mobile side of the general support, Vue mainly support the mobile side, but also support the PC side

Event development, Event v-on: Binding in the page (view), and then Vue instances inside, in the methods to monitor

The behavior we do on the page: v-on:click= "function name"

The function should be written in the methods attribute of the Vue instance

Methods also be written as an object:

methods:{
clickbtn:function () {
}
}

Example: <button v-on:click= "clickbtn ()" > Click </button>

methods:{ 
clickbtn:function () { 
alert (' Triggers the button-bound event '); 
} 

Passing a value in an event, in which the event list is passed through the $event, and the value in the event list can be obtained directly from the methods.

A result (a list of events) that arises when an event is triggered by an action that triggers an event interaction.

List of events in Vue $event

List of events:

Add: Event Modifiers

By the point (.) Represents the instruction suffix to invoke modifiers.

. Stop

. prevent

. Capture

. Self

<!--Prevent Click event bubbling-->
<a v-on:click.stop= "Dothis" ></a>
<!--commit events no longer overload page-->
<form V-on:submit.prevent= "OnSubmit" ></form>
<!--modifiers can be concatenated-->
<a v-on:click.stop.prevent= " Dothat "></a>
<!--only modifiers-->
<form v-on:submit.prevent></form>
<!-- Use event capture mode when adding event listeners-->
<div v-on:click.capture= "Dothis" >...</div>
<!-- Triggers the callback when the event fires on the element itself (not the child element)-->
<div v-on:click.self= "Dothat" >...</div>

V-for:

Function: Control the loop of HTML elements, and realize the generation of data list

Usage:

View:v-for= "Item in Collection"

Item: Children of each collection

Collection: The collection to be traversed

Write on who's on the loop

Model: Add the future to be iterated through and output array objects on the page

Instance:

Consider:

1.vue core binding data, in the development process, as long as the data binding well, leaving only to focus on the implementation of business

2. When developing, how to data binding:

(1) based on the front and back interaction protocol

(2) Mock data for testing-----implementation Binding

3. Initialize the VM (define a variable that can hold the data once the data is parsed, write it in data, give a ' value ')

4. Request access to Data

5. Get the value and put it in data

6. Find the corresponding location in view traversal (V-for written on who above who traverse, write on the div on the representation of a few data, show a few div) ()

7. Search function

Ideas:

A: When did the event occur-------------on the button button

B: Gets the value entered in the text box through the event (V-model record input value)

C: Send a request to get the result

D: Force the resulting data to be assigned to result, view automatically update

Summarize:

1. Expression {{}}}

2. Directive V-model v-if v-else v-show v-on v-bind

3. Share Web site: http://cn.vuejs.org/v2/guide/

The above content is a comprehensive analysis of the VUEJS, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!