(Vue)创造组件官方教学实作

首先创造元件

Vue.component('MyName',{
    template:'<li>自行定义</li>'
})

加入刚刚新增(MyName)的元件

<ul>
<MyName></MyName> 
</ul>

若想在元件里加入动态，就要利用VUE的props属性来进行动态变化

Vue.component('MyName',{
    props:['todo'],
    template:'<li>{{todo.text}}</li>',
})

并且使用v-bind将data绑入元件当中

<div id="app">
    <ul>
        <MyName v-for="item in number" v-bind:todo="item"></MyName>
    </ul>
</div>

Vue.component('MyName',{
    props:['todo'],
    template:'<li>{{todo.text}}</li>',
})
var app = new Vue({
    el:'app',
    data:{
        number:[
            {text:'数字1'},
            {text:'数字2'},
            {text:'数字3'},
        ]
    },
})

这段程序码利用 v-for偏历number这个array，并将提出的元素v-bind给todo这个自定义属性中。

效果
1.数字1
2.数字2
3.数字3