Of Stack

Three Writing Examples of template in vue

  • 2021-08-31 07:19:11
  • OfStack

Type 1 (string template writing):

Write directly in vue constructor, which is intuitive and suitable for scenes with few html codes. However, if there are too many html codes in the template, it is not recommended to write like this. 


<!DOCTYPE html>
<html>
 <!--
  WARNING! Make sure that you match all Quasar related
  tags to the same version! (Below it's "@1.7.4")
 -->

 <head>
   <!--
   <link href="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
   -->
   <link href="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar@1.7.4.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
 </head>

 <body>
  <div id="q-app">

  </div>

  <!-- Add the following at the end of your body tag -->
  <!--
  <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
  -->
  <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js"></script>
  <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js"></script>
  
  <script>
   /*
    Example kicking off the UI. Obviously, adapt this to your specific needs.
    Assumes you have a <div id="q-app"></div> in your <body> above
    */
   new Vue({
    el: '#q-app',
    data: function () {
     return {
      version: Quasar.version
     }
    },
    template: `<div class="q-ma-md"> Running Quasar v{{ version }}</div>`
    // ...etc
   })
  </script>
 </body>
</html>

Type 2:

Write it directly in the template tag, which is very similar to writing html. 


<!DOCTYPE html>
<html>
 <!--
  WARNING! Make sure that you match all Quasar related
  tags to the same version! (Below it's "@1.7.4")
 -->

 <head>
   <!--
   <link href="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
   -->
   <link href="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar@1.7.4.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
 </head>

 <body>
  <div id="q-app">
    <template id='template1'>
     <div class="q-ma-md">
      Running Quasar v{{ version }}
     </div>
    </template>
  </div>

  <!-- Add the following at the end of your body tag -->
  <!--
  <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
  -->
  <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js"></script>
  <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js"></script>
  
  <script>
   /*
    Example kicking off the UI. Obviously, adapt this to your specific needs.
    Assumes you have a <div id="q-app"></div> in your <body> above
    */
   new Vue({
    el: '#q-app',
    data: function () {
     return {
      version: Quasar.version
     }
    },
    template: '#template1'
    // ...etc
   })
  </script>
 </body>
</html>

Type 3:

Written in the script tag, this writing is officially recommended, and vue officially recommends type attribute in script plus "x-template", that is: 


<!DOCTYPE html>
<html>
 <!--
  WARNING! Make sure that you match all Quasar related
  tags to the same version! (Below it's "@1.7.4")
 -->

 <head>
   <!--
   <link href="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
   -->
   <link href="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar@1.7.4.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
 </head>

 <body>
  <div id="q-app"></div>
	
	<script type="x-template" id="template1">
  	<div class="q-ma-md">
   	 Running Quasar v{{ version }}
  	</div>
  </script>

  <!-- Add the following at the end of your body tag -->
  <!--
  <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
  -->
  <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js"></script>
  <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js"></script>
  
  <script>
   /*
    Example kicking off the UI. Obviously, adapt this to your specific needs.
    Assumes you have a <div id="q-app"></div> in your <body> above
    */
   new Vue({
    el: '#q-app',
    data: function () {
     return {
      version: Quasar.version
     }
    },
    template: '#template1'
    // ...etc
   })
  </script>
 </body>
</html>

The above is vue template in the details of the three examples of writing, more about vue template information please pay attention to this site other related articles!

Related articles: