Front-end rendering
Front-end rendering is to fill data into HTML tags
Process: template + data -> front-end rendering -> HTML static content
Front-end rendering method
1. Native js splicing string
Method: Data is spliced to HTML tags in the form of strings.
Disadvantages: non-standard, unclear code, troublesome maintenance
2. Front-end template engine
Method: Based on art-template, the code is more standardized and standardized
Advantages: improved readability, convenient for later maintenance
Disadvantages: there is no special event mechanism, it needs to be combined with js
3. Use Vue's unique template syntax
- Interpolation expression
- instruction
- Event binding
- Property binding
- Style binding
- Branch loop structure
example
1. Native js splicing string
var info = document.getElementById('info');
info.innerHTML= '';
for ( var i=0; i < 10 ; i++)
{
tag = "<span>测试</span>"
var div = document.createElement('div');
div.innerHTML= tag;
info.appendChild(div);
}
2. Front-end template engine
<script id='abc' type='text/html'>
{{ if isadmin }}
<h1>{{title}}</h1>
<ul>
{{each list as value i }}
<li>索引：{{i+1}}:{{value}}</li>
{{/each}}
</ul>
</script>
Vue's interpolation expression
<div id='app'>
<!-- Interpolation expression, add v-cloak attribute to
div --> <div>{{msg}}</div>
<div>{{ 1+2 }}</ div>
<div>{{ msg +'---' +'Vue' }}</div>
</div>
Portal: 2021 latest test data & major factory positions
Blogger: test to make money (a test open code farmer who is not 996 but 996)
Motto: Focus on test development and automated operation and maintenance, work hard to read, think and write, and lay financial freedom for the life of the internal volume.
Content categories: technology improvement, workplace miscellaneous talk, career development, reading and writing, investment and financial management, healthy life.
csdn：https://blog.csdn.net/ccgshigao
Blog Park: https://www.cnblogs.com/qa-freeroad/
51cto ：https://blog.51cto.com/14900374
WeChat public account : test to make money (share exclusive content and resources regularly)
