(五)Vue模板
2018-02-15 本文已影响0人
我拥抱着我的未来
本节知识点
- 模板的三种形式
模板的第一种形式
- 写在构造器里
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
message:"内部构造模板",
styleobj:{
fontSize:"26px",
color:"red"
}
},
template:`<p :style='styleobj'>{{message}}</p>`
})
</script>
</html>
这里要特别注意的就是template是``而不是单引号
- 写在template标签里的模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--第二种开始-->
<div id="app2">
</div>
<template id="div2">
<h2 style="color:red;">{{message}}</h2>
</template>
<!--第二种结束-->
</body>
<script>
var app2 = new Vue({
el:"#app2",
data:{
message:"第二次标签模板"
},
template:"#div2"
})
</script>
</html>
- 第三种利用script 标签里面的模板
这种写法可以让模板文件从外部引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--第三种开始-->
<div id="app3">
</div>
<script type="x-template" id="demo3">
<h2 style="color:red">{{message}}</h2>
</script>
<!--第三种结束-->
</body>
<script>
var app3 = new Vue({
el:"#app3",
data:{
message:"第三次标签模板"
},
template:"#demo3"
})
</script>
</html>
