Vue 响应式渲染 - 待办事项简单实现
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 待办事项简单实现
目录
待办事项简单实现
页面初始化
双向绑定的指令
增加留言列表设置
增加删除按钮
最后优化
总结
待办事项简单实现
页面初始化
对页面进行vue的引入、创建输入框和按钮及实例化Vue。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" />
<button>Add</button>
</div>
<script>
new Vue({
el: "#box", // element
})
</script>
</body>
</html>
双向绑定的指令
使用v-model对input元素进行双向绑定，并在按钮上设置点击事件。
V-model只能绑定在表单元素上。
示例如下：
<div id="box">
<input type="text" v-model="mytext"/>
<button @click="handelAdd()">Add</button>
</div>
<script>
new Vue({
el: "#box", // element
data:{
mytext:'今日任务'
},
methods:{
handelAdd() {
console.log('点击add按钮')
}
}
})
</script>
增加留言列表设置
设置ul元素用以渲染留言列表数据。
并在点击事件中对留言列表数据通过push方式增加。
示例如下：
<div id="box">
<input type="text" v-model="mytext"/>
<button @click="handelAdd()">Add</button>
<ul>
<li v-for="item in datalist">
{
{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#box", // element
data:{
mytext:'今日任务',
datalist:["第一件事", "第二件事", "第三件事"]
},
methods:{
handelAdd() {
console.log('点击add按钮')
this.datalist.push(this.mytext)
}
}
})
</script>
<div id="box">
<input type="text" v-model="mytext"/>
<button @click="handelAdd()">Add</button>
<ul>
<li v-for="item in datalist">
{
{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#box", // element
data:{
mytext:'今日任务',
datalist:["第一件事", "第二件事", "第三件事"]
},
methods:{
handelAdd() {
console.log('点击add按钮')
this.datalist.push(this.mytext)
}
}
})
</script>实现效果：
增加删除按钮
在原来基础上增加删除已完成的事件或留言功能。
示例如下：
<li v-for="item in datalist">
{
{item}}
<button>Del</button>
</li>按钮绑定删除事件
示例如下：
<li v-for="(item, index) in datalist">
{
{item}}
<button @click="handelDel(index)">Del</button>
</li>删除事件处理
示例如下：
handelDel(index) {
this.datalist.splice(index, 1)
}
最后优化
通过判断datalist显示和隐藏列表和提示。
示例如下：
<div id="box">
<input type="text" v-model="mytext"/>
<button @click="handelAdd()">Add</button>
<div v-show="!datalist.length">待办事项暂时没有了，快添加吧！</div>
<ul v-show="datalist.length">
<li v-for="(item, index) in datalist">
{
{item}}
<button @click="handelDel(index)">Del</button>
</li>
</ul>
</div>
<script>
new Vue({
el: "#box", // element
data:{
mytext:'今日任务',
datalist:["第一件事", "第二件事", "第三件事"]
},
methods:{
handelAdd() {
console.log('点击add按钮')
this.datalist.push(this.mytext)
// 置空mytext内容
this.mytext = ''
},
handelDel(index) {
this.datalist.splice(index, 1)
}
}
})
</script>最终效果：
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 待办事项简单实现