一、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模式关系图不难理解）
<!doctype html> <html> <head> <title>vue.js数据的双向绑定</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://unpkg.com/vue"></script> </head> <body> <p class="container" id="app"> <input v-model="message" placeholder="请任意输入" class="form-control"> <p>message is: {{ message }}</p> </p> <script type="text/javascript"> new vue({ //创建vue实例 el:#app, //挂载创建vue实例对象 data: { message : hello vue.js }, methods:{} }) </script> </body> </html>
以下楼主直接绕过vue.js基础语法，对基础语法不了解的可以查阅相关资料，从通过vue.js优雅实现任务列表操作案例说起，将vue.js碎片化的知识点模块整合在一块。
接下来一块体验一下vue.js(读音 /vjuː/，类似于 view) 的小清新的/简洁的写法吧.
二、vue.js优雅的实现任务列表的操作
vue.js 优雅实现任务列表效果图预览请点击
三、html骨架css样式代码
使用bootstrap前端响应式开发框架，html骨架及css样式demo如下
<!doctype html> <html> <head> <title>vue.js</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入 vue.js --> <script src="https://unpkg.com/vue"></script> <style type="text/css"> .list-group button { background: none; border: 0; color: red; outline: 0; float: right; font-weight: bold; margin-left: 5px; } </style> </head> <body> <p class="container" id="app"> <p v-show="remaintask.length>0>任务列表</p> <ul class="list-group"> <li class="list-group-item"> <span title="编辑任务">vue.js - 是一套构建用户界面的渐进式框架</span> <button title="移除任务">✗</button> <button title="任务完成">✔</button> </li> </ul> <form> <p class="form-group"> <label for="exampleinputemail1">任务描述</label> <input type="text" class="form-control" placeholder="请输入你要添加的任务" required> </p> <p class="form-group"> <button class="btn btn-primary" type="submit">添加任务</button> </p> </form> <p>已完成的task</p> <ol class="list-group"> <li class="list-group-item"> javascript高级程序设计 </li> </ol> </p> </body> </html>
四、实例化vue及应用vue指令directives添加项目中
<p class="container" id="app" v-cloak> <p v-show="remaintask.length>0>任务列表 ({{remaintask.length}})</p> <ul class="list-group"> <template v-for="task in remaintask"> <li class="list-group-item"> <span v-on:dblclick="edittask(task)" title="编辑任务">{{task.text}}</span> <button v-on:click="removetask(task)" title="移除任务">✗</button> <button v-on:click="completetask(task)" title="任务完成">✔</button> </li> </template> </ul> <form> <p class="form-group"> <label for="exampleinputemail1">任务描述</label> <input type="text" class="form-control" placeholder="请输入你要添加的任务" v-model="newtask" required> </p> <p class="form-group"> <button class="btn btn-primary" type="submit" v-on:click="addtask">添加任务</button> </p> </form> <p>已完成的task({{filtertask.length}})</p> <ol class="list-group"> <template v-for="task in filtertask"> <li class="list-group-item"> {{task.text}} </li> </template> </ol> </p> <script type="text/javascript"> 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; }) } } }); </script>
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
<p id="app"> <p class="collection"> <a href="#!" class="collection-item" v-for="gamename in gamenames" :class="{active: activename == gamename}" @click="selected(gamename)">{{gamename}}</a> </p> </p>
js
new vue({ el: #app, data: { gamenames: ['魔兽世界', '暗黑破坏神ⅲ', '星际争霸ⅱ', '炉石传说', '风暴英雄', '守望先锋' ], activename: '' }, methods: { selected: function(gamename) { this.activename = gamename } } })
大家学完本文都掌握了vue.js实现列表清单的操作方法了吗？赶紧动手尝试一下吧。
相关推荐：
html中布局标记与列表标记的图文详解
自定义列表项 list-style 使用小结
javascript如何实现select列表内容自动滚动方法介绍
以上就是详解vue.js如何实现列表清单的详细内容。