template模板及三种写法
2018-07-16 本文已影响0人
新世界的冒险
一、直接写在选项里的模板
直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议这么写。
二、写在<template>标签里的模板
这种写法更像是在写HTML代码，就算不会写Vue的人，也可以制作页面。
三、写在<script>标签里的模板
这种写模板的方法，可以让模板文件从外部引入。
<!DOCTYPE html>
<html>
<head>
<title>Template 制作模版</title>
</head>
<body>
<div id="app">
<!-- 写在template标签里的模板 -->
<template id='muban2'>
<h2 style="color:blue">这是模板2</h2>
</template>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<!--写在<script>标签里的模板-->
<script type="T-template" id='muban3'>
<h2 style="color:green">这是模板3</h2>
</script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
message:'hello world'
},
//写在选项里的模板
/*template:`
<h2 style='color:red'>这是模板</h2>
`*/
//引用写在template里的模板
// template:'#muban2'
//引用写在<script>标签里的模板
template:'#muban3'
})
</script>
</body>
</html>
