VueJS----[全局API-2.5]---Template模板

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010996565/article/details/82056699

Template模板

1. 直接写在选项里的模板

直接在构造器里的template选项后编写。这种写法比较直观,但是如果模板html代码比较多,不建议这么些写

<div id="app">
        {{message}}
    </div>
var app = new Vue({
     el:'#app',
     data:{
         message:'hello world'
     },
     template:`
         <h2 style='color:red'>我是选项模板</h2>
      `
   })

2. 写在标签里的模板

这种写法更像是在写html代码

<template id="dd2">
            <h2 style='color:red'>我是template标签模板</h2>
    </template>
var app = new Vue({
      el:'#app',
      data:{
          message:'hello world'
      }
      template:'#dd2'
})

3. 写在script中的模板

这种写法可以让模板文件从外部引用

<script type="x-template" id="dd3">
            <h2 style='color:red'>我是Script标签模板</h2>
</script>
var app = new Vue({
    el:'#app',
    data:{
        message:'hello world'
    }
    template:'#dd3'
 })

猜你喜欢

转载自blog.csdn.net/u010996565/article/details/82056699