Vue.js实现列表清单的操作方法


Posted in Javascript onNovember 15, 2017

一、Vue.js简要说明

Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与前端框架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.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>
   <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, 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

<div id="app">
 <div class="collection">
  <a href="#!" class="collection-item"
    v-for="gameName in gameNames"
    :class="{active: activeName == gameName}"
    @click="selected(gameName)">{{gameName}}</a>
 </div>
</div>

JS

new Vue({
 el: "#app",
 data: {
  gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄',
   '守望先锋'
  ],
  activeName: ''
 },
 methods: {
  selected: function(gameName) {
   this.activeName = gameName
  }
 }
})

总结

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

Javascript 相关文章推荐
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
vue实现在线翻译功能
Sep 27 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
Webpack3+React16代码分割的实现
Mar 03 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 #Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 #Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 #Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 #Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 #Javascript
JavaScript函数绑定用法实例分析
Nov 14 #Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 #Javascript
You might like
php5.3 注意事项说明
2013/07/01 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
发现的以前不知道的函数
2006/09/19 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
python实现随机梯度下降法
2020/03/24 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
写好自荐信的技巧
2013/11/08 职场文书
社区活动邀请函范文
2014/01/29 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
个人学习总结范文
2015/02/15 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
高中数学课堂教学反思
2016/02/18 职场文书