The main aspects of the front end

logic

• judge
• loop

event

• Browser event: window document
• DOM event: add, delete, traverse, modify node element content

view

• html
• css

signal communication

• xhr
• Ajax
• axios

Vue

Separation principle of SOC attention

Pay attention to the view layer: show it to the user and refresh the data given by the background

Network communication: Axios

Page Jump: Vue router

State management: vuex

Vue-ui：

Vue is a synthesizer
MVVM + Dom

The implementer of MVVM pattern

• Model: model layer, where JavaScript objects are represented
• View: view layer, which represents DOM (element of HTML operation)
• ViewModel: middleware connecting view layer and data, Vue.js It is the implementer of ViewModel layer in MVVM

In MVVM architecture, data and attempts are not allowed to communicate directly, only through ViewModel, which defines an observer

• ViewModel can observe the change of data and update the corresponding content
• ViewModel can monitor the change of view and inform the data of change

Introduction of Vue by cDNA

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

This work adoptsCC agreementReprint must indicate the author and the link of this article