vue2.0中的模板有三种写法,根据不同的需求运用不同的方法来实现
1.
<!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>vue2.0的模板</
title>
<
script
src=
"js/vue.js"></
script>
</
head>
<
body>
<
div
id=
"app">
</
div>
</
body>
<
script
type=
"text/javascript">
var app
=new
Vue({
el:
"#app",
data:{
},
template:
`
<h1 style="color:red">第一种写法</h1>
`
})
</
script>
</
html>
2.
<!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>vue2.0的模板</
title>
<
script
src=
"js/vue.js"></
script>
</
head>
<
body>
<
div
id=
"app">
</
div>
<
template
id=
"template">
<
h1>我是模板的第二种写法</
h1>
</
template>
</
body>
<
script
type=
"text/javascript">
var app
=new
Vue({
el:
"#app",
data:{
},
template:
"#template"
})
</
script>
</
html>
<
template>
<!-- 页面的内容 -->
</
template>
<
script>
/* 页面的js */
</
script>
<
style
scoped>
/* 页面的样式
注意:scoped的作用是style中所有的样式只对本页的html起作用
*/
</
style>
<!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>vue2.0的模板</
title>
<
script
src=
"js/vue.js"></
script>
</
head>
<
body>
<
div
id=
"app">
</
div>
</
body>
<
script
type=
"x-template"
id=
"template">
<h2>我是模板的第三种写法</h2>
</
script>
<
script
type=
"text/javascript">
var app
=new
Vue({
el:
"#app",
data:{
},
template:
"#template"
})
</
script>
</
html>