一、todolist功能开发
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function() {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>该函数所实现的功能：输入框内输入值，自动显示到框下面来，并且清空输入框。
二、TodoList中组件的拆分
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"//传递参数到组件
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
//外层向组件里面传递了content但是不能直接使用
props:['content'],//定义一个属性去接收(可以为一个数组 )
template:'<li>{{content}}</li>'
})
// var TodoItem = {
// template:'<li>item</li>'
// }
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function() {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>第一种形式定义的组件叫全局组件，可以直接调用。
第二种方法定义的组件叫局部组件，想要在其他的vue实例中使用，必须用components里面对局部组件进行注册。
三、组件与实例的关系
每一个vue组件又是一个vue实例。
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
//外层向组件里面传递了content但是不能直接使用
props:['content'],//定义一个属性去接收(可以为一个数组 )
template:'<li @click="handlefun">{{content}}</li>',
methods:{
handlefun:function(){
alert('clicked')
}
}
})
// var TodoItem = {
// template:'<li>item</li>'
// }
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function() {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>每一个组件里面包括props、template、data、methods。
每一个实例里面包括
template不定义，会把挂载点里面的所有dom标签作为template。
四、TodoList的删除功能
1、父组件向子组件传递值，是通过属性来传递的。
比如上边代码中，下边大的vue实例为父组件，todo-item为子组件，通过content属性来传递
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handlefun">{{content}}</li>',
methods:{
handlefun:function(){
this.$emit('delete',this.index)//子组件应用$emit通知父组件,实现delete事件(携带index参数)
}
}
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
//子组件发布delete事件，父组件监听，如果监听到就执行handleDelete函数。
handleDelete:function(inddd){
// alert(inddd)
this.list.splice(inddd,1)
}
}
})
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
