Introduction to Vue Concepts and Common commands (1) _javascript skills

Vue.js Introduction

Vue.js is a JavaScript MVVM (Model-view-viewmodel) library, very concise, Vue focus only on the view layer, relatively angularjs to provide a more concise, easy to understand the API. Vue implements the response data binding and combined view components as much as possible through a simple API.

Vue and MVVM mode

MVVM mode is Model-view-viewmodel.

Vue is data-driven, Vue itself binds the DOM and the data, and once the bindings are created, the DOM and the data remain synchronized, and the DOM changes whenever the data changes.

ViewModel is the core of Vue, and it is an example of Vue. When an instance is Vue, the HTML element can be either body or an element that is referred to by an ID.

DOM listeners and data bindings are key to achieving two-way binding. Dom listeners listens to the changes of all view-layer DOM elements in the page, and when it changes, the data in the model layer changes, and data bindings listens to the data in the model layer, and when it changes, the DOM elements of the view layer change.

Vue.js Features

simplicity: The page consists of an HTML template +json data +vue instance
data-driven: automatically compute attributes and trace dependent template expressions
component: building a page with reusable, decoupled components
Lightweight: Small amount of code, not dependent on other libraries
fast: accurate and efficient batch DOM updates
Template friendly: can be installed by Npm,bower and so on, it is easy to fit into

Vue.js Introduction Small Example

declarative rendering

This example consists of an HTML template (View) +json data (Model) +vue instance (ViewModel).

To create an instance of Vue, pass in an option object such as data, mount elements, methods, mold lifecycle hooks, and so on. In this example, the El property of the option object is #app, which means that the Vue instance is mounted on the <div id= "app" >...</div> element, and the Data property is Exampledata, which indicates that model is exampledata. View {{message}} is a data-binding syntax for Vue, at run time, {{message}} will be replaced by the message property of the data object.

<! DOCTYPE html>
 
 

Bidirectional binding

Use V-model in Vue to implement bidirectional binding on form elements. When the information entered in the input box changes, the information in the,<p>...</p> changes, and the information in the input box changes as the Exampledata.message value is modified through the console console.

<! DOCTYPE html>
 
 

Run Screenshots:

Vue.js Common Instructions

The Vue directive, which begins with V, acts on HTML elements, and binds an instruction to an element, adding special behavior to the bound element, which can be viewed as a special HTML attribute.

Several of the built-in directives commonly used in Vue are described below. Of course, Vue can also customize instructions as needed in addition to the built-in instructions.

V-if directives

Conditional judgment instruction that inserts or deletes an element based on the true or false expression value, and the expression returns a Boolean value, as follows:

V-if = "expression"

Example:

In this case, the expression is Yes,no, and the value of Age>25,yes is true, so the element is displayed in HTML, and the other is the same.

<! DOCTYPE html>
 
 

Run Screenshots:

V-show directives

Conditional render directives, unlike v-if, where elements exist in HTML code, regardless of whether the V-show value is true or false, and the element exists in the HTML code only if the V-if value is true. The v-show directive simply sets the style value of the element CSS. The syntax is as follows:

V-show = "expression"

Example:

<! DOCTYPE html>
 
 

Run Screenshots:

V-else directives

Can be used with v-if or v-show, the V-else directive must be adjacent to v-if or v-show, otherwise the command will not work properly. Whether the V-else-bound element is rendered in HTML depends on the previous use of v-if or v-show. If the previous use is v-if and the v-if value is true, the v-else element is not rendered, and the v-show element is still rendered to HTML if the previous use is v-show and the V-else value is true.

V-for directives

loop instruction, which renders a list based on an array, similar to JavaScript traversal, with the following syntax:

V-for = "Item in Items"

Example:

In this case, the array is Todos, traversing each element in the array todos, and displaying the text section.

<! DOCTYPE html>
 
 

Run Screenshots:

In the browser console, enter App.todos.push ({text: ' New Item '}), and a new piece of information is inserted.

Run Screenshots:

V-bind directives

To bind the element properties to the DOM, the syntax is as follows:

v-bind:argument= "Expression"

Where argument is typically an attribute of an HTML element, such as: v-bind:class= "expression".

Note: The v-bind instruction can be abbreviated as: Colon. such as:: class= "expression".

Example:

In this example, when the mouse hovers over the span label text, the time that the page is loaded is displayed.

<! DOCTYPE html>
})
 </script>
 </body>
 
 

v-on directives

Used to listen for DOM events, syntax similar to v-bind, such as a listener click event v-on:click= "Dosth".

Note: The v-on instruction can be abbreviated to the @ symbol. such as: @click = "Dosth".

Example:

<! DOCTYPE html>
 
 

Run Result:

A comprehensive example

<! DOCTYPE html>  

Run Screenshots:

Reference Links:

Vue.js 60 Minutes easy to get started

Introduction Vue.js

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.