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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
判断滚动条滑到底部触发事件(实例讲解)
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
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
详解Python当中的字符串和编码
2015/04/25 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
司机个人年终总结
2015/03/03 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers