VUE,JS Basic Knowledge

Vue.js is a set of MVVM frameworks that build user interface (view). Vue.js's core library focuses only on the view layer and is very easy to learn and easily integrates with other libraries or existing projects.

The purpose of 1.1 Vue.js

The core of vue.js is to solve the following three problems:

1. Solve the problem of data binding;
2. The main purpose of vue.js frame production is to develop the Daxing single page application (Spa:single page application)

PC-side support is good in angular.js, but support for mobile is general. Vue.js mainly supports mobile and PC-side.

3. It also supports assembly. That is, the page can be packaged into several components, the use of building block programming, so that the page has the highest reusability (support component).

1.2 vue.js characteristics

1. MVVM mode

M:model business model, usefulness: processing data, providing data

V:view user interface, user view

When the data in the business model is changed, the view of user views changes as well. When a user view is changed, the data in the business model can change.

1. Component of
2. Instruction System
3. Vue.js 2.0 starts with support for Virtual Dom (Vue.js 1.0 is the true dom of the operation, not the virtual DOM)

The virtual DOM can increase the refresh rate of the page.

Chapter II Vue.js Getting Started

Steps to use Vue.js:

Step one: Introduce vue.js in HTML pages

Step Two: Vue.js provides a Vue and we need to create an object.

New Vue ({});

The third step: in the user interface view, the data in the form of {{}} is displayed in the page.

In the user interface, the key of data that is bound in the {{}} code, and the value of the key is displayed on the page.

Vue.js has a mapping relationship to the retrieved data and the {{}} displayed on the page.

The app's variable proxies the data in Vue. So when we access data, we can use App.name directly.

In this way, if we want to implement the front and back interaction, as long as the data from the background, in the database, the page will be automatically bound, so that the data flow from the Model->view.

Chapter III vue.js Directive

The directive, in fact, refers to the custom property of the V-start of vue. Each of the different attributes has its own meaning and function.

Syntax of the instruction:

V-directive name = "expression is judged either by the property name in the business model or by the event name"

3.1 V-text

Action: Plain text in an action element

Shortcut: {{}}

3.2 v-html

Action: HTML in an ACTION element

3.3 V-bind

Role: V-bind The element properties in the bound page. For example: the href attribute of a, the SRC, alt, and title attributes of IMG.

Syntax: V-bind: attribute name of element = "Key name in data"

In the view template, you can use a simple JS form, for example:

3.4 v-show

Role: By judging whether the content is displayed. If the value is true, it is displayed. Otherwise it hides.

Syntax: v-show= "Judgment expression"

Features: elements are always rendered in the DOM and are only set Display:none

3.5 v-if

Role: Determines whether to load fixed content. If true, the load is not loaded when it is false.

Useful: Used in Rights management, page condition loading

Syntax: v-if= "Judgment expression"

Features: Control elements are inserted or deleted, not hidden.

The difference between v-if and v-show:

In general, V-IF has higher switching consumption, higher security, and V-show has more initialization rendering consumption. Therefore, if you need to switch frequently and have no security requirements, use V-show. If the condition cannot be changed at run time, it is better to use v-if.

3.6 V-else

V-else must be immediately behind v-if, or he cannot be identified. When the conditions of v-if are not established.

3.7 v-for

Function: Control the loop in the HTML element, and realize the generation of the verse list.

Usage:

View

V-for= "Item in Collection"

Item: Child of the collection

Collection: The collection that is traversed, usually an array.

Use: Write on who, who loops.

Data:

3.8 v-on

Role: Bind events in a page

Syntax: v-on: Event type = "event handler function name"

Abbreviation: @ Event Type = "event handler function name"

Usage:

In view, with v-on: Event type = "Method name in methods"

In the Vue instance, listen in methods: Write the methods method as well.

3.9 V-model

Function: Accept some data entered by the user, directly can be linked to the Data property. This results in two-way data binding (when the data in the business model changes, the data in the user interface changes, and the data in the business model changes when the data in the user interface changes).

Syntax: V-model = "Key name in data"

In data, it is better to define this attribute, otherwise it will be an error.

Turn from: http://www.cnblogs.com/yueyue-love/p/6215711.html;

VUE,JS Basic Knowledge