(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