介绍
基础知识
数据绑定
v-bind&v-model&:value
v-bind:绑定属性和数据。可以理解为是单向数据绑定。
v-model:用在表单控件上,如果你用在除了表单控件以外的标签是没有任何效果的。
:value:通常用于日期的绑定。
组件思想
步骤一:创建一个 Vue 的实例
var s = new Vue({
el: '#app',
data: {
arrays: [{
id: 0,
name: "guo"
},
{
id: 1,
name: "sun"
}]
},
components: {
"test": myComponent
}
})
步骤二:创建一个组件的实例
var myComponent = Vue.extend({
props: ['todo'],
template: '<h3>{{todo.name}}</h3>'
});
步骤三:注册组件
components: {
"test": myComponent
}
步骤四:使用组件
<h1 is="test" v-for="array in arrays" v-bind:todo="array">
</h1>