This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August
Introduction to VUE – Chapter 4
The following sections document some basic common features of VUE.
Instructions 1.
Unlike jQuery’s manual manipulation of the DOM, Vue uses instructions for two-way data binding, and dom updates when data is updated
The common instructions are as follows:
1.v-bind
Assign a value to a DOM element attribute, either a custom attribute or a native attribute (v-bind: attribute =”” can be abbreviated to attribute =””), for example:
<div data="{{data}}"></div>
2.v-on
For custom native events; For example, add a click event to button (V-on: event name =” expression “;
3.v-model
Two-way data binding. The most frequently used instruction. For example, the input
<input v-model="inputVal"/>
4.v-for
Circular instruction. Often used to loop through a page array of data.
Syntax V-for =”item in list” (List can be object or array)
5.v-if/v-else
Judgment instruction. Similar to if/else in code, followed by an expression that can be converted to a Boolean type. Use to show or hide the DOM. (Else will automatically match an if, multiple judgments can use V-else -if)
6.v-show
The effect is similar to v-if/else. All control whether the DOM is displayed or not. The difference is that the v-if/else expression false does not load the part of the DOM, whereas v-show does CSS display:block/ None.
2. Life cycle
Each instance object of a VUE is created, initialized, compiled, mounted, rendered – updated, and unmounted through a series of processes called the lifecycle. Details are as follows:
1. (Before creation)
| The life cycle | describe |
|---|---|
| beforeCreate | Before creation, after instantiation, before data observation and event configuration |
| created | After the instance is created, the instance is created but not mounted. Data observation and event configuration complete, $EL not visible |
| beforeMount | Called before the mount begins |
| mounted | Mount complete. Dom rendering successful |
| beforeUpdate | Called before data update |
| updated | The data is updated and dom is re-rendered |
| activated | Called when the keep-live component is activated |
| deactivated | Called when the keep-live component is disabled |
| beforeDestroy | Called before instance destruction. The instance is still available at this point |
| destoryed | Called after instance destruction. All instructions and events of VUE are unbound and destroyed |
3. The listener
Usually we use Watch to listen for data changes in data, and then trigger events for processing.
Function (newV,oldV){console.log('newV:',newV,','oldV:',oldV)} objInfo:{ Handler (newV,oldV){console.log('newV:',newV,','oldV:',oldV)}} Objinfo. status':{handler(newV,oldV){console.log('newV:',newV,','oldV:',oldV)}}}Copy the code