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>'

 

　　

 

 

 

转载于:https://www.cnblogs.com/blogcxz/p/7341982.html