Vue全局API
template制作模板
template制作模板的三种方法
- 方法一：直接利用template标签，然后在vue构造器里面进行元素挂载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template模板</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue中template实例</h1>
<div id="app">
<template id="app2">
<h2 style="color:green">这是标签模板</h2>
</template>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello Vue!'
},
template:'#app2'
})
</script>
</body>
</html>
运行结果：
附加：在template标签制作模板后，得在vue构造器里面进行挂载，如：
template ：’#app2’
2. 方法二：在vue构造器里面利用template选项制作模板，注意这种方法虽然比较直观，若是html代码太多，则不推荐使用该方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template模板</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue中template实例</h1>
<div id="app">
<template id="app2">
<h2 style="color:green">这是标签模板</h2>
</template>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello Vue!'
},
template:`
<h2 style="color:red">这是利用template选项制作模板</h2>
`
})
</script>
</body>
</html>
运行结果：
- 方法三：利用script标签制作模板，然后在vue构造器里面进行元素挂载，这种方法可以让模板文件从外部引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template模板</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue中template实例</h1>
<div id="app"></div>
<script type="x-template" id="app3">
<h2 style="color:blue">这是利用script标签制作模板</h2>
</script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello Vue!'
},
template:'#app3'
})
</script>
</body>
</html>
运行结果：
附加：在script标签制作模板后，得在vue构造器里面进行挂载，如：
template ：’#app3’
在利用script标签制作模板时，注意type属性是x-template
