vue.js实现todolist
在学习vue之前,先跟着视频实现了一个todolist,对vue这个框架有了初步的认识。
- 引入vue.js文件,具体vue的安装参考官方文档。
- 然后实现一个简单的todolist:
当点击提交时,我们提交的任务项会显示在下方:
具体实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script src="../../imoocmall1/node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/> /*实现了数据的双向绑定,输入框的值发生变化,data中的inputValue也同步变化,返回亦然*/
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue:'hello',
list:[]
},
methods:{
handleSubmit:function () {
/*显示单个输入this.list=this.inputValue*/
this.list.push(this.inputValue)
this.inputValue='' /*加入到list里后清除input框里的内容*/
}
}
})
</script>
</body>
</html>
- 使用组件化的概念修改todolist
组件 (Component) 是 Vue.js 最强大的功能之一。可以封装重用的代码,方便对开发过程当中各种功能模块的划分。而vue中组件又分为两种,分别是全局组件和局部组件,下面我们来看如何定义这两种组件。
- 全局组件
<body>
<div id="root">
<div>
<input v-model="inputValue">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{ /*注册了全局组件todo-item*/
template:'<li>item</li>'
}),
new Vue({
el:"#root",
data:{
inputValue:"hello",
list:[]
},
methods:{
handleSubmit:function () {
this.list.push(this.inputValue)
this.inputValue=""
}
}
})
</script>
</body>
- 局部组件
<body>
<div id="root">
<div>
<input v-model="inputValue">
<button @click="handleSubmit">submit</button>
</div>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
/*定义局部组件*/
var Todoitem={
template:'<li>item</li>'
}
new Vue({
el:"#root",
components:{
'todo-item':Todoitem
},
data:{
inputValue:"hello",
list:[]
},
methods:{
handleSubmit:function () {
this.list.push(this.inputValue),
this.inputValue=""
}
}
})
</script>
</body>
- todolist组件拆分
了解了组件的定义后,就可以对我们一开始做的todolist进行组件拆分了。具体代码如下:
<body>
<div id="root">
<div>
<input v-model="inputValue">
<button @click="handleSubmit">submit</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
> <!--父组件给子组件传值是通过属性的形式-->
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content'], /*组件接收属性content的值*/
template:'<li>{{content}}</li>'
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function () {
this.list.push(this.inputValue)
this.inputValue=""
}
}
})
</script>
</body>
使用组件拆分的概念后,也实现了相同的效果。这里涉及到了父组件给子组件传值是通过属性(eg., content)来传的,而子组件给父组件传值通过事件来传,具体还是用todolist来实现子组件给父组件传值,我们主要实现当点击生成的待办事项后,点击事件,会删除当前事件。代码如下:
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue">
<button @click="handleSubmit">submit</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"> <!--父组件监听到子组件发布的删除指令后,触发一个handleDelete函数-->
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}{{index}}</li>',
methods:{
handleClick:function () {
/*只要点击list的内容,子组件就向外发布一个事件,通知父组件执行删除操作,父组件要对这个动作监听*/
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:{
handleSubmit:function () {
this.list.push(this.inputValue)
this.inputValue=""
},
handleDelete:function (index) {
this.list.splice(index,1)
}
}
})
</script>
</body>
通过这一个例子,对vue的核心,基本用法就有了一个大致的了解,更核心的知识还是需要多看官方文档。