Vue.js syntax and common instruction __js

If you're used to using jquery to manipulate the DOM, you can learn to vue.js with the idea of manually manipulating the DOM, because Vue.js is data-driven and requires no manual manipulation of the DOM. It binds the DOM and the data with some special HTML syntax. Once you create a binding, the DOM is synchronized with the data, and the DOM is updated accordingly whenever the data is changed.

Of course, when using vue.js, you can also use it in conjunction with other libraries, such as jquery.

1. Use

The process of using Vue is the process of defining the various components of MVVM (Model-view-viewmodel).

2, vue.js of common instructions

Vue.js provides some common built-in instructions, and then we'll introduce a few of the following built-in directives:

v-if instruction v-show instruction v-else instruction v-for instruction v-bind instruction v-on directive

Vue.js has a good extensibility, we can also develop some custom directives, and later articles will introduce custom directives.

2.1 V-if Instruction

V-if An expression that can be converted to a Boolean type

2.2 V-show

2.3 V-else Instruction

2.4 V-for Instruction

2.5 v-bind Instruction

The v-bind instruction can be preceded by an argument with a colon separated by its name, which is usually an attribute of an HTML element

2.6 v-on Command 8

2.7 V-model Instruction

V-model create a two-way data binding on a form control element