编程 Javascript

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>

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

总结

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

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

- Author -

Avenstar

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

LBS blog sql注射漏洞[All version]-官方已有补丁

Aug 26 Javascript

JavaScript实现统计文本框Textarea字数增强用户体验

Dec 21 Javascript

JavaScript中的数组特性介绍

Dec 30 Javascript

使用命令对象代替switch语句的写法示例

Feb 28 Javascript

JS日期加减,日期运算代码

Nov 05 Javascript

jQuery内容过滤选择器用法示例

Sep 09 Javascript

node上的redis调用优化示例详解

Oct 30 Javascript

webpack中如何加载静态文件的方法步骤

May 18 Javascript

js对象数组和对象的使用实例详解

Aug 27 Javascript

如何在wxml中直接写js代码(wxs)

Nov 14 Javascript

js实现秒表计时器

Dec 16 Javascript

JavaScript实现网页跨年倒计时

Dec 02 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