正文
vue模板的几种写法及变化
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
第一种： 2+版本支持，1+版本支持
<script>
<template id="aaa">
<h1>我是组件2</h1>
</template> Vue.component('my-aaa',{
template:'#aaa'
});
window.onload=function(){
var vm = new Vue({
el:"#box",
data:{
msg:"welcome to 2.0"
}
})
}
</script>
第二种：2+版本支持，1+版本支持
<script>
Vue.component('my-aaa',{
template:'<h1>我是组件2</h1>'
});
window.onload=function(){
var vm = new Vue({
el:"#box",
data:{
msg:"welcome to 2.0"
}
})
}
</script>
第三种：1+支持，2+不支持
<script>
var Aaa = Vue.extend('aaa',{
template:'<h1>这是组件</h1>'
});
Vue.component('my-aaa',Aaa);
Vue.component('my-aaa',{
template:'#aaa'
}); window.onload=function(){
var vm = new Vue({
el:"#box",
data:{
msg:"welcome to 2.0"
}
})
}
</script>
第四种：2.0特有
<template id="aaa">
<h1>我是组件2</h1>
</template>
<script>
var temp = {
template:'#aaa'
}
Vue.component('my-aaa',temp);
window.onload=function(){
var vm = new Vue({
el:"#box",
data:{
msg:"welcome to 2.0"
}
})
}
</script>
第五种：
局部组件就不比说了，都支持
模板写法的变化
2+版本模板必须有根元素
1+版本： 这样写不报错
Vue.component('my-aaa',{
template:'<h1>我是组件2</h1><p>我是p标签</p>'
});
window.onload=function(){
var vm = new Vue({
el:"#box",
data:{
msg:"welcome to 2.0"
}
})
}
2+版本这样写报错,2+版本必须有根元素
不报错只能这样写：
template:'<div>
<h1>我是组件2</h1>
<p>我是p标签</p>
</div>'
