html5 任务列表,Vue.js实现列表清单的操作方法

一、Vue.js简要说明

Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与前端框架Angular一样， Vue.js在设计上采用MVVM模式，当View视图层发生变化时，会自动更新到ViewModel.反之亦然，View与ViewModel之间通过数据双向绑定(data-binding)建立联系，如下图所示

Vue.js通过MVVM模式将视图与数据分成两部分(或者说视图代码与业务逻辑的解耦)，因此我们只需关心数据的操作，DOM的视图的更新等一系列事情，Vue会帮我们自动搞定。

如通过v-model指令实现数据的双向绑定，用户在输入框中输入任意的值，实时显示用户输入message的值(对应上述MVVM模式关系图不难理解)

Vue.js数据的双向绑定

Message is: {{ message }}

new Vue({ //创建Vue实例

el:"#app", //挂载创建Vue实例对象

data: {

message : "Hello Vue.js"

},

methods:{}

})

以下楼主直接绕过Vue.js基础语法，对基础语法不了解的可以查阅相关资料，从通过Vue.js优雅实现任务列表操作案例说起，将Vue.js碎片化的知识点模块整合在一块。

接下来一块体验一下Vue.js(读音 /vjuː/，类似于 view) 的小清新的/简洁的写法吧.

二、Vue.js优雅的实现任务列表的操作

Vue.js 优雅实现任务列表效果图预览请点击

三、HTML骨架CSS样式代码

使用BootStrap前端响应式开发框架，HTML骨架及CSS样式Demo如下

Vue.js

.list-group button {

background: none;

border: 0;

color: red;

outline: 0;

float: right;

font-weight: bold;

margin-left: 5px;

}

任务列表

• Vue.js - 是一套构建用户界面的渐进式框架

  ✗

  ✔

任务描述

添加任务

已完成的Task

1. JavaScript高级程序设计

四、实例化Vue及应用Vue指令Directives添加项目中

任务列表 ({{remainTask.length}})

• {{task.text}}

  ✗

  ✔

任务描述

添加任务

已完成的Task({{filterTask.length}})

1. {{task.text}}

var app = new Vue({ //创建Vue对象实例

el:"#app", //挂载DOM元素的ID

data: {

tasks : [

{ text : "Vue.js - 是一套构建用户界面的渐进式框架", complete:false},

{ text : "Bootstrap 响应式布局", complete:false },

{ text : "Webpack前端资源模块化管理和打包工具", complete:false},

{ text : "Yarn 中文手册Yarn 是一个快速、可靠、安全的依赖管理工具", complete:true},

{ text : "JavaScript语言精粹", complete:false},

{ text : "JavaScript高级程序设计", complete:true}

],

newTask:"程序员的修炼之道" //默认值

},

methods:{

addTask:function(event){ //添加任务

event.preventDefault();

this.tasks.push({

text: this.newTask,

complete: false

});

this.newTask = "";

},

editTask:function(task){ //编辑任务

//移除当前点击task

this.removeTask(task);

//更新vue实例中newTask值

this.newTask = task.text;

},

removeTask: function(task){ //删除任务

//指向Vue实例中的tasks

_tasks = this.tasks;

//remove

_tasks.forEach(function(item, index){

if(item.text == task.text){

_tasks.splice(index, 1);

}

})

},

completeTask: function(task){ //任务完成状态

task.complete = true; //设置任务完成的状态

}

},

//用于计算属性，属性的计算是基于它的依赖缓存(如vue实例中的tasks)

//只有当tasks数据变化时,才会重新取值

computed:{

remainTask:function(){ //筛选未完成的记录

return this.tasks.filter(function(task){ //filter过滤器

return !task.complete;

})

},

filterTask:function(){ //筛选已完成的记录

return this.tasks.filter(function(task){

return task.complete;

})

}

}

});

v-cloak 主要解决页面初始化慢，乱码的问题(如显示页面显示Vue取值表达式)；

v-show 指令简单的CSS属性的切换，适合频繁的切换 CSS属性从display的切换)

v-if 指令决定页面是否插入，相对v-show切换开销比较大

v-on:dblclick, v-on:click 页面事件的绑定

(如 v-on:dblclick(task) 方法名dblclick() 参数task 是的当前点击的tasks数组中的某一个对象

v-for 迭代指令 循环遍历数组 filter 主要用于筛选符合条件的数据/日期格式化等

computed用于计算属性，属性的计算是基于它的依赖缓存(如vue实例中的tasks) 只有当tasks数据变化时,才会重新取值

PS:下面看下使用Vue.js实现列表选中效果

html

v-for="gameName in gameNames"

:class="{active: activeName == gameName}"

@click="selected(gameName)">{{gameName}}

JS

new Vue({

el: "#app",

data: {

gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄',

'守望先锋'

],

activeName: ''

},

methods: {

selected: function(gameName) {

this.activeName = gameName

}

}

})

总结

以上所述是小编给大家介绍的Vue.js实现列表清单的操作，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！