vue模板的幾種寫法及變化

會飛的Tiger發表於2017-08-11
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>'

 

　　

 
 
 

相關文章