在vue中,我们会使用到Template模板,一共有四种方式,这里我们列举常用的三种
Vue实例化对象中使用template属性添加模板
代码中引入的vue.js为vue中文网的开发版本的vue.js,在html同目录下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<h2>Vue Template三种写法</h2>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
message: 'beline'
},
template:`
<h2 style="color:red">我是选项模板</h2>
`
})
</script>
</body>
</html>
在标签中建立模板
在html中加入template标签,给于这个template标签一个id,然后通过实例化的Vue对象的template属性挂载template模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<h2>Vue Template三种写法</h2>
<div id="app">
{{message}}
</div>
<template id='template1'>
<h2 style="color:blue">这里是标签template模板</h2>
</template>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
message: 'beline'
},
template: "#template1"
})
</script>
</body>
</html>
script标签模板
通过使用<script type="x-template" id="template2"> 同时把script标签的id挂载到Vue实例化对象的template中
这种模板的好处是可以通过script的特性,通过src外部引入来使用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<h2>Vue Template三种写法</h2>
<div id="app">
{{message}}
</div>
<script type="x-template" id="template2">
<h2 style="color:blue">这里是标签script模板</h2>
</script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
message: 'beline'
},
template: "#template2"
})
</script>
</body>
</html>
