主页 / 网络编程 /

vue中template的三种写法示例

网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了vue中template的三种写法示例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下

第一种(字符串模板写法):

直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,如果模板里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./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://.mobibrw./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./npm/vue@^2.0.0/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr./npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
  -->
  <script src="https://.mobibrw./wp-content/uploads/2020/06/vue@2.0.0.js"></script>
  <script src="https://.mobibrw./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>

第二种:

直接写在template标签里,这种写法跟写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./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://.mobibrw./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./npm/vue@^2.0.0/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr./npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
  -->
  <script src="https://.mobibrw./wp-content/uploads/2020/06/vue@2.0.0.js"></script>
  <script src="https://.mobibrw./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>

第三种:

写在script标签里,这种写法官方推荐,vue官方推荐script中type属性加上"x-template",即:

<!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./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://.mobibrw./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./npm/vue@^2.0.0/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr./npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
  -->
  <script src="https://.mobibrw./wp-content/uploads/2020/06/vue@2.0.0.js"></script>
  <script src="https://.mobibrw./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>

以上就是vue中template的三种写法示例的详细内容，更多关于vue template的资料请关注狼蚁SEO其它相关文章！

上一篇：node.js如何根据URL返回指定的图片详解 下一篇：Vue使用v-viewer实现图片预览

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by