DOM Document object model

* Contains content related to page elements
* Get the element object in the page through the selector
let Element object = document.querySelector(" selector ")

* Get and modify the text content of an element
Element object .innerText = "xxx"; Modify text content

Element object .innerText Get text content

* Get and modify input Value of the control
Control object .value="xxx"; modify

Control object .value obtain

* Create element object
let Element object = document.createElement(" Tag name ");

* Add an element object to an element
document.body.appendChild( Element object );

front end MVC Design mode

* MVC Design mode , In fact, it is to divide all the codes of the front end to implement a certain business into three parts
* Model: Model , Refers to the data model , This data usually comes from the server
* View: view , Refers to the page label content
* Controller: controller , Refers to the process code that displays data in the view
* front end MVC Disadvantages of design pattern : Need to Controller The controller part is carried out frequently DOM( Traversing the code to find elements ) operation , Will affect execution efficiency .

M,V,VM Design mode

* Model: Model , Refers to the data model , This data usually comes from the server
* View: view , Refers to the page label content
* ViewModel: View model , Bind elements that may change in the page to a variable in memory , When the value of a variable changes, the corresponding element will be directly found in memory to change it .

Vue

* Vue Framework is the most popular front-end framework at present
* Vue Object equivalent to MVVM In design mode VM, Be responsible for binding elements and variables that may change in the page , After binding, it will continuously listen for changes in variables ,
When the value of a variable changes, it will automatically find the corresponding element and change its display content .
* Relevant instructions :
* {{ variable }}: interpolation , Let the text content here be bound with variables
* v-text=" variable ", Let the text content of an element be bound to a variable
* v-html=" variable ", Let the element's html Content and variable binding
* v-bind: Attribute name =" variable ", Let the element's xxx Property and variable binding Can be omitted v-bind
* v-model=" variable ", Bidirectional binding , When the value of a variable changes, the page will change accordingly , When the content of the page changes, the variables will also change
* , Only use form Two way binding is only involved when the control in the form .
* v-on: Event name =" method ", Event binding Abbreviation @ Event name =" method " , The called method must be declared in Vue Inside methods inside

Technology
©2019-2020 Toolsou All rights reserved,
Solve in servlet The Chinese output in is a question mark C String function and character function in language MySQL management 35 A small coup optimization Java performance —— Concise article Seven sorting algorithms (java code ) use Ansible Batch deployment SSH Password free login to remote host according to excel generate create Build table SQL sentence Spring Source code series ( sixteen )Spring merge BeanDefinition Principle of Virtual machine installation Linux course What are the common exception classes ?