vue获取当前选中行的数据_ToDoMVC案例-基于vue简单版本（记录自己）

没有请求，没有接口，纯粹的vue案例（可以参考官网 http://todomvc.com/）

业务说明：

（1）数据列表显示：先在vue实例中把todoList数组写死，

data:{

todoList:[

{id:1,title:'吃饭',completed:false},

{id:2,title:'睡觉',completed:true},

{id:3,title:'打代码',completed:false},

{id:4,title:'去约会',completed:true},

]

},

在li上面v-for=”item in todoList”,显示出来item.title。

//li 有三种样式（这些都是模板中自带的），complated已完成，editing编辑中，空 未完成

<li class="complated" v-for="item in todoList">

li class="editing" v-for="item in todoList">

li v-for="item in todoList">

以上是写死的情况：

<li :class="{ completed:item.completed }" v-for="item in todoList">

根据todoList中的completed的true或者false情况

这个小圆圈也是，根据todoList中的completed的true或者false情况看是否画上对勾。<input class="toggle" type="checkbox" v-model="item.completed">

这时候因为v-model的双向数据绑定，在操作前面的对勾的时候，后面字的样式也在改变，就是是否完成的那个样式

（2）添加任务：

① 注册按键回车事件 ② 在事件处理函数中拿到文本框的数据，添加到数组中，清空文本框

①可以添加keydown事件

<input

class="new-todo"

placeholder="What needs to be done?"

autofocus

@keydown='handleAdd'>

输出keyCode码

handleAdd(e){

console.log(e.keyCode)

}

然后发现enter的keycode是13，可以

<input

class="new-todo"

placeholder="What needs to be done?"

autofocus

@keydown.13='handleAdd'>

或者直接

<input

class="new-todo"

placeholder="What needs to be done?"

autofocus

@keydown.enter='handleAdd'>

只有当自动判断keycode是13或者是enter时候，才会触发handleAdd方法

以上的.enter .space .13 .esc 是按键修饰符，参考

②

handleAdd(e){

// console.log(e.keyCode)

// 拿到文本框数据

// console.log(e.target.value)

const text = e.target.value.trim() // trim()是去除首尾的空格的

// 非空判断

if(text == 0){

return

}

// 添加到数组中

this.todoList.push({

id:Math.random(),

title:text,

completed:false

})

// 清空文本框

e.target.value = ''

}

（3）当任务项没有数据的时候给隐藏掉下列。

需要隐藏掉的是里边的section和footer，在这两部分外边设置一个template,用v-if

<template v-if= "todoList.length !== 0">

</template>

数组中的数据不为空才显示出来，否则不显示。

（4）删除单个任务项

就是删除数组中的一组数据，splice()方法

<li :class="{ completed:item.completed }" v-for="(item,index) in todoList">

<button class="destroy" @click='handleDelete(index)'></button>

handleDelete(index){

this.todoList.splice(index,1)

}

（5）当没有任务已完成，右下角清除已完成项按钮不显示，有已完成项就显示出来，点击的时候删除所有已完成项。

显示与否：非事件绑定函数（非v-on），必须调用，如果不调用就仅仅把函数当做数据来使用。

<button class="clear-completed" v-show="hasOneCompleted()">Clear completed</button>

hasOneCompleted(){

// 让清除已完成项按钮显示与否

let has = false

for(let i = 0;i<this.todoList.length;i++){

if(this.todoList[i].completed === true){

has = true

break

}

}

return has

}

点击删除所有已完成项：找到已完成项，执行删除操作

handleDeleteAllCompleted(){

for(let j = 0;j<this.todoList.length;j++){

if(this.todoList[j].completed === true){

this.todoList.splice(j,1)

j--

}

}

}

（6）显示剩余多少项未完成（左下角按钮）

<span class="todo-count"><strong>{{ getAllUnCompleted() }}</strong> item left</span>

getAllUnCompleted(){

let i = 0

for(let k = 0;k<this.todoList.length;k++){

if(this.todoList[k].completed === false){

i++

}

}

return i

}

（7）全选

上面箭头选中就全选，取消就全部取消

监听上面箭头所在的input，原生的代码有个onchange事件，所以，在这里

<input

id="toggle-all"

class="toggle-all"

type="checkbox"

@change="handleAllChange"

>

箭头的状态一改变，就能监听到，然后写方法

handleAllChange(e){

// console.dir(e.target)

const { todoList } = this

// 相当于 const todoList = this.todoList

// 获取全选按钮的选中状态

const checked = e.target.checked

// 遍历所有任务项，让每个任务项的完成状态=全选按钮的选中状态

todoList.forEach(item => {

item.completed = checked

})

}

（8）设置全选按钮的选中状态

当下列各选项全部被选中时候，上面箭头也变成选中状态，下面没有全部被选中，上面箭头也没有被选中

<input

id="toggle-all"

class="toggle-all"

type="checkbox"

@change="handleAllChange"

:checked="getCheckAllState()"

>

getCheckAllState(e){

// 如果有一个未选中状态，就未选中

const { todoList } = this

for(let k = 0;k<this.todoList.length;k++){

if(this.todoList[k].completed === false){

return false

}

return true

}

}

（9）双击任务项获得编辑状态

<li :class="{ completed:item.completed,editing:currentEdit == item }" v-for="(item,index) in todoList">

判断editing状态是true/false

在data里添加

currentEdit:null //存储当前点击的任务项

在li的label注册双击事件，dblclick,把item赋值给当前点击的任务项

当事件处理函数代码足够简单的时候，可以将代码写到注册事件的地方。注意：模板中操作数据不需要加this，哪怕是你的事件处理函数。

<label @dblclick="currentEdit = item">{{ item.title }}</label>

（10）实现编辑功能

<input

class="edit"

v-model="item.title"

@keydown.enter="currentEdit = null"

>

通过v-model 使得页面上显示出来每一个列表项的内容，

当按下enter键时候，取消编辑状态

（11）还有一些功能没有做，比如①数据过滤，就是下边中间的button，all是显示所有任务项，active显示未完成的，completed显示出来已经完成的。②持久化存储，可以参考 官网（http://todomvc.com/）

（12）小优化。使用v-clock解决表达式闪烁的问题。

就是比如一个datas的数组，里边有title的属性。在页面上显示出来title的值的时候，会闪烁出来todos[0].title这个值，这就是表达式。

浏览器从上到下依次解析执行，当遇到{{ todos[0].title }}怎么处理？浏览器肯定不认识这个东西，然后就当做普通文本去输出了，直到vue.js加载完成,

找到入口， 编译解析替换模板中的内容，你才看到了最终的结果。---》如果想解决这个表达式闪烁的问题，使用v-cloak指令。

-->在根节点写上一个v-cloak

-->然后在style里写

---》这是因为，浏览器从上到下依次解析，v-cloak属性，被css定义了一个样式规则，display：none，当vue对这个模板解析替换完成之后，会自动把v-cloak这个指令属性给移除

完成简易版todoMVC。。。