Vue.js优雅的实现列表清单

一、Vue.js简要说明

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

Vue.js优雅的实现列表清单

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

Vue.js优雅的实现列表清单

如通过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>

    <div class="container" id="app">

        <input v-model="message" placeholder="请任意输入" class="form-control">

        <p>Message is: {{ message }}</p>

    </div>

    <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 优雅实现任务列表效果图预览，在线体验预览效果请点击 Vue edit

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: ;

             color: red;

             outline: ;

             float: right;

             font-weight: bold;

             margin-left: 5px;

         }

     </style>

 </head>

 <body>

     <div 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>

             <div class="form-group">

               <label for="exampleInputEmail1">任务描述</label>

               <input type="text" class="form-control" placeholder="请输入你要添加的任务" required>

             </div>

             <div class="form-group">

                 <button class="btn btn-primary" type="submit">添加任务</button>

             </div>

         </form>

         <p>已完成的Task</p>

         <ol class="list-group">

             <li class="list-group-item">

                JavaScript高级程序设计

             </li>

         </ol>

     </div>

 </body>

 </html>

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

     <div 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>

             <div class="form-group">

               <label for="exampleInputEmail1">任务描述</label>

               <input type="text" class="form-control" placeholder="请输入你要添加的任务" v-model="newTask" required>

             </div>

             <div class="form-group">

                 <button class="btn btn-primary" type="submit" v-on:click="addTask">添加任务</button>

             </div>

         </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>

     </div>

     <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, );

                         }

                     })

                 },

                 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-on:click可简化成@click 如

<button v-on:click="removeTask(task)"></button>  等价于 <==>

<button @click="removeTask(task)"></button>

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

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

通过小项目实践，相信对Vue基础知识有大致的认识

由于篇幅所限，细节说得不是很清楚，下一节楼主将写一篇案例中用到知识细致入微的内容欢迎关注......

原文章链接 http://www.cnblogs.com/zjf-1992/p/7841156.html

Vue.js优雅的实现列表清单的更多相关文章

Vue&period;js优雅的实现列表清单的操作
一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当Vie ...
vue&period;js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解一.总结一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
浅析Vue&period;js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
优雅的vue&period;js
优雅的vue.js代码 https://www.cnblogs.com/zhengrunlin/p/9164951.html watch 与 computed 的巧妙结合如上图,一个简单的列表页面. ...
关于vue&period;js中列表渲染练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
Vue&period;js学习 Item7 -- 条件渲染与列表渲染
v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块:  {{#if ok}} <h1>Yes</h1 ...
使用Vue&period;js实现列表选中效果
实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示.熟悉JQuery的同学说这个太简单了.可以给这个选中的element设置一个active的class.配合Css样式,让ac ...
Vue&period;js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
Vue&period;js的库，包，资源的列表大全。
官方资源外部资源社区播客官方示例入门开发工具语法高亮代码片段自动补全组件集合库和插件路由 ajax/数据状态管理校验 UI组件 i18n 示例模板脚手架整合插件/指 ...

随机推荐

谈谈我眼中的CSDN吧
昨天逛博客园看到了这篇曝光率很高的文章:博客搬家——从CSDN到博客园,一篇短短的文章竟然招致这么多人的讨论,可能程序员就喜欢“Java好还是PHP好”这类型的问题吧,好无聊.由于我一直在使用CSDN ...
插入备份数据报 IDENTITY&lowbar;INSERT 为 ON 时解决方法
SQL Server 2008 R2 x64 下事情是这样的, 使用Navcate的数据导出备份工具导出表的记录 INSERT INTO [xxx_users] VALUES (1, 'tom ', ...
读取XML的问题
利用SAX读取写了代码,调试了一下午却一直在parse里抛异常.尼玛,Java的库函数还真心不怎么好用. 把代码贴上来先: package com.example.gulanfinddemo; imp ...
BZOJ1584 [Usaco2009 Mar]Cleaning Up 打扫卫生
令$f[i]$表示以i为结尾的答案最小值,则$f[i] = min \{f[j] + cnt[j + 1][i]^2\}_{1 \leq j < i}$,其中$cnt[j + 1][i]$表示$ ...
GUID
前言全局唯一标识符,简称GUID(发音为 /ˈɡuːɪd/或/ˈɡwɪd/),是一种由算法生成的唯一标识,通常表示成32个16进制数字(0-9,A-F)组成的字符串,如:{21EC2020-3AEA ...
jdk1&period;7 JDBC连接SQL Server2008
路由器网:http://www.ming4.com/news/2355.html Jackie的博客:http://blog.163.com/jackie_howe/blog/static/19949 ...
老李分享：Python开发性能测试脚本
老李分享:Python开发性能测试脚本测试开发工程师的工作主要是根据测试目标来完成,帮助测试人员完成测试目标,测试的业务需求是测试人员提出,但是由于环境的制约,手中没有性能测试工具的时候,性能测 ...
[转载]前端构建工具gulpjs的使用介绍及技巧
转载地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...
Codeforces Round &num;449 (Div&period; 2)-897A&period;Scarborough Fair(字符替换水题) 897B&period;Chtholly&&num;39&semi;s request(处理前一半) 897C&period;Nephren gives a riddle(递归)
A. Scarborough Fair time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
HttpClient 测试web API上传文件实例
1.使用HttpClient 测试上传文件并且设置header信息: using Lemon.Common; using Newtonsoft.Json; using System; using Sy ...