1、简单的todoList()
实现输入框输入值显示在下方,每添加一次,清空输入框。
<div id="root">
<input v-model="inputValue"/>
<button @click="handleClick">change</button>
<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>
2、组件
组件:页面上的某一部分,
把li标签作为一个组件,先定义一个组件
<ul>
<todo-item > </todo-item>
</ul>
在js中,定义一个全局组件,
//全局组件
Vue.component('todo-item',{
props:['content'],
template:'<li>item</li>'
})
界面显示一个li标签内容
image.png
我们依旧想每次在input框中输入内容后点击按钮,添加一个li标签显示输入的内容,那么组件中也循环添加list;其中循环时我们调用这个模版时候,通过属性的方式传参,定义一个content属性,值为循环每一项的内容(item)
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
>
</todo-item>
</ul>
此时,在模版中直接写{{content}}是不行的,组件必须接收这个属性,因此需要定义一个props的属性,值为数组,可以将content写在这里,就可以应用了,代码如下:
//全局组件
Vue.component('todo-item',{
props:['content'],
template:'<li>item</li>'
})
以上是全局组件,我们也可以定义局部组件,vue中需要定义components,就是应用局部组件了
//局部组件
var todoItem = {
props:['content'],
template:'<li>{{content]}}</li>'
}
new Vue({
el:"#root",
components:{
'todo-item':todoItem
},
data:{
inputValue: '',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue) ;
this.inputValue = ''
}
}
})
全局组件和局部组件的完整代码如下,以供参考:
<div id="root">
<input v-model="inputValue"/>
<button @click="handleClick">change</button>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
>
</todo-item>
</ul>
</div>
<script>
//全局组件
Vue.component('todo-item',{
props:['content'],
template:'<li>item</li>'
})
//局部组件
var todoItem = {
props:['content'],
template:'<li>{{content}}</li>'
}
new Vue({
el:"#root",
components:{
'todo-item':todoItem
},
data:{
inputValue: '',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue) ;
this.inputValue = ''
}
}
})
</script>
组件也是一个实例,在组件中也可以添加methods,data等
//局部组件
var todoItem = {
props:['content'],
template:'<li @click="clickhere">{{content}}</li>',
methods:{
clickhere:function(){
alert()
}
}
}
实现tudoList删除功能(父子组件相互传值)
功能实现:input添加的li标签,点击后删除该项。
在子组件模版中添加点击事件,子组件数据删除,是需要将父组件中list对应的一项删除,因此点击时候需要子组件与父组件通信:发布订阅模式,不要忘了子组件需要接受点击项的下表 (index),在props里记得添加上index,模版中也记得加上参数;
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
通知父组件把需要的项删掉:this.$emit方法,出发delete事件,并吧index传递出去,父组件中需监听并出发父组件的方法,添加@delete="handleDelete"
则需添加
//局部组件
var todoItem = {
props:['content','index'],
template:'<li >{{content}}</li>',
methods:{
clickhere:function(){
this.$emit('delete',this.index)
}
}
}
之后在父组件中,添加上handleDelete方法,获取index参数值,并应用splice将对应项删除,完成
完整代码:
<div id="root">
<input v-model="inputValue"/>
<button @click="handleClick">change</button>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
//局部组件
var todoItem = {
props:['content','index'],
template:'<li @click="clickhere">{{content}}</li>',
methods:{
clickhere:function(){
this.$emit('delete',this.index)
}
}
}
new Vue({
el:"#root",
components:{
'todo-item':todoItem
},
data:{
inputValue: '',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue) ;
this.inputValue = ''
},
handleDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
网友评论