个人中心
gpt4 book ai didi

vue中template的三种写法示例

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue中template的三种写法示例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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 >

第二种

直接写在template标签里,这种写法跟写html很像.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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 >

第三种

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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 >

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

原文链接：https://www.mobibrw.com/2020/25356 。

最后此篇关于vue中template的三种写法示例的文章就讲到这里了,如果你想了解更多关于vue中template的三种写法示例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： MongoDB的备份与恢复
文章推荐： python将字符串转换成json的方法小结
文章推荐： MongoDB 内存管理相关总结
文章推荐： Python绘制堆叠柱状图的实例