A Preliminary Study of Vue's Self-study Road 3-vue Template

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


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;



2. Front-end template engine

<script id='abc' type='text/html'>

  {{ if isadmin }}



  {{each list as value i }}





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> 

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.


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)

Guess you like

Origin blog.51cto.com/14900374/2680028