1. Template syntax
1.1 overview of template syntax
Vue.js uses an HTML based template syntax that allows developers to declaratively bind the DOM to the data of the underlying Vue instance. All Vue JS templates are legal HTML, so they can be parsed by standard browsers and HTML parsers.
In the underlying implementation, Vue compiles the template into a virtual DOM rendering function. Combined with the response system, Vue can intelligently calculate how many components need to be re rendered and minimize the number of DOM operations.
1. What are the ways to render strings to the page?
Splicing strings using native js
Using template engine splicing
Using Vue interpolation syntax
Document fragment document createDocumentFragment
Use es6 ` ` backquotes to splice strings
2. What template syntax have we used?
API query: https://cn.vuejs.org/v2/api/
1.2.1 v-cloak instruction
The interpolation expression has the problem of flashing. It will load the interpolation label first and refresh the data after reading the data. Generally, we can't find it unless the network fluctuates, but we can't let this happen, so we need to use the v-cloak instruction.
The principle of this instruction is to hide the interpolation label, replace the value, and then display the final value.
Prevent page loading from flashing:
The effect can't be simulated. Let's make it up by ourselves.
1.2.2 data binding instruction
Don't we have interpolation expressions? Why do we need these data binding instructions?
It must have its own characteristics,
Effect of execution:
v-text is more concise than interpolation expression. v-html can ensure that HTML tags are read, v-pre displays original information and skips the compilation process, which are conducive to performance optimization.
1.2.3 data response
What is responsive?
Response in html5 (the change of screen size leads to the change of style).
Data response (the change of data leads to the change of page content).
What is data binding?
Populate the label with data.
We can use v-once to perform one-time interpolation, which can improve the server performance. Later, when the data changes, the content at the interpolation will not continue to be updated.
The usage of this case is the same as before. The effect is not easy to show, so I won't put the code.
1.2.4 bidirectional data binding
What is bidirectional data binding?
When the data changes, the view changes
When the view changes, the data changes synchronously
How do we implement two-way binding? This requires the instruction label v-model.
(1) v-model instruction
Usage scenario of bidirectional binding:
v-model is an instruction, which is limited to < input >, < Select >, < textarea >, and components.
Effect of execution:
We type VM. In the console MSG, you can see that the current value is Hello Vue.
Then we add the text Hello Java in the text box and print it on the console again.
It can be seen that the content of our binding changes at the same time, which proves that our two-way binding is successful.
(2) MVVM design idea
MVVM is short for model view ViewModel. It is essentially an improved version of MVC. MVVM abstracts the state and behavior of the view. Let's separate the view UI from the business logic. Of course, ViewModel has done these things for us. It can take out the data of the model and help deal with the business logic involved in the view due to the need to display content. Microsoft's WPF has brought new technology experience, such as Silverlight, audio, video, 3D, animation... Which leads to more detailed and customizable software UI layer. At the same time, at the technical level, WPF also brings new features such as Binding, Dependency Property, Routed Events, Command, DataTemplate, ControlTemplate and so on. The origin of MVVM (model view ViewModel) framework is a new architecture framework developed when MVP (Model View Presenter) mode is combined with WPF. It is based on the original MVP framework and integrates the new features of WPF to cope with the increasingly complex needs of customers.
M. What do V and VM stand for?
The data layer in Vue is placed in data
v view view
Vue view is our HTML page
The vm (view model) controller connects the data to the view layer
vm is an instance of Vue